can't get thumbnails to work as nav

jodi's Avatar


20 Sep, 2012 07:56 PM


great work! i am having some trouble getting my thumbnails to work, though. here is a link to my working page:

i have managed to scale the image size for the larger img to 460x680, and display thumbnails, belwo, but they are not showing up as usable for navigation, but just appear, lower left, and are not clickable

this example has just 2 images for now

the code in my page is as follows; any help would be greatly appreciated! thanks, jodi

 <!-- start royalslider -->

                <div id="gallery-1" class="royalSlider rsDefault">                      
                    <!-- lazy loaded image w thumbnail -->
                    <a class="rsImg" href="images/gallery/00.jpg">Marriot Pinnacle Hotel <span class="src">Vancouver</span><img width="47" height="70"  src="images/gallery/thumbs/00.jpg" class="rsThumb" /></a>

                    <a class="rsImg" href="images/gallery/01.jpg">Pinnacle Centre <span class="src">Toronto</span><img width="47" height="70"  src="images/gallery/thumbs/01.jpg" class="rsThumb" /></a>                                                                                                                            </div>

 <!-- end royalslider -->

            <script src="js/jquery.royalslider.custom.min.js"></script>

                jQuery(document).ready(function($) {
                        // options below
                        controlNavigation: 'thumbnails',
                        autoScaleSlider: true, 
                        autoScaleSliderWidth: 460,     
                        autoScaleSliderHeight: 680,
                        loop: false,
                        arrowsNavAutohide: true,
                        arrowsNavHideOnTouch: true,                                         
                        globalCaption: true,
                        keyboardNavEnabled: true,
  1. Support Staff 1 Posted by Dmitry Semenov on 21 Sep, 2012 06:56 AM

    Dmitry Semenov's Avatar


    Thumbnail image must have class rsTmb, not rsThumb.


  2. 2 Posted by jodi on 21 Sep, 2012 03:23 PM

    jodi's Avatar

    thanks dmitry, that changed something but it is still showing only one thumbnail at a time, which still don't work as clickalbe nav elements, and now the titles are running into the thumbnails

    please advise, and thank you so much for the help! :)

  3. Support Staff 3 Posted by Dmitry Semenov on 22 Sep, 2012 07:16 PM

    Dmitry Semenov's Avatar

    Sorry for a bit late reply. You also forgot to include thumbnails module from build tool


  4. 4 Posted by jodi on 22 Sep, 2012 07:19 PM

    jodi's Avatar

    hi again

    thanks; that is odd! i did select that but will try again right now :)

  5. 5 Posted by jodi on 22 Sep, 2012 07:27 PM

    jodi's Avatar

    that worked! thanks so much! i realised that i had initially moved the custom js into my js folder, but put it back into the royalslider dir and it's fine now :) one other quick thing - now i see that the right and left arrows have moved over to accommodate the thumb nav - what is the name of these for styling in css, please? i can look at other posts, too

  6. Support Staff 6 Posted by Dmitry Semenov on 22 Sep, 2012 07:53 PM

    Dmitry Semenov's Avatar

    All visual ui styles are in selected skin CSS file -


  7. 7 Posted by jodi on 22 Sep, 2012 07:56 PM

    jodi's Avatar

    i see - thank you very much for all of your time and help with this, dmitry - i am most appreciative and will not bother you again :)

  8. Support Staff 8 Posted by Dmitry Semenov on 22 Sep, 2012 07:58 PM

    Dmitry Semenov's Avatar

    No, problem, feel free to contact me if you'll have any issues.


  9. Dmitry Semenov closed this discussion on 22 Sep, 2012 07:58 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac