Changes to existing slider WordPress
- SOLVED
I have a slider that is working but I need to make a few changes and need some help on how to do it.
Here is where you can see the slider: http://danielledsouza.com/wordpress
Here is the html for the slider:
<div class="home-slider-wrap">
<div class="home-slider">
<div class="slider-button active first" style="background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/yconversationsprite.png);" data-index="0"> </div>
<div class="slider-button" style="background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ylearnsprite.png);" data-index="1"> </div>
<div class="slider-button" style="background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/yactsprite.png);" data-index="2"> </div>
<div class="slider-button" style="background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ynowsprite.png);" data-index="3"> </div>
<div class="slider-button last" style="background-image:url(<?php echo get_bloginfo('stylesheet_directory'); ?>/images/ygodsprite.png);" data-index="4"> </div>
<div class="slider-image">
<?php
if (get_field('slider_images', 'options')) { 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 style="clear:both;"></div>
</div>
</div>
Here is the script to make it work:
<!--Slider 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 button_delay = 1000;
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>
Here's what I need to change:
- When the user CLICKS on the slider buttons, I would like it to go to the link that the slide itself is linked to. When the user hovers over the button, I want the slide to change the slide after 1 second (this is already how it is set up now).
- Also, in relation to this, the hover effect is a little buggy because if you hover over multiple buttons quickly in a row, they all active 1 second later. If the user removes their mouse from the button, the slider action should be canceled so this doesn't happen.
- And finally, the buttons on the side have a small arrow that is supposed to go OVER the main image, but I can't get any CSS to effect that layout to make this happen. Some advice on how to make that happen would be great as well.
Answers (1)
Duncan O'Neill answers:
Hi there,
try this for the 'click' behaviour of the links;
change this;
}else if(e=='click'){
clearTimeout(button_timer);
showSlide(slide);
to this;
}else if(e=='click'){
clearTimeout(button_timer);
//showSlide(slide);
location.href=sliderImages[i].parent('a').attr("href");
Let me know if that works.
The css for the hover on the left-hand buttons is at line 415 in this file;
http://danielledsouza.com/wordpress/wp-content/themes/dsouza-custom-theme-2013/style.css
Working on the exact changes you need....
hope this helps.
Duncan O'Neill comments:
For the css changes to the slider buttons you need to edit this file;
[[LINK href="http://danielledsouza.com/wordpress/wp-content/themes/dsouza-custom-theme-2013/style.css"]]http://danielledsouza.com/wordpress/wp-content/themes/dsouza-custom-theme-2013/style.css[[/LINK]]
On line 406 change this;
.slider-button {
background-position: 0 0;
background-repeat: no-repeat;
cursor: pointer;
height: 45px;
margin: 4px 0 0 4px;
width: 225px;
z-index: 9999 !important;
}
to this
.slider-button {
background-position: 0 0;
background-repeat: no-repeat;
cursor: pointer;
height: 45px;
margin: 4px 0 0 4px;
width: 225px;
z-index: 9999 !important;
position: relative;
}
So all you're doing is adding
position:relative;
best,
Zac Eckstein comments:
Thank you! The CSS worked. I would have never thought to try relative positioning to make that happen.....
The JS change didn't see to work though. Clicking doesn't seem to perform any action now.
Thanks for your help so far!
Duncan O'Neill comments:
For the second issue, try replacing this;
}).mouseout(function(){
// button_behaviour('hoverOut');
timer = setTimeout( loopSlider, delay );
with this;
}).mouseout(function(){
// button_behaviour('hoverOut');
//timer = setTimeout( loopSlider, delay );
clearTimeout(timer);
Zac Eckstein comments:
That didn't do it unfortunately, it's still does the switch even if you remove the mouse before 1 second it looks like.
Zac Eckstein comments:
FYI, correction: If I click on a button it stops the slideshow where it's at and then does not continue until I hover over a button again.
Duncan O'Neill comments:
Re the js, try replacing;
location.href=sliderImages[i].parent('a').attr("href");
with;
location.href=$(sliderImages[i]).parent('a').attr("href");
?
Duncan O'Neill comments:
PM'ed my skype user
Duncan O'Neill comments:
Try adding
clearTimeout(button_timer);
to the
}).mouseout(function(){
?
Zac Eckstein comments:
Thanks! That corrected the URL issue. I can't use Skype right now because I'm at my job (I know, tsk tsk!).
Zac Eckstein comments:
Perfect, it all works great now! You're awesome, thank you so much for your help.
Duncan O'Neill comments:
Excellent news, glad I could help.