Приветствую Вас, Гость
Главная » Файлы » Все Для Ucoz » Скрипты Для ucoz

Фотогалерия на JQ + демо
26.03.2011, 09:09
Очень интересно выполенный плагин галереи изображений

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

Установка:

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

<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:

<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
Категория: Скрипты Для ucoz | Добавил: AK-47 | Теги: скрипты для ucoz, jq, Фотогалерия, Демо, На
Просмотров: 338 | Загрузок: 0 | Рейтинг: 1.0/2
Всего комментариев: 0
Имя *:
Email *:
Код *: