Главная » Файлы » Прочие скрипты » jQuery

Оригинальная галерея через плагин jswitch на jQuery
23.06.14, 14:43:50

Скачать файл




Неплохая галерея с интересным эффектом смены изображений. Есть небольшой минус - неопытные пользователи, плохо разбирающиеся в css навряд ли смогут адаптировать под свои нужды

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.jswitch.js"></script>  
  <script>  
  $(document).ready(function(){
  $('#myGallery').jswitch({  
  callback:function(jswitch){
  $('#next').click(function(){  
  jswitch.nextImage();
  });  
  $('#prev').click(function(){  
  jswitch.prevImage();
  });  
  }
  });  
  });  
  </script>  

  <style>  
  #myGallery{border:4px solid #eee;width:940px;height:360px;overflow:hidden;position:relative;padding:0;margin:0;background:#000;margin:20px;}  
  .controls{text-indent:-10000px;background:url(/images/controls.png) no-repeat;width:30px;height:56px;display:block;position:absolute;}  
  .controls#prev{margin-top:160px;margin-left:-10px;}
  .controls#next{background-position:-30px 0;margin-top:-230px;margin-left:970px;}
  </style>


Следующий код в то место, где будет сама галерея:
Код
<a href="#" class="controls" id="prev"> Prev image</a>  

  <div id="myGallery">
  <ul>  
  <li><img src="Ссылка на картинку" alt="" /></li>  
  <li><img src="Ссылка на картинку" alt="" /></li>  
  <li><img src="Ссылка на картинку" alt="" /></li>  
  <li><img src="Ссылка на картинку" alt="" /></li>  
  <li><img src="Ссылка на картинку" alt="" /></li>  
  </ul>  
  </div>  

  <a href="#" class="controls" id="next">Next image</a>


Осталось лишь залить скрипт из прикреплённого архива в папку js и картинку в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: галерея, Через, на, плагин, JQuery, Оригинальная, jswitch
Просмотров: 1186 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: