I would like to add a jquery gallery with thumbnails to an ezpage. I have added the .js files to the jscript file within my custom template. I uploaded the images to my images file. Then I have added the code to an ezpage as below:
But this is the result - www dot munikpearls dot com/index.php?main_page=page&id=2Code:<!-- it works the same with all jquery version from 1.x to 2.x --><script src="includes/templates/winchester_black/jscript/jscript_jquery.min.js"></script><script src="includes/templates/winchester_black/jscript/jscript_jssor.slider.mini.js"></script><script> jQuery(document).ready(function ($) { var options = { $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, $ChanceToShow: 2 } }; var jssor_slider1 = new $JssorSlider$('slider1_container', options); }); </script> <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"><!-- Slides Container --> <div style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;" u="slides"> <div><img src="includes/templates/winchester_black/images/image1.jpg" u="image" /> <img src="includes/templates/winchester_black/images/thumb_image1.jpg" u="thumb" /></div> <div><img src="includes/templates/winchester_black/images/image2.jpg" u="image" /> <img src="includes/templates/winchester_black/images/thumb_image2.jpg" u="thumb" /></div> </div> <!-- Thumbnail Navigator Skin Begin -->... <!-- thumbnail navigator container --> <div class="jssort01" style="width: 800px; height: 100px; left:0px; bottom: 0px;" u="thumbnavigator"><!-- Thumbnail Item Skin Begin --> <div style="cursor: move;" u="slides"> <div class="p" u="prototype"> <div class="w"> <div class="t" u="thumbnailtemplate"> </div> </div> <div class="c"> </div> </div> </div> <!-- Thumbnail Item Skin End --></div> <!-- Thumbnail Navigator Skin End --></div>
Can anyone point out what I have done wrong? Or does anyone know any easier way to show over 100 images in a gallery with slider thumbnails?
Thank you in advance.


Reply With Quote
