» »

jQuery галерея изображений slideJS для uCoz


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 стилями и настроить дизайн под свой сайт и свои запросы.
15.10.2015 Загрузок: 5 Просмотров: 557 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Kvint
Kvint 15.10.2015 17:171
0
Для магазина онлайн, это будет отличное решение.
Canon
Canon 15.10.2015 17:212
0
А что тут думать, для него и создано.
ZruBkul
ZruBkul 15.10.2015 17:253
0
Здесь мне больше кеды нравятся, шутка. Чисто товарный вид или полочка.
AnTron
AnTron 15.10.2015 17:334
0
Много мнений и все на одну тему, что только магазин онлайн подойдет. Можно же включить фантазию и что то придумать свое и не товар разместить, а к примеру свои фото, почему бы так не сделать, да что там, магазин только.)
Canon
Canon 15.10.2015 17:395
0
AnTron, вы еще бы сказали, что под семейное фото будет как раз.
Kvint
Kvint 15.10.2015 17:426
0
AnTron, а вы на сайте, сделайте страницу пользователей и под такой эффект, думаю пару плюсов отхватите.
Kosten
Kosten 15.10.2015 17:447
0
Но а что, креативно будет, все мигать и крутиться, первые взгляды безусловно ваши будут.
Сопрано
Сопрано 15.10.2015 21:078
0
А что мало магазинов на uCoz, думаю пригодиться и это видно, что не системный был а адаптирован.
Kosten
Kosten 15.10.2015 21:179
0
Мне напомнила одна игра, это обитель зла, там также в магазин заходишь и все в мелком и при клике они появляются.
Brung
Brung 16.10.2015 20:0710
0
Скоро весь интернет магазин можно будет собрать на сайте, и это прекрасно.
avatar