jQuery галерея изображений slideJS для uCoz
 | |
| Чисто для магазин онлайн сделана галерея товаров, где можно увидеть как все отлично создано. А это один товар можно посмотреть со всех ракурсов, как в реальности, что не мало важно. Доброе время суток друзья! Сегодня я вам хочу предоставить jQuery галерею для изображений которая работает на плагине «slideJS». Данное решение можно применять где вам больше всего захочется, но думаю самое лучшая его реализация это для сайтов магазинов где предоставляются картинки к товару. Галерея хорошо будет служить вам она может выводить маленькие изображения с права и пролистать с лева большие изображения. И так давайте перейдем к установки данного скрипта, что бы он уже сейчас стал радовать вас и ваших посетителей сайта. javascript В первую очередь вам нужно установить в верхнюю или нижнюю часть сайта javascript для работы переключения изображений, но ели у вас нет на сайте верхнего или нижнего контейнера то вам следует прописать в дизайне страниц где будет стоять данный скрипт перед тегом /body. Код <script src="/js/slides.min.jquery.js"></script> <script> $(function(){ $('#products').slides({ preload: true, preloadImage: '/img/loading.gif', effect: 'slide, fade', crossfade: true, slideSpeed: 200, fadeSpeed: 500, generateNextPrev: true, generatePagination: false }); }); </script> HTML Теперь установите HTML код скрипта по месту где он будет у вас стоять и работать на пользу сайту. Код <div id="products_example"> <div id="products"> <div class="slides_container"> <a href="/" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a> <a href="/" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a> <a href="/" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a> <a href="/" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a> <a href="/" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a> <a href="/" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a> <a href="/" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a> </div> <ul class="pagination"> <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li> <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li> <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li> <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li> <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li> <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li> <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li> </ul> </div> </div> Где указаны адреса картинок там прописываем свои или прописываем код который отвечает у вас за вывод изображения . CSS Теперь вам нужно в стили вашего сайта дописать немного стилей которые будут настраивать дизайн данного скрипта. Код ol,ul { list-style:none; } #products_example { width:600px; height:282px; position:relative; } #products { margin-left:26px; } #products .next,#products .prev { position:absolute; top:127px; left:0; width:21px; height:0; padding-top:21px; overflow:hidden; display:block; z-index:101; } #products .prev { background:url(../img/arrow-prev.png); } #products .next { left:398px; background:url(../img/arrow-next.png); } #products .slides_container { width:366px; height:274px; overflow:hidden; float:left; position:relative; border:1px solid #dfdfdf; } #products .pagination { background:#dfdfdf; width:130px; padding:5px 5px; float:left; margin-left:30px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #products .pagination li { float:left; margin:2px 4px; } #products .pagination li a { display:block; width:55px; height:41px; margin:1px; float:left; background:#f9f9f9; } #products .pagination li.current a { border:1px solid #7f7f7f; margin:0; } #footer { clear:both; text-align:center; width:580px; margin-top:9px; padding:4.5px 0 18px; border-top:1px solid #dfdfdf; } #footer p { margin:4.5px 0; font-size:1.0em; } a:link,a:visited { color:#599100; text-decoration:none; } a:hover,a:active { color:#599100; text-decoration:underline; } Файловый менеджер Для загрузки дополнительных скриптов и изображений которые будут помогать в работе данного материала вам нужно скачать архив с файлами и загрузить в файловый менеджер вашего сайта две папки . Папку img которая содержит изображения и папку js которая содержит скрипты. После всей установки вы сможете спокойно настраивать дизайн данного скрипта с помощью css стилями и настроить дизайн под свой сайт и свои запросы.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
| 1 2 » | |
