Nivo Slider w/thumbnails
  • Anyone have any experience using the nivo slider with thumbnails.

    I can't figure out how to get the thumbs to work. Was hoping to use the rel="" option but can't get the thumbs to show up for nothing.

    By default you have to create a thumb image and use the naming scheme filename_thumb.jpg and the javascript searches for the file.

    With the rel="" option you can give it the exact location and name of the file.

    Any suggestions would be appreciated.

  • 10 Answers sorted by
  • Hey Ralph - Can you paste an example of the code you are using for the thumbnails?

    Note... For this forum, if you place your code snippet between <code> tags, it will render the actual code.

    For example...
    <v:collection path="collection_name">
    <v:text path="text_name"" />
    </v:collection>

  • I have tried it two ways as a section and as a collection

    <v:img path="slider/slide1" width="940" height="380" rel="<v=slide1thumb>" title="#caption_image1" />

  • The collection you made is absolutely the right way to do it, but that code above looks like it would have worked too. What about something like:

    <v:collection path="slides"><v:img path="large" width="940" height="380" rel="<v=thumb>" title="#caption_image1" /></v:collection>

  • Is it possible that it is not rendering the rel= at all. Even when I put a link to an actual file it doesn't work. I noticed on the documentation that the v:img has no info about the rel.

  • Yes the rel is being left out totally. When viewing the source it displays:

    <img width="940" height="380" title="#caption_image1" alt="Image" src="http://testrealtyaustin.vaesite.net/__data/image1.2.jpg" />

    The rel is non existing.

  • Perhaps I'm mistaken, but I don't think the HTML image tag supports the rel attribute... or at least it's not a standard attribute: http://www.w3schools.com/tags/tag_img.asp

    @Ralph
    - Is there an alternative method to group the thumbnails using that plugin? As an alternative, there are a ton of other good gallery plugins out there (jQuery Cycle Plugin is probably one of the most widely used).

  • I was able to get it working, but not with actual size thumbnail I was wanting. I changed in the JS that renamed the thumbs to _thumb.jpg and just made it rename to .jpg

    At that point the css is resizing the width of the image for the thumbnail. To resize the height distorts the photo. So the thumbs are smaller than I originally wanted but will work.

  • To get the rel="" attribute to show up, use the <v=FOOBAR> shortcut to output the path to the image



    <img src="<v=large,940,380>" width="940" height="380" rel="<v=thumb>" title="#caption_image1" />


  • Great idea Mike!

    Yes, Ralph... you can try what Mike described. Instead of using the v:img VaeML tag, use a regular img tag inside your collection. Then use Vae shortcuts to create all your img tag attributes.

  • Worked like a champ! Thanks for the suggestion Mike.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

In this Discussion