Search jQuery

jQuery Forum

Modifying Script to Include Next/Previous Capability

in Using jQuery • 8 years ago

I’ve been trying to modify some existing code by adding Next/Previous links…

I seem to be having trouble within the nextImage() and prevImage() functions. Even though I’ve figured out how to get the HREF of the next item in the anchor link sequence, I’m not getting the page to update properly (displaying the next/previous thumbnail in a selected state, and the main image updated to the corresponding image). Using alert boxes, I can tell that the URL I’m passing is correct, but I’m not sure why the functionality dies at that point. Any help would be appreciated.

http://www.burntscarlet.com/_test/gallery_jQuery/includes/gallery.js

This is the HTML code for the links:

<div id="gallery-next-prev"><p><a id="previous" href="">< Previous</a>    <a id="next" href="">Next ></a></p></div>

And the HTML code for the thumbnail grid looks like this:

<div id="g_thumbs">
<a href="_gallery/images/painting/wip_1.jpg" title="Oil Painting 1"><img src="_gallery/thumbs/painting/wip_1.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_2.jpg" title="Oil Painting 2"><img src="_gallery/thumbs/painting/wip_2.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_3.jpg" title="Oil Painting 3"><img src="_gallery/thumbs/painting/wip_3.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_4.jpg" title="Oil Painting 4" class="last-in-row"><img src="_gallery/thumbs/painting/wip_4.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_5.jpg" title="Oil Painting 5"><img src="_gallery/thumbs/painting/wip_5.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_6.jpg" title="Oil Painting 6"><img src="_gallery/thumbs/painting/wip_6.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_7.jpg" title="Oil Painting 7"><img src="_gallery/thumbs/painting/wip_7.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_8.jpg" title="Oil Painting 8" class="last-in-row"><img src="_gallery/thumbs/painting/wip_8.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_9.jpg" title="Oil Painting 9"><img src="_gallery/thumbs/painting/wip_9.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_10.jpg" title="Oil Painting 10"><img src="_gallery/thumbs/painting/wip_10.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_11.jpg" title="Oil Painting 11"><img src="_gallery/thumbs/painting/wip_11.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_12.jpg" title="Oil Painting 12" class="last-in-row"><img src="_gallery/thumbs/painting/wip_12.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_13.jpg" title="Oil Painting 13"><img src="_gallery/thumbs/painting/wip_13.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_14.jpg" title="Oil Painting 14"><img src="_gallery/thumbs/painting/wip_14.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_15.jpg" title="Oil Painting 15"><img src="_gallery/thumbs/painting/wip_15.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_16.jpg" title="Oil Painting 16" class="last-in-row"><img src="_gallery/thumbs/painting/wip_16.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_17.jpg" title="Oil Painting 17"><img src="_gallery/thumbs/painting/wip_17.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_18.jpg" title="Oil Painting 18"><img src="_gallery/thumbs/painting/wip_18.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_19.jpg" title="Oil Painting 19"><img src="_gallery/thumbs/painting/wip_19.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_20.jpg" title="Oil Painting 20" class="last-in-row"><img src="_gallery/thumbs/painting/wip_20.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_21.jpg" title="Oil Painting 21"><img src="_gallery/thumbs/painting/wip_21.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_22.jpg" title="Oil Painting 22"><img src="_gallery/thumbs/painting/wip_22.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_23.jpg" title="Oil Painting 23"><img src="_gallery/thumbs/painting/wip_23.jpg" alt="" width="58" height="58" /></a>
<a href="_gallery/images/painting/wip_24.jpg" title="Oil Painting 24" class="last-in-row"><img src="_gallery/thumbs/painting/wip_24.jpg" alt="" width="58" height="58" /></a>
<div style="clear:both;line-height:0;"> </div>
</div>

Replies(3)

kbwood.au

Re: Modifying Script to Include Next/Previous Capability

8 years ago

You are trying to compare a href value (string) with a jQuery object since you are wrapping newHREF. And you are comparing the first #g_main a href every time around the loop. Try something like this instead:

function nextImage() {
showImage(+1);
}
function prevImage() {
showImage(-1);
}
function showImage(offset) {
var index = (thumbIndex + thumbCount + offset) % thumbCount; // Prev/next with wrap
var href = $('#g_thumbs a').eq(index).attr('href'); // Get selected href
var elem = $('#g_main a[href="' + href + '"]').addClass('selected'). // Find matching and show
children().fadeTo(250, .4);
$('#g_main a').not(elem).removeClass('selected'). // Hide others
children().css('opacity', '1');
}

It's not clear whether the this in your loop is supposed to refer to the #g_thumbs or #g_main a element.

pherank

Re: Modifying Script to Include Next/Previous Capability

8 years ago

Thanks for the tip, Kbwood. I was thinking that I needed to iterate through the thumbnails, comparing each thumbnail href to my newHREF var, and then setting a selected state on the thumbnail that matches. But I finally noticed too that I was still using the "g_main" reference in the code (to the main image div).

I'll give your code a try and let you know how it's working...

pherank

Re: Modifying Script to Include Next/Previous Capability

8 years ago

I decided that I needed to focus on one thing - first, the thumbnails and their selected state (I think updating the main image will be even harder). Here's how things stand at present (this now works):

The current jQuery script

Demo of the gallery functionality

Edit: this has been fixed. [But the showImage() function doesn't update its var "index" value with each click of Next/Previous. I'm not sure what's up with that.]

Now I need to understand how to update the main image when the Next/Previous links are clicked...

Top Reply

Response title

Attachments

jQuery Forum

Modifying Script to Include Next/Previous Capability

Replies(3)

Re: Modifying Script to Include Next/Previous Capability

Re: Modifying Script to Include Next/Previous Capability

Re: Modifying Script to Include Next/Previous Capability

Statistics

Tags

Actions