Ask your JavaScript questions! Pay money and get answers fast! (more info)

Small changes to javascript slider JavaScript

  • SOLVED

The below slider is currently working (almost) perfectly for me, but I need to change a couple of it's behaviors.

First of all, here is the script from my header.php file:


<script type="text/javascript">

$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
var sliderImages = $('.home-slider .slider-image img');
var sliderSwitchers = $('.home-slider div.slider-button');
var sliderSize = sliderImages.size();
var i = 0;
var timer = null;
var delay = 5000;
var loopSlider = function(){
i++;
if( i>=sliderSize ) i=0;
showSlide(i);
timer = setTimeout( loopSlider, delay );
}
var showSlide = function(i){
sliderSwitchers.not((sliderSwitchers[i])).removeClass('active');
$(sliderSwitchers[i]).addClass('active');
sliderImages.not(sliderImages[i]).stop().fadeOut(1000);
$(sliderImages[i]).stop().fadeIn(1000);
}
if( sliderSize ){
sliderImages.hide();
$(sliderImages[0]).show();
timer = setTimeout( loopSlider, delay );
}
sliderSwitchers.mouseenter(function(){
i = $(this).attr('data-index');
showSlide(i);
clearTimeout(timer);
}).mouseout(function(){
timer = setTimeout( loopSlider, delay );
})
});

</script>

And here is the html to display everything:
<div class="home-slider-wrap">
<div class="home-slider">
<div class="slider-image">
<?php if (get_field('slider_images', 'options')) { ?>
<?php while (has_sub_field('slider_images' , 'options')) { ?>
<?php if (get_sub_field('url_target') == 'true') {
$target='target="_blank"'; } ?>
<a <?php echo $target; ?> href="<?php echo get_sub_field('image_url'); ?>">
<img src="<?php echo get_sub_field('slider_image'); ?>" />
</a>
<?php }
} ?>
</div>
<div class="slider-button active first" style="width:210px; background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/yconversationsprite.png);" data-index="0">&nbsp;</div>
<div class="slider-button" style="width:124px; background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ylearnsprite.png);" data-index="1">&nbsp;</div>
<div class="slider-button" style="width:109px; background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/yactsprite.png);" data-index="2">&nbsp;</div>
<div class="slider-button" style="width:124px; background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ynowsprite.png);" data-index="3">&nbsp;</div>
<div class="slider-button last" style="width:106px; background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ygodsprite.png);" data-index="4">&nbsp;</div>
<div style="clear:both;"></div>
</div>
</div>


The changes I'm looking to make are:

Currently when a user hovers over the menu buttons the slide changes immediately (causing some strange behavior if they hover over them too quickly) and when you click on them nothing happens. Instead of that, I would like:
<strong>
- When the user hovers over the bottom buttons, I want to add a 2-second delay until the corresponding slide changes above.
- When the user clicks on the buttons, I want the slide to change (in additional to when they hover over it for at least 2 seconds)</strong>

And that's it! It should be really simple for someone who knows what they're doing (which I do not.) Easy money.

Thanks.

Answers (2)

2013-03-30

Arnav Joy answers:

try this script


<script type="text/javascript">



$(document).ready(function(){

$(".slidingDiv").hide();

$(".show_hide").show();

$('.show_hide').click(function(){

$(".slidingDiv").slideToggle();

});

var sliderImages = $('.home-slider .slider-image img');

var sliderSwitchers = $('.home-slider div.slider-button');

var sliderSize = sliderImages.size();

var i = 0;

var timer = null;

var delay = 5000;

var loopSlider = function(){

i++;

if( i>=sliderSize ) i=0;

showSlide(i);

timer = setTimeout( loopSlider, delay );

}

var showSlide = function(i){

sliderSwitchers.not((sliderSwitchers[i])).removeClass('active');

$(sliderSwitchers[i]).addClass('active');

sliderImages.not(sliderImages[i]).stop().fadeOut(1000);

$(sliderImages[i]).stop().fadeIn(1000);

}

if( sliderSize ){

sliderImages.hide();

$(sliderImages[0]).show();

timer = setTimeout( loopSlider, delay );

}

sliderSwitchers.mouseenter(function(){

i = $(this).attr('data-index');


setTimeout(function(){ showSlide(i); },2000);


clearTimeout(timer);

}).mouseout(function(){

timer = setTimeout( loopSlider, delay );

})

});



</script>


eckstein comments:

Thanks! That works for the two-second delay, but when I click the menu buttons it's not switching the sliders still, only when I hover for 2+ seconds.


Arnav Joy comments:

sorry i did not understood your second problem . can you show me site url

2013-03-30

Christianto answers:

Hello,

Please try this..
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
var sliderImages = $('.home-slider .slider-image img');
var sliderSwitchers = $('.home-slider div.slider-button');
var sliderSize = sliderImages.size();
var i = 0;
var timer = null;
var delay = 5000;
var button_delay = 2000;
var button_timer;
var loopSlider = function(){
i++;
if( i>=sliderSize ) i=0;
showSlide(i);
timer = setTimeout( loopSlider, delay );
}
var showSlide = function(i){
sliderSwitchers.not((sliderSwitchers[i])).removeClass('active');
$(sliderSwitchers[i]).addClass('active');
sliderImages.not(sliderImages[i]).stop().fadeOut(1000);
$(sliderImages[i]).stop().fadeIn(1000);
}
var button_behaviour = function(e, slide){
if(e=='hover'){
button_timer = setTimeout( function(){ showSlide(slide) }, button_delay );
}else if(e=='click'){
clearTimeout(button_timer);
showSlide(slide);
}else{
clearTimeout(button_timer);
}
}
if( sliderSize ){
sliderImages.hide();
$(sliderImages[0]).show();
timer = setTimeout( loopSlider, delay );
}
sliderSwitchers.mouseenter(function(){
i = $(this).attr('data-index');
button_behaviour('hover',i);
clearTimeout(timer);
}).mouseout(function(){
// button_behaviour('hoverOut');
timer = setTimeout( loopSlider, delay );
}).click(function(){
i = $(this).attr('data-index');
button_behaviour('click',i);
});
});
</script>


You can check on button_behaviour function to see how it works.
Hope this help ;)


eckstein comments:

Thank you, that works perfectly now!