Главная » Файлы » Все Для 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 | |
Просмотров: 338 | Загрузок: 0 | Рейтинг: 1.0/2 |
Всего комментариев: 0 | |