0

I created a standart jquery slideshow from the jquery cycle plugin, which i didnt change. Now everything works just fine after I followed this tutorial. My Question now is, does anyone know how to change the plugins code, that the prev and next buttons are not both shown on mouseOver, but just one of them depending in which half of the slideshow the mouse is?

I would be really pleased if someone can help me :)

ibanes88
  • 123
  • 2
  • 9
  • Can you please provide some feedback on the answers or mark one of them as accepted for future users. This is how StackOverflow works. – lucuma Jun 04 '12 at 21:58

2 Answers2

2

Update. I wasn't happy with my last update as it worked but could have been a little cleaner.

JSFiddle:

http://jsfiddle.net/lucuma/fg6d4/10/

$(document).ready(function() {
$('#sliders').hover(
function() {

    $('.controller', this).fadeIn();
}, function() {
    $('.controller', this).fadeOut();
});

$('#slideshow').cycle({
    prev: $('.controller .prev', this),
    next: $('.controller .next', this),
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        // you can easily adapt this to hide prev on firstslide and next on last slide
        if (options.currSlide < options.slideCount / 2) {
            $(options.prev).hide();
            $(options.next).show();
        } else {
            $(options.prev).show();
            $(options.next).hide();
        }

    }

});

});​​

HTML:

<div id="sliders">

    <div id="slideshow">

      <div><img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" /></div>
      <div><img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
      <div><img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>
   </div>
    <div class="controller">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
</div>
​

CSS:

#sliders{width:500px;height:500px;position:relative}
#slideshow {width:100%;height:100%;}
#sliders .controller {display:none;position:absolute;top:50px;z-index:100;width:100%;height:20px}
#sliders .controller a {background-color:white;padding:10px;color:red}
#sliders .controller a.next {position:absolute;right:0}

​

lucuma
  • 18,247
  • 4
  • 66
  • 91
0

I think you're going to have to add two elements layered on top of the image and add a toggle on roll over. Cycle doesn't toggle or position the buttons automatically.

Andrew Stanbury
  • 11
  • 1
  • thanks for the fast answer, could you give me an example or tell me where to find a tutorial, since I just started java and jquery with the tutorial above.. – ibanes88 Jun 01 '12 at 11:41