Scrollable slider for thumbnails

[salcott]

In my project I'm using medium sized thumbnails beneath the slider itself. 1.) Is there a built-in way to have the thumbnails in a mini slider of their own? I'd like them to fit on one row with navigation on either side of the row, and to add a class to the selected thumbnail. I also want to place the thumbnail row on a fixed line beneath the main slider so it doesn't move up and down as the slider adjusts for image dimensions. 2.) How can I relocate the thumbnails?

Thanks for your hard work.

[webbiesdk]

Not a build in thing, but I did make demo that somewhat have what you are looking for: http://webbies.dk/assets/files/SudoSlider/package/demos/thumbnails%202.html

Having the navigation be in a fixed location should be easy with some CSS positioning.

[salcott]

Just what I wanted. Whats the method for replacing the nav arrow images with text? Thank you for the fast reply!

[webbiesdk]

Try to add these options, you'll get the idea.

nextHtml: "<span>This is text </span>",
prevHtml: "<span>This is other text </span>"

They should of course only be added to the relevant slider (there are 2 sliders in the demo i linked to, one main slider and one nav slider).

[salcott]

For some reason my images are being sized at width: 9000000px; on both sliders. Looking into this.. Instead of the math used to size the thumbnails, I already have thumbnail copies on my server that I'd use preferably. What edits are necessary to the second slider to use my thumbnail files? I really appreciate your help.

[webbiesdk]

The 9000000px is because of the trick i use to make the slider contain all the slides next to each other. make sure you have set responsive to true, that should fix it. If not then it is some of your CSS.

As the smaller thumbnails.

Just above the line:

var controlsSlider = $("#sliderControls").sudoSlider({

Insert

var thumbs = [];
for (var i = 0; i < ajaximages.length; i++) {
    var image = ajaximages[i];
    thumbs.push(image.split(".").join("_thumb."));
}

And replace the line

ajax: ajaximages.concat(ajaximages).concat(ajaximages),

with ajax: thumbs.concat(thumbs).concat(thumbs),

This only works if you image names only has a single ".". Then thumbnail slider will then take the images "[name]_thumb.jpg" instead of "[name].jpg".

[salcott]

I created a test page with just the slider and it's working great!

You are a Godsend my friend!

[webbiesdk]

You know, there are ways of showing your appreciation.

http://webbies.dk/SudoSlider/donate/

[salcott]

You got it

[webbiesdk]

I got it. Thanks

[salcott]

Having one issue.. The thumbnails weren't displaying at 100% so I did this:

var thumbHeight = $img.height("auto").height(); var thumbWidth = $img.width("auto").width();
$img.width(thumbWidth).height(thumbHeight);

But the containing divs all have width of 83px, so the images are overlapping. If I go into inspector and remove the width from the containing div, the images appear correct. My container is 500px wide and I have 6 photos so it seems it's calculating the 83px from that..