UCOZ
МЕНЮ UCOZ
ФАЙЛЫ
ШАБЛОНЫ
СКРИПТЫ
ПОЛЕЗНОЕ
ДЛЯ ФОТОШОПА
НОВОСТИ
СТАТЬИ
ФОРУМ
RSS
ПОИСК
КОНТАКТЫ
ВХОД
РЕГИСТРАЦИЯ
КАРТА САЙТА
КАРТА ФОРУМА
СЧЕТЧИК
ФОРУМ UCOZ
  • Страница 1 из 1
  • 1
Форум UCOZ » Все Для Ucoz'a » Ucoz Скрипты » Фотоальбом » Оригинальная галерея изображений на jQuery
Оригинальная галерея изображений на jQuery
_CrySiS_ Дата: Суббота, 14.05.2011, 12:53 | Сообщение # 1


== Основатель ==
За создание сайта Проверенный За 50 Сообщений За 500 Сообщений За 1000 Сообщений За 2000 Сообщений За 5000 Сообщений
.
Установка:

После /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/downloa....ar.html


Форум UCOZ » Все Для Ucoz'a » Ucoz Скрипты » Фотоальбом » Оригинальная галерея изображений на jQuery
  • Страница 1 из 1
  • 1
Поиск: