Вы находитесь здесь:Плагины jQuery»liChaos - jQuery Responsive Photo Gallery или адаптивная фотогалерея на jQuery

liChaos - jQuery Responsive Photo Gallery или адаптивная фотогалерея на jQuery

Среда, 02 Январь 2013 02:13 Автор 

Плагин liChaos создает уникальную фотогалерею в виде хаотично разбросанных фотографий. Просмотр галереи сопровождается музыкальными композициями с помощью HTML5 тнхнологии.
Хаотический внешний вид генерируется каждый раз при обновлении страницы, таким образом галерея всегда будет выглядеть оригинально.

Живой пример

Подключаем стили

<link rel="stylesheet" href="/css/lichaos.css">

Подключаем скрипты

<script src="/js/jquery-1.8.min.js"></script>
<script src="/js/jquery.easie.js"></script>
<script src="/js/jQueryRotate.3.1.js"></script>
<script src="/js/jquery.scrollTo.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>
<script src="/js/jquery.liChaos.js"></script>
<script src="/js/jquery.jplayer.min.js"></script>
<script src="/js/jplayer.playlist.min.js"></script>

Инициализация плагина

<script>
$(window).load(function(){
    $('.anyClass').liChaos({
      column:'auto',    //кол-во колонок в сетке фотографий ('auto' или любое целое положительное число)
      scatter:2,        //кол-во разбросанных фоновых фотографий (любое целое положительное число)
      duration:8000,    //задержка при автоматической прокрутке фотографий (милимекунды)
      scrollTime:3000,  //время анимации смены фотографии (милимекунды)
      autoplay:false    //активация режима "слайдшоу" после загрузки
    });
  })
</script>

Инициализация аудио плеера и проигрываемых композиций

В качестве плеера используется jplayer

<script>
  var myPlaylist = new jPlayerPlaylist({
      jPlayer: "#jquery_jplayer_1",
      cssSelectorAncestor: "#jp_container_1"
    }, [
      {mp3:"mp3/1.mp3",oga:"mp3/1.ogg"},
      {mp3:"mp3/2.mp3",oga:"mp3/2.ogg"},
    ], {
      repeat: function(event) {
        if(event.jPlayer.options.loop) {
          $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
          $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
            $(this).jPlayer("play");
          });
        }
      },
      loop:true,
      swfPath: "js",
      supplied: "oga, mp3",
      wmode: "window"
    });
    myPlaylist.option("autoPlay", true);
</script>

Структура HTML

Фотографии выводим списком указав при этом фото, с которого начинать просмотр, классом "active"
Количество фотографий не ограниченно

<ul class="anyClass">
  <li class="active"><img src="/pic/0.jpg"></li>
  <li><img src="/pic/1.jpg"></li>
  <li><img src="/pic/2.jpg"></li>
  <li><img src="/pic/3.jpg"></li>
  <div class="shield"></div>
</ul>

Также необходимо вставить блок с миниатюрами, и остальной навигацией

<div class="controlWrap">
      <div class="progressWrap"></div>
      <div class="jpPos">
          <div id="jquery_jplayer_1" class="jp-jplayer"></div>
          <div id="jp_container_1" class="jp-audio">
              <div class="jp-type-playlist">
                  <div class="jp-gui jp-interface">
                      <ul class="jp-controls">
                          <li><a title="MUSIC OFF" alt="MUSIC OFF" href="javascript:;" class="jp-play" tabindex="1"></a></li>
                          <li><a title="MUSIC ON" alt="MUSIC ON" href="javascript:;" class="jp-pause" tabindex="1"></a></li>
                      </ul>
                  </div>
                  <div class="jp-playlist">
                      <ul></ul>
                  </div>
                  <div class="jp-no-solution">
                      <span>Update Required</span>
                      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                  </div>
              </div>
          </div>
      </div>
      <a href="#" class="play" title="AUTOPLAY" alt="AUTOPLAY"></a>
      <div class="progressTime"></div>
  </div>

Чтобы небыло заметно недогруженных фото и процесса генерации галереи вставьте еще и этот html код.

<div class="over">
    <div class="overContent">
        
        <!-- 
        Здесь может быть любой приветственный контент, 
        который исчезнет сразу после загрузки всех фото 
        -->
        
    </div>
</div>
Прочитано 8675 раз Последнее изменение Воскресенье, 30 Март 2014 23:39
Оцените материал
(3 голосов)

Комментарии   

 
# Liebenswert 04.05.2013 22:30
пишет, что файл удален, возможно ли обновить ссылку на скачивание?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 13.05.2013 05:57
Спасибо что обратили внимание.
Ссылка обновлена http://masscode.ru/files/zip/liChaos.zip
Ответить | Ответить с цитатой | Цитировать
 
 
# Chikk 19.07.2013 13:02
Прелестно. Аффтору - зачёт без вариантов. Допилить чуть визуальность и очень торт. А музыку - её вообще трогать нельзя, музыка - это пять! Очень.
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 20.07.2013 10:21
Цитирую Chikk:
Прелестно. Аффтору - зачёт без вариантов. Допилить чуть визуальность и очень торт. А музыку - её вообще трогать нельзя, музыка - это пять! Очень.

Спасибо за торт :)
Ответить | Ответить с цитатой | Цитировать
 
 
# alex 13.07.2014 12:12
Замечательный слайдер фотографий! Один вопросик, как подстроить скрипт так, что-бы фото в фокусе показывалось без накладок других фото сверху, целиком?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 20.07.2014 09:04
Цитирую alex:
Замечательный слайдер фотографий! Один вопросик, как подстроить скрипт так, что-бы фото в фокусе показывалось без накладок других фото сверху, целиком?

Параметр:
scatter:0
Ответить | Ответить с цитатой | Цитировать
 
 
# mr.nemo 27.01.2015 20:32
Как эту галерею в блок определенного размера вписать, скажем 800х600? Не фреймом.
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

Защитный код
Обновить

Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="http://masscode.ru" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliChaos - jQuery Responsive Photo Gallery или адаптивная фотогалерея на jQuery