Question

I’m building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I’m very new to programming.

I’m having trouble working out a selector to allows the user to go “back” showing the next hidden div, after the first shown div, and hiding the last showing div – faux code example below.

<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>

<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>

Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.

$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.

// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it

});

Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom

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

// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.

$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens  if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?


});

Answer 1

I dont quite understand correctly, however this info may help…you need to match the first visible div then use .prevAll() and filter to get the hidden sibling

$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();