Вы находитесь здесь:Плагины 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>
Прочитано 16379 раз Последнее изменение Пятница, 27 Октябрь 2017 12:49
Оцените материал
(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? Не фреймом.
Ответить | Ответить с цитатой | Цитировать
 
 
# Justinstums 25.07.2019 11:12
покупка акция газпром физическому
покупка акция магнит
Андрей Черных отзывы


покупка акция газпром физическому: https://moneyconsulting.ru/blog/exclusive-vip-coaching-ot-andreya-chernyih-proektyi-passivnyiy-dohod-ot-200-000-dollarov-v-god-i-1-000-000-dollarov-na-partnerskoy-programme-andreya-chernyih/
пассивный доход: https://moneyconsulting.ru/blog/exclusive-vip-coaching-ot-andreya-chernyih-proektyi-passivnyiy-dohod-ot-200-000-dollarov-v-god-i-1-000-000-dollarov-na-partnerskoy-programme-andreya-chernyih/
Ответить | Ответить с цитатой | Цитировать
 
 
# VincentSog 25.07.2019 20:36
Разблокировка счетов юридических лиц по 115 ФЗ
Разблокировка счетов юридических лиц по 115 ФЗ: https://blokirovke-scheta.net/
Ответить | Ответить с цитатой | Цитировать
 
 
# ThomasDah 27.07.2019 06:08
адвокаты в днепропетровске , ипотека запорожье, адвокати в дніпропетровськ у, юрист по защите прав потребителя в запорожье

адвокат по европейскому суду: https://list.in.ua/адвокатские-компании/184387/адвокаты-днепропетровска-днепрюрист по жилищным делам в запорожье: https://besplatka.ua/obyavlenie/advokat-dnepr--dnepropetrovsk--konsultaciya-78b42bуголовный процессуальный кодекс: http://dnepropetrovsk.spravker.ru/advokaty/
Ответить | Ответить с цитатой | Цитировать
 
 
# Brianneita 27.07.2019 14:32
Здравствуйте уважаемые форумчане, предлагаю вам
мульт-пародии Звёздные войны: http://starwars-movie.org/serialy/mult-parodii/ посмотреть в отличном качестве, напишите понравилось ли вам? Спасибо
Ответить | Ответить с цитатой | Цитировать
 
 
# Duanedaree 29.07.2019 02:23
теплые полы теплолюкс
теплолюкс астана
теплолюкс астана

теплолюкс казахстан: https://www.teploluxe.ru
теплые полы астана: https://www.teploluxe.ru
теплые полы электрические астана: https://www.teploluxe.ru
установка теплых полов астана: https://www.teploluxe.ru
Ответить | Ответить с цитатой | Цитировать
 
 
# Alexeybek 30.07.2019 14:11
Ваш ребенок не может уснуть? Уже все перепробовали?П рочитайте ему сказку с нашего сайта.
Большой выбор народных и авторских сказок для всех возрастов.Перех одите по ссылке:
http://skazochki-detyam.ru
Ответить | Ответить с цитатой | Цитировать
 
 
# PeterJes 31.07.2019 08:24
автономка планар

Планар: https://teplostar163.ru/
Ответить | Ответить с цитатой | Цитировать
 
 
# PatrickDiumb 31.07.2019 12:00
Продаём курьером в Вашем городе:
Шишки, скорость, фен, трава, пробы, соль,
Миксы, ароро миксы
Пиши и через час привезём или закладки.

Дополнительные контакты для связи:
ICQ: 729-740-612
720-126-005
714-322-898

jabber:



WhatsApp или Viber:
79139394194
79538601127
79506647126
Голограмма
Ответить | Ответить с цитатой | Цитировать
 
 
# OliverDus 03.08.2019 04:25
Стремительно и безопасно худеете без тяжелых тренировок
Не нужно менять привычный образ жизни
Не нужно отказываться от любимых блюд
Препарат не меняет гормональный фон
Потерянный вес не возвращается
100 % натуральный состав
Уже похудели около 200 000 человек ---> http://c.twnt.ru/uUhS
Ответить | Ответить с цитатой | Цитировать
 
 
# RaymondApent 03.08.2019 11:34
теплые полы теплолюкс
теплые полы астана цены
теплые полы астана манаса

теплые полы на манаса: http://www.teploluxe.kz
инфракрасные теплые полы астана: http://www.teploluxe.kz
установка теплых полов астана: http://www.teploluxe.kz
теплые полы на манаса: http://www.teploluxe.kz
Ответить | Ответить с цитатой | Цитировать
 
 
# FrancisBleat 03.08.2019 21:53
Micro-Motion Серия F-200: https://ozery.neftel.ru/rashodomer-micro-motion
Ответить | Ответить с цитатой | Цитировать
 
 
# BillyGipse 04.08.2019 09:30
гидра сайт: https://hydra-2019.net - hydra магазин, гидра
Ответить | Ответить с цитатой | Цитировать
 
 
# DennisFaw 04.08.2019 17:06
купить документы из автошколы: https://shadowgold.me/index.php?/topic/11147-kupit-prava-kupit-voditelskoe-udostoveren/ - удостоверение участника боевых действий цена, удостоверение участника боевых действий цена
Ответить | Ответить с цитатой | Цитировать
 
 
# WayneWeara 04.08.2019 18:59
гидра: https://hydraonion-2019.com - Hydra onion, hydra вход
Ответить | Ответить с цитатой | Цитировать
 
 
# Alexeybek 04.08.2019 23:33
Вашему вниманию предлагается платформа для оказания фриланс услуг - Kwork.За смешные деньги можно заказать услугу из любой интернет-деятел ьности и не только.
https://www.youtube.com/watch?v=-kn1Iae27gk&t=24s
Ответить | Ответить с цитатой | Цитировать
 
 
# TimothyZom 05.08.2019 09:47
райский веб ресурс https://onion-rp.com/karta-sajta/
Ответить | Ответить с цитатой | Цитировать
 
 
# Brucewesty 05.08.2019 14:27
hydra отзывы: https://onioncatalog.com/ - hydra отзывы, тор гидра
Ответить | Ответить с цитатой | Цитировать
 
 
# AnthonyImate 05.08.2019 19:22
hydra зеркала: https://hydraru-19.com/ - hydra onion, гидра зеркало
Ответить | Ответить с цитатой | Цитировать
 
 
# Charlesslota 05.08.2019 19:52
кардинг работа дропом: https://forum-biz.com/ - обнал 2019, купить паспорт
Ответить | Ответить с цитатой | Цитировать
 
 
# HenryFrusa 05.08.2019 22:39
тор гидра: https://hydra-catalog19.com/ - гидра сайт, тор гидра
Ответить | Ответить с цитатой | Цитировать
 
 
# Charleshok 07.08.2019 14:08
После взлома аккаунта вк моего приятеля, я смог узнать, что он решил подставить меня. Совсем недавно мы ходили отдыхать дружно с товарищами, в конце дня один из наших приятелей заявил нам, что у него исчезла цепь. Ее везде и всюду смотрели и начали размышлять о том, что она украдена. Мой наилучший товарищ и его приятель моментально стали приводить все факты против меня, и я не смог уверить их в обратном. Но эти факты не являлись истиной, поэтому я сразу же сообразил, что что-то тут неладное. Мне посоветовали одного взломщика, для того, чтобы он помог мне с этим вопросом разобраться. После взлома я выяснил, что дорогую цепочку украл тот самый товарищ и чтоб свести подозрения с себя все скинул на меня. Спасибо большое этому взломщику, он освободил меня не только от большущего долга, но и еще от побоев. Его услуги можно заказать тут - https://xakerpro.ru/topic/282/page-10
Ответить | Ответить с цитатой | Цитировать
 
 
# HenryChurf 07.08.2019 14:40
форсунка на ПАЗ: https://xn--24-vlchofoisg.xn--p1ai/ - Форсунка 095000-5342, 5283275
Ответить | Ответить с цитатой | Цитировать
 
 
# Jessienab 08.08.2019 05:22
hydra закладки: https://hydraonion2019.net - Hydra зеркала, Гидра вход
Ответить | Ответить с цитатой | Цитировать
 
 
# HaroldBem 08.08.2019 12:59
гидра com: https://hydra20onion.com - Hydra отзывы, hydra
Ответить | Ответить с цитатой | Цитировать
 
 
# StevenRuink 08.08.2019 15:04
Зеркало гидра: https://shop2hydra.com - hydra закладки, hydra 2019
Ответить | Ответить с цитатой | Цитировать
 
 
# Georgedox 08.08.2019 19:09
гидра браузер: https://hydrazerkalo2019.net - гидра интернет магазин, гидра
Ответить | Ответить с цитатой | Цитировать
 
 
# Stevenmub 08.08.2019 20:55
ссылка hydra: https://hydra2019ru.com - Как зайти на hydra, гидра
Ответить | Ответить с цитатой | Цитировать
 
 
# Josephcip 09.08.2019 04:20
Авиабилеты Посо - Москва: http://xn--n1aabj.xn----7sbafcvrd1a5e1e.xn--80adxhks - Авиабилеты Лаппеенранта - Москва, Авиабилеты Канпур - Москва
Ответить | Ответить с цитатой | Цитировать
 
 
# BruceMap 09.08.2019 21:58
Сперма вытекает: http://trahotun.com/sperma-vyitekaet/ - Порно видео бесплатно, Сперма в дырке
Ответить | Ответить с цитатой | Цитировать
 
 
# Arthurked 10.08.2019 06:08
первоклассный веб сайт https://nkgarant.ru/services/sdacha-imushhestva-v-arendu/
Ответить | Ответить с цитатой | Цитировать
 
 
# BrandonAbady 10.08.2019 20:52
найти человека по номеру телефона Украина: https://izmena.today/ - найти человека по номеру телефона Одесса, Проверка мужа на измену Харьков
Ответить | Ответить с цитатой | Цитировать
 
 
# Stevenerymn 10.08.2019 23:33
стоящий веб сайт
написание программ на заказ, написание сетевых программ на заказ, заказать программу, изготовление сетевых программ на заказ, написание программ по востановлению парольной информации: https://xaker26.net/2018/12/10/spamer-script-from-redpro/
Ответить | Ответить с цитатой | Цитировать
 
 
# Raymondcew 11.08.2019 13:16
Особливості організації і життєдіяльності багатоклітинних організмів: https://predmety.in.ua/osoblivosti-organizaciyi-ta-zhittyediyalnosti-odnoklitinnix-eukariotiv-kolonialni-organizmi/ - Словотвірний розбір слова, Речення з вставними словами
Ответить | Ответить с цитатой | Цитировать
 
 
# FrancisBleat 12.08.2019 18:10
расходомер micro motion cmf: https://himki.neftel.ru/rashodomer-micro-motion
Ответить | Ответить с цитатой | Цитировать
 
 
# Alexeybek 12.08.2019 19:40
Предлагаем микрокредитован ие для всех россиян на лучших условиях в интернете !
Нужны деньги,а до зарплаты еще две недели? Обращайтесь в наш кредит-сервис в любое время. Мы поможем !
Микрокредиты до 100 000 руб. и сроком до полугода.
Примем решение о выдаче займа в течении часа !
Переходите на наш сайт и выбирайте нужные вам условия !
http://creditonlinepro.ru
Ответить | Ответить с цитатой | Цитировать
 
 
# GregoryHed 13.08.2019 01:03
ремонт телефонов Lg в бутово: https://www.butovopc.ru/index.php?option=com_content&view=article&id=33&Itemid=40 - ремонт мобильных телефонов в южном бутово, ремонт ноутбуков южное бутово
Ответить | Ответить с цитатой | Цитировать
 
 
# Peterber 13.08.2019 08:47
Закись азота пищевая спб: https://zakisazota-official.com - Баллон закись азота, Закись азота что это
Ответить | Ответить с цитатой | Цитировать
 
 
# Nathanaroff 14.08.2019 21:55
сайт www.legalrc.biz: http://hydraruzxpnew4af.ink - legalrc ice, legal
Ответить | Ответить с цитатой | Цитировать
 
 
# Robertpancy 14.08.2019 23:49
обмен вебмани украина: https://wm.money/exchange_wmu_to_p24uah/ - как вывести ден ьги с вебмани на карту приватбанка 2018, обмен wmr на яндекс деньги без привязки
Ответить | Ответить с цитатой | Цитировать
 
 
# WillieAerot 20.08.2019 14:15
отличный вебсайт hydra: https://hydrarumarket.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Michellmor 22.08.2019 10:12
купить валеши недорого наложенный платеж: http://flirtmarket.ru/
Ответить | Ответить с цитатой | Цитировать
 
 
# Jeffreypup 24.08.2019 06:03
безупречный вебресурс https://softoroom.net/topic86487.html
Ответить | Ответить с цитатой | Цитировать
 
 
# GregorySorce 24.08.2019 22:09
Накрутка в Instagram: https://ouin.ru - Накрутка просмотров YouTube, Накрутка просмотров YouTube
Ответить | Ответить с цитатой | Цитировать
 
 
# CoreyMouro 25.08.2019 23:11
their website
https://awriter.org/bestessaytipscom/: https://awriter.org/bestessaytipscom/ - Gisela V. Hogle, Ambrogino Pisani
Ответить | Ответить с цитатой | Цитировать
 
 
# Виктор 28.08.2019 15:15
Перезвоните мне пожалуйста 8 (962) 685-78-93, для связи со мной нажмите цифру 2, Евгений.
Ответить | Ответить с цитатой | Цитировать
 
 
# larisadot 30.08.2019 10:14
Честно был растерян и ошарашен, когда наткнулся на эту стратегию: http://binary24.tilda.ws/
сейчас уже понимаю, что на самом деле всё просто и не нужно мудрить,
специально решил выложить её бесплатно, у меня WIN по ней 90%!
Ответить | Ответить с цитатой | Цитировать
 
 
# AnnaSuils 02.09.2019 03:52
Быстро и качественно работают, рекомендуем!

элтромбопаг аналоги: https://tongmengpharm.ru/shop/17/desc/elobopa25
Ответить | Ответить с цитатой | Цитировать
 
 
# Charliewhick 02.09.2019 12:34
he said
awriter.org/bid 4paperscom/: https://awriter.org/bid4paperscom/ - Douglas L. McIntire, Marty N. Thom
Ответить | Ответить с цитатой | Цитировать
 
 
# RubenHaf 02.09.2019 21:10
read review
Mary C. Hampton: http://awriter.org/ - Eric A. Holbrook, Herbert E. Sanford
Ответить | Ответить с цитатой | Цитировать
 
 
# Williammairl 03.09.2019 05:11
cisco n9k c93180yc ex: https://stsnw.ru/device/cisco/kommutatory-cisco/cisco-nexus-9000 - коммутаторы серии cisco catalyst 2960 xr, коммутатор cisco ws c2960x 24ps l -цена -catalyst
Ответить | Ответить с цитатой | Цитировать
 
 
# Alexeybek 10.09.2019 04:24
Предлагаем микрокредитован ие для всех россиян на лучших условиях в интернете !
Нужны деньги,а до зарплаты еще две недели? Обращайтесь в наш кредит-сервис в любое время. Мы поможем !
Микрокредиты до 100 000 руб. и сроком до полугода.
Примем решение о выдаче займа в течении часа !
Переходите на наш сайт и выбирайте нужные вам условия !
кредит быстро
Ответить | Ответить с цитатой | Цитировать
 
 
# Charlessceta 11.09.2019 21:43
Я не считаю себя супер инвестором и человеком который прям шарит в инвестициях, у меня было понимание что такое инвестиции, но как оказалось поверхностное. Благодаря компании TRUSTERA я стал больше понимать, что такое инвестиции и как они работают. Я сотрудничаю с компанией уже больше года и приумножил свои деньги в полтора раза. Мне очень нравится, как работает компания.
Ответить | Ответить с цитатой | Цитировать
 
 
# JustinJeots 14.09.2019 16:47
отдых в болгарии: https://aliard.com/countries/bulgaria/ - туры в шри ланку из киева, туры в испанию
Ответить | Ответить с цитатой | Цитировать
 
 
# ScottRoult 15.09.2019 12:00
ребенок с одной почкой: https://popochkam.ru/deti/rebenok-rodilsya-s-odnoj-pochkoj.html - микролиты в почках что это, что такое фосфаты в моче
Ответить | Ответить с цитатой | Цитировать
 
 
# Michaeloxype 16.09.2019 07:18
туберкулез органов дыхания: https://1tuberkulez.ru/vidy/tuberkulez-legkix-u-detej-simptomy.html - туберкулез ранняя стадия, открытая форма туберкулеза
Ответить | Ответить с цитатой | Цитировать
 
 
# JamesHutty 16.09.2019 16:44
Промокод Мвидео: https://ufolabs.net/ - Пробить номер телефона, Раздача баз юса
Ответить | Ответить с цитатой | Цитировать
 
 
# MoisesPrulk 16.09.2019 19:23
фильмы сериалы жанр жанры военные военный: https://hdhc.ru/voenie/ - HD Домашний Кинотеатр - HD Home Cinema : Фильмы, Сериалы, Аниме , Мультфильмы и ТВ-Каналы, Новинки Премьер Трансляции Спортивных Матчей смотреть онлайн каждый день, фильмы сериалы жанр жанры военные военный
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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