Using Divs instead of ul in jquery SlideviewerPro 1.5

Question

I am a newcomer to coding and have been using Dreamweaver on a WYSIWYG basis. I have recently dipped into Jquery and have managed to implement the JQuery SlideshowPro plugin on a page. The problem being that the thumbnails are rather pixelated upon automatic reduction and there isnt much scope for moving the individual thumbnails as there are in an unordered list.

I am wondering if there is a way to manually allocate each individual thumbnail in individual Div's (for ease of use) and the main image to be scrolled/swapped in another Div whilst maintaining the sliding effect on the main image transition only. I am not concerned with having the thumbnails scroll as it is unlikely I will have enough thumbnails on each page to warrant scrolling. In effect a disjointed image swap with the sliding transition maintained.

The original code can be can be found on the following page: gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html although I want to avoid the use of lists if possible.

Answer 1

If I've understood you correctly this should be pretty easy to do with a simple modification to the plugin and a slight change to the li's images.

First I'd add a data attribute to the image tag in the li specifying a separate thumb url, for example:

<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li>

I've added a html 5 data attribute called data-thumb-src to contain the thumb path.

Then modify the part of the plugin that builds the thumb images part of the slideshow. I've downloaded the plugin, around line 99 there's this:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                      
}); 

Swap this out for something like this:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                       
}); 

So the thumbs src now equals the data-thumb-src from the main image.

If you're feeling really adventurous you could try something like this and use the normal thumb by default and then the custom thumb when you need it on an ad-hoc basis:

jQuery(this).find("li").each(function(n) { 
    if( jQuery(this).find("img").attr('data-thumb-src') ){
        var thumb_src = jQuery(this).find("img").attr('data-thumb-src');
    }else{
        var thumb_src = jQuery(this).find("img").attr("src");
    }
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                     
});

So if the thumb src exists use it, else use the normal thumb.

Hope this helps.