Only one thumbnail shows in Royal Slider

[HadiH]

I've recently purchased a license for Royal Slider and began using the documentation provided to implement it into our ASP.NET Website at: TheFullertonian.com. I've managed to get the slider in and working aside from a problem with thumbnails.I'm attempting to get our viewer working like the one in this link: http://dimsemenov.com/plugins/royal-slider/gallery/I got the link example to work with div tags. All you need to do to see multiple photos is add more "div id='imageId[####]" into (div class="col span_4 fwImage"). The anchor tags in the code show what how images were originally displayed in the dimsemenov.com link.\[code\]<div class="col span_4 fwImage"><div id="gallery-1" class="royalSlider rsDefault"><div id="imageId1108"><a class="rsImg"href="http://thefullertonian.com/Content/Article/2013.03.17_16.28.20_IMG_2664.JPG"> </a> <div><a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1108">Delete</a> </div><img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.17_16.28.20_IMG_2664.JPG" /> </a></div><div id="imageId1105"> <a class="rsImg" href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.00_IMG_2660.JPG"> </a> <div> <a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1105">Delete</a> </div><img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.00_IMG_2660.JPG" /> </a></div><div id="imageId1106"> <a class="rsImg" href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.03_IMG_2661.JPG"> </a> <div> <a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1106">Delete</a> </div> <img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.03_IMG_2661.JPG" /> </a></div><div id="imageId1107"> <a class="rsImg" href="http://thefullertonian.com/Content/Article/2013.03.17_16.27.06_IMG_2662.JPG"> </a> <div> <a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1107">Delete</a> </div> <img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.17_16.27.06_IMG_2662.JPG" /> </a></div><div id="imageId1109"> <a class="rsImg" href="http://thefullertonian.com/Content/Article/2013.03.17_16.38.01_IMG_2666.JPG"> </a> <div> <a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1109">Delete</a> </div> <img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.17_16.38.01_IMG_2666.JPG" /> </a></div><div id="imageId1110"> <a class="rsImg" href="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig- zoom.jpg"> </a> <div> <a class="deleteLink" href="http://thefullertonian.com/Image/Delete/1110">Delete</a> </div> <img width="40" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig- zoom.jpg" /></a></div><a class="rsImg" data-rsw="632" data-rsh="500" data- rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/2.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/2.jpg">Vincent van Gogh - The Starry Night<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/2.jpg" /></a><a class="rsImg" data-rsBigImg="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig-zoom.jpg" href="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new- red-clown-wig-zoom.jpg">Leonardo da Vinci - Mona Lisa<img width="96" height="72" class="rsTmb" src="http://thefullertonian.com/Content/Article/2013.03.20_16.30.42_new-red-clown-wig-zoom.jpg" /></a><a class="rsImg" data-rsw="417" data-rsh="500" data- rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/4.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/4.jpg">Grant DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/4.jpg" /></a><a class="rsImg" data-rsw="601" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/5.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/5.jpg">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/5.jpg" /></a><a class="rsImg" data-rsw="350" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/6.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/6.jpg">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/6.jpg" /></a><a class="rsImg" data-rsw="596" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/7.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/7.jpg">Paul Cezanne - Card Players<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/7.jpg" /></a><a class="rsImg" data-rsw="700" data-rsh="414" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/8.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/8.jpg">Ilya Repin - Reply of the Zaporozhian Cossacks<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/8.jpg" /></a><a class="rsImg" data-rsw="470" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/9.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/9.jpg">Ivan Aivazovsky - Chesmabattle<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/9.jpg" /></a><a class="rsImg" data-rsw="500" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/10.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/10.jpg">Gustav Klimt - The Kiss<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/10.jpg" /></a> <a class="rsImg" data-rsw="700" data-rsh="475" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/11.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/11.jpg">Ivan Shishkin - Morning in a Pine Forest<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/11.jpg" /></a></div></div></div></div>\[/code\]I've been able to copy out an HTML only version of the gallery template. Thumbnails work just like in the dimseminov.com link, but implementing C# Razor added a layer of difficulty. Script must be added to the slider and we've placed ours inside of a partial that also contains our current implementation of Royal Slider. \[code\]<script>$(function () { var bar = $('.bar'); var percent = $('.percent'); var status = $('#status'); $('.royalSlider').royalSlider({ fullscreen: { enabled: true, nativeFS: true }, arrowsNav: true, imageAlignCenter: true, controlNavigation: 'thumbnails', loop: true, navigateByClick: true, autoScaleSlider: true, autoScaleSliderWidth: 42.5, autoScaleSliderHeight: 35, numImagesToPreload: 2, keyboardNavEnabled: true, fadeinLoadedSlide: true, thumbs: { fitInViewport: true, appendSpan: false, firstMargin: true, arrows: true, paddingBottom: 4, } }); $('form').ajaxForm({ beforeSend: function () { status.empty(); var percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal); percent.html(percentVal); }, complete: function (xhr) { status.html(xhr.responseText); } });});</script>\[/code\]Below is the code for TheFullertonian slider. For some reason the larger image will show just fine, but only one thumbnail will be shown in the viewer at any given time. Please compare this code to the code listed in the first html example.\[code\]@if (Model != null){<div class="royalSlider reDefault"> @foreach (var item in Model) { <div id="imageId@(item.ImageId)"> <a href="http://stackoverflow.com/Image/Details/@item.ImageId"> <img src="http://stackoverflow.com/questions/15674031/@(item.FullPath)?width=650&height=431&mode=max&scale=canvas" alt="@item.Title" /> <div>@item.Title</div> </a> <img height="72" class="rsTmb" src="http://stackoverflow.com/questions/15674031/@(item.FullPath)" /> </div> } <div class="rsTmb"></div></div>}\[/code\]How can I get it where I can view multiple thumbnails under one photo? So far I only see one thumbnail that correlates to the larger photo shown in the upper portion of the slider.If you would like to see how the slider looks now, follow this link: http://thefullertonian.com/Article/Details/739