I made the home page of my site so that when you mouse over the different service offerings that the related image would also display. However when Malsup's hosting of Cycle came off github the function was lost.
Here is the code I am using that worked before but no longer works correctly. The slideshow still cycles through, but the mouseover function does not work correctly.
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager : '#slideshow-nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
speed: 1000,
delay: 3000,
timeout: 9000,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true
});
});
</script>
What changes do I need to make to get it working again?
Thanks.
Try this 'command' of the plugin libary, it will do the trick.
<script type="text/javascript">
$(document).ready(function(){
$("#skills li").click(function(){
id = $(this).attr('id');
imgIndexToJump = id.substr(1); //extracting number as index from id
imgIndexToJump = parseInt(imgIndexToJump, 10);
$('.slideshow').cycle('goto', imgIndexToJump);
});
});
</script>
assign ids to ur list in skills like this and it will work.
<ul id="skills">
<li id="a0">
a1-data
</li>
<li id="a2">
a1-data
</li>
</ul>
Related
I'm building a fancybox modal(v3) with inside it two owl carousels(v2). It's used as a product quick view function.
The problem I'm facing is that the second carousel (used for the thumbs) doesn't have core css styles applied, while the carousel is actually initialized.
So the two carousels are initialized but one just won't use styling from the actual owl-carousel.css stylesheet.
I'm completly confused.
I've created a fiddle here with the actual problem.
My html
<div id="quick-shop-modal" class="cd-quick-view" style="display:none;">
<div class="product-images-slider">
<div class="slider-container"></div>
<div class="thumbnail-slider-container"></div>
</div>
</div>
Quick shop
Jquery
$(document).ready(function() {
$(".quick_view").on('click', function() {
var url = 'some-url'
$.fancybox.open({
touch: false,
src: '#quick-shop-modal',
type: 'inline',
beforeShow: function() {
quick_shop(url)
}
});
});
});
function quick_shop(url) {
var $modal = $('#quick-shop-modal');
$.getJSON(url, function(data) {
$modal.data('product', data.product);
var product = data.product;
var images = '';
$.each(product.images, function(index, image_id) {
images += '<div class="item"><div class="content"><img src="https://via.placeholder.com/350x150" class="img-responsive"></div></div>';
});
$modal.find('.slider-container').html('<div id="slider" class="slider owl-carousel">' + images + '</div>')
$modal.find('.thumbnail-slider-container').html('<div id="thumbnailSlider" class="thumbnail-slider">' + images + '</div>')
$modal.find('.slider').owlCarousel({
loop: false,
nav: false,
items: 1
}).on('changed.owl.carousel', function(e) {
$modal.find('.thumbnail-slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
$modal.find('.thumbnail-slider').owlCarousel({
loop: false,
margin: 10,
nav: false,
items: 3,
stagePadding: 40
}).on('click', '.owl-item', function() {
$modal.find('.slider').trigger('to.owl.carousel', [$(this).index(), 300, true]);
}).on('changed.owl.carousel', function(e) {
$modal.find('.slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
});
}
1) I do not think that anyone would be able to help you without seeing live demo and probably no-one will spend time to create it for you.
2) From you code, it seems that changing one slider would trigger change callback on both sliders. IF that is true, than that could cause the issues.
3) It is not possible to tell what role of fancybox is here just by looking at those pieces of code (e.g., what is webdinge_quick_shop doing; if #webdinge-quick-shop-modal exists, then fancybox should work fine)
Edit & Answer to updated question -
Your 2nd own carousel is missing owl-carousel classname, simply add .owl-carousel to .thumbnail-slider element, see http://jsfiddle.net/zLfnmrx1/
first post so hopefully i've followed protocol.
I'm using bxslider with colio on my site - specifically trying to add the bxSlider gallery within the hidden colio content. I saw on previous questions people having an issue initiating the gallery due to it being within a hidden div here
I did a test with a toggled hidden div which worked fine
But can't get it to work with colio: my_colio_test
Any ideas?
So Javascript for my_colio_test:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'my_portfolio',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
$(".holder").show();
mySlider.reloadSlider();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});
window.setTimeout(function(){
list.trigger('colio','excludeHidden');
}, 25);
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
});
</script>
In the toggle test i did an initial function defining the slider so it initated:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
$(".holder").show(); // DIV that contain SLIDER
mySlider.reloadSlider();
});
});
</script>
Steven wanderski - bxSlider developer about having to initialise hidden slider:
Since the slider cannot calculate the height and width's of hidden
elements, you need to either call .bxSlider after the elements have
been set to display:block, or move them off screen, set them to
display: block, initialize the slider, then hide them.
SO I've sort of got it to work - yay.
In the CSS the colio-content is set to display:none - so i removed it and put it in the javascript function instead.
Only issue i have now is that i get replicated/duplicated sliders as i don't know how to target.
Where i'm at now: my_colio_test_2
I'm trying to modify a jQuery knob plugin to use as an animated chart.
This is what I have so far:
HTML:
<ul id="chart">
<li rel="100">Cats</li>
<input class="knob animated donut" value="0" rel="70" />
Javascript:
$('.knob').each(function () {
var $this = $(this);
var myVal = $this.attr("rel");
$(this).knob({
readOnly: true,
displayInput: false,
bgColor: "cccccc",
fgColor: "e60022"
});
$({
value: 0
}).animate({
value: myVal
}, {
duration: 1000,
easing: 'swing',
step: function () {
$this.val(Math.ceil(this.value)).trigger('change');
}
})
});
$('#chart > li').mouseover(function(){
$('#donut').text($(this).attr('rel'));
});
I'd like to be able to hover over the <li> element and use the rel value to apply it to the chart. I think I might need to include some JS to redraw the chart on hover though as well, but not sure how to do that either (I don't have much JS knowledge).
Any help is appreciated.
DEMO
You need to set the animate properties in the event handler. So, initialize your "knob" element as you did, then in the event handler retrieve the values and run the animation.
In the demo I used a data attribute (it just makes more sense to me), not the rel attribute, but the following should work with your markup:
var donut = $('.knob');
donut.knob({readOnly: true,
displayInput: false,
});
$('#chart > li').on('mouseenter', function(){
var myVal = $(this).attr('rel');
donut.stop().animate({value: myVal}, {
duration: 200,
easing: 'swing',
step: function () {
donut.val(Math.ceil(this.value)).trigger('change');
}
});
});
HTML: change the input to use the data attributes for color, as there is a bug in FF
<input class="knob" data-fgColor="#e60022" data-bgColor="#ccc" value="" />
I am working on jquery cycle.My slider is now working properly .
It should hide all images (only display one image ) .And there will be dots below the image user click dots and it will goes to that selected dot image.
Here is fiddle
http://jsfiddle.net/KJHUp/
$('#s3').cycle({
fx: 'fade',
speed: 2500
});
Add this to
HTML :
<ul id="nav"></ul>
JS:
$('.pics').cycle({
fx: 'fade',
speed: 200 ,
slides: '> img',
pager: '#nav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
console.log(idx);
return '<li'+s+'>'+(idx+1)+'</li>';
};
Check jsFiddle
NOTE : I have put 1,2,3 number instead of dots, you can change that to dot and also styling of ul
Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.
Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter
});
});
function onAfter(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
in use with cycle all plugin.
thanks for any help!
so I've changed to this as instructed.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
after: onAfter1
});
});
currentSlide = $("#caption1 a.activeSlide").html()
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
which works fine after the first slide but the first slide randomly says this:
Prev Next (1/111234567891011)
Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?
if I change to this:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
});
currentSlide = $("#caption1 a.activeSlide").html()
});
</script>
It just says 12345678910 instead of 1 of etc.
Edit:
I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
pager: '.thepager',
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr, next, opts) {
currentSlide = $(".thePager a.activeSlide").html();
if (!currentSlide) currentSlide = "1";
$('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}
</script>
but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :(
and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.
EDIT!
I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
you could "fiddle" with its native navigation and get the current picture number, for example:
$('.selector').cycle({
fx: 'scrollLeft',
pager: '.selctorOfPagination',
timeout: 15000,
pause: 1,
next: '.selectorOfNext',
prev: '. selectorOfPrevious'
});
check the pager example here: http://jquery.malsup.com/cycle/int2.html
EDIT: check my example here:
http://jsfiddle.net/jackJoe/7DRSv/
You can check which is the current image by obtaining the html of the pager:
currentSlide = $(".thePager a.activeSlide").html()
And then you can use that variable which is correct and you don't need to "guess" which image is current.
EDIT 2:
Check my new example:
http://jsfiddle.net/jackJoe/7DRSv/2/
P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.
EDIT 3:
New example with a stopped animation, triggered by the next and previous buttons:
http://jsfiddle.net/jackJoe/7DRSv/3/
One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!
You need to use somekind of animation (you can specify the speed in miliseconds);
for an alternative to the "none", use the fx = 'fade' and speed: 1...