Мини-галерея изображений через плагин Thumbnails Preview Slider на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<link rel="stylesheet" type="text/css" href="/css/thumbnail_slider.css" /> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script src="/js/body.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //demo1 $('#demo1').thumbnailSlider(); //demo2 $('#demo2').thumbnailSlider({ thumb_width : 130, thumb_height: 87, easing : 'easeOutExpo',//easeInBack speed : 600 }); //demo3 $('#demo3').thumbnailSlider({ thumb_width : 174, thumb_height: 260, speed : 200 }); //demo4 $('#demo4').thumbnailSlider({ thumb_width : 174, thumb_height: 260, speed : 200, zoom : true, zoomspeed : 10000, zoomratio : 1.7 }); }); </script> |
2#: Следующий код в то место, где будет мини-галерея:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="demo3" class="demo"> <ul class="ts_container"> <li><a href="#">Image 1</a></li> <li><a href="#">Image 2</a></li> <li><a href="#">Image 3</a></li> <li><a href="#">Image 4</a></li> <li class="ts_thumbnails"> <!-- animate to slide frame --> <div class="ts_preview_wrapper"> <ul class="ts_preview"><!-- animate left to slide to the right thumb --> <li><img src="Ссылка на картинку" alt="Thumb 1" /></li> <li><img src="Ссылка на картинку" alt="Thumb 2" /></li> <li><img src="Ссылка на картинку" alt="Thumb 3"/></li> <li><img src="Ссылка на картинку" alt="Thumb 4" /></li> </ul> </div> <span></span> </li> </ul> </div> |
