Поиск:
  • Страница 1 из 1
  • 1
Оригинальная галерея изображений на jQuery
Дата: Среда, 30.03.2011, 12:46 | Сообщение # 1
Offline
  • Проверенный
  • Ранг: Подполковник
  • 116 Сообщения
Вот скриншот: http://www.forucoz.com/_ph/1/2/43394903.png
Очень интересно выполенный плагин галереи изображений

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

Установка:

После /head на нужных страницах вставляйте:

Code

<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>     
<script type="text/javascript" src="/js/gallery.js"></script>     
<link href="/css/style.css" rel="stylesheet" />     
<link href='/css/multi-line-button.css' rel='stylesheet' />

Следующий код вставляйте в самый низ после тега /body:
Code

<p id="click">     
     <a class='multi-line-button red' href='#' style='width:10em'>     
     <span class='titles'>Открыть галерею</span>     
     </a>     
     </p>     
         
     <div id="left_bar">     
         
     <div id="left_boxes">     
     <!-- copy large image name in id of image without extension . We will get this id and show big image -->     
         
     <div class="box"><img src="Ссылка на маленькую картинку" id="3" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="2" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="1" width="100" /></div>     
         
     </div>     
         
     </div>     
         
     <div id="top_bar">     
         
     <div id="top_boxes">     
     <!-- copy large image name in id of image without extension . We will get this id and show big image -->     
     <div class="box"><img src="Ссылка на маленькую картинку" id="4" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="5" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="6" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="7" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="8" width="100" /></div>     
     </div>     
         
     </div>     
         
     <div id="right_bar">     
         
     <div id="right_boxes">     
     <!-- copy large image name in id of image without extension . We will get this id and show big image -->     
     <div class="box"><img src="Ссылка на маленькую картинку" id="9" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="10" width="100" /></div>     
     <div class="box"><img src="Ссылка на маленькую картинку" id="11" width="100" /></div>     
     </div>     
         
     </div>     
         
     <!-- Image Holder Main -->     
     <div id="imagePlacer">     
         
     <span>     
     <!-- use image name as id of image without extension -->     
     <img src="Ссылка на большую картинку" width="606" height="413" id="1b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="2b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="3b" />     
         
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="4b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="5b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="6b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="7b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="8b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="9b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="10b" />     
     <img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="11b" />     
     </span>     
         
     <!-- images captions -->     
     <div id="captions">     
         
     <span id="caption-1b">     
     Описание для картинки     
     </span>     
     <span id="caption-2b">     
     Описание для картинки     
     </span>     
     <span id="caption-3b">     
     Описание для картинки     
     </span>     
     <span id="caption-4b">     
     Описание для картинки     
     </span>     
     <span id="caption-5b">     
     Описание для картинки     
     </span>     
     <span id="caption-6b">     
     Описание для картинки     
     </span>     
     <span id="caption-7b">     
     Описание для картинки     
     </span>     
     <span id="caption-8b">     
     Описание для картинки     
     </span>     
     <span id="caption-9b">     
     Описание для картинки     
     </span>     
     <span id="caption-10b">     
     Описание для картинки     
     </span>     
     <span id="caption-11b">     
     Описание для картинки     
     </span>     
         
     </div>     
         
     </div>     
         
     <div id="controls">     
     <!-- Click to hide gallery -->     
     <img src="/images/close.png" id="hide" title="Close" />     
     <!-- Play Pause AutoRotate Images -->     
     <img src="/images/pause.png" id="pause" title="Pause" width="30" />     
     <img src="/images/play.png" id="play" title="Play" width="30" />     
     </div>

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

Качаем:
http://letitbit.net/download/16843.16c46d84c27e8d547f811dbfcab6/1856_t1e.rar.html


Дата: Среда, 30.03.2011, 16:58 | Сообщение # 2
Offline
  • Проверенный
  • n1ckman ™
  • 1272 Сообщения
Скрин:
Дата: Пятница, 15.04.2011, 22:59 | Сообщение # 3 Данный пользователь заблокирован, возможно он мошенник!
Offline
  • Забаненный
  • Ранг: Лейтенант
  • 65 Сообщения
Прикольно!!!
Я маленький школьник
Дата: Пятница, 15.04.2011, 23:41 | Сообщение # 4
Offline
  • Проверенный
  • Ранг: Подполковник
  • 101 Сообщения
Хороший скрипт! Спасиб.
  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2024 Сайт управляется системой uCoz.