Галерея iLoaD на HTML-станице

автор Ср 4 Янв - 23:08

Код:: <meta content="text/html; charset=utf-8" http-equiv="Content-type" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><link rel="shortcut icon" href="http://www.patmax.eu/C1/110731112220.ico" type="image/vnd.microsoft.icon" /> <div style="position:absolute;right:8%;top:10px;"> <a href="/" class="dom">Вернуться на форум</a> </div> <style> .dom{ color : #A61F00 !important; font-weight: bold; font-size: 17px; } .dom:hover{ color : #ff0000 !important; } </style>  <div style="position:absolute;left:8%; top:10px;"> <a href="javscript://" class="informLink">Как пользоваться альбомом? Инструкция.</a> <div class="informCont"> <span style="color:#FF0000;font-size:18px;"><strong><span style="text-decoration: underline;">Не большая инструкция по пользованию фотогалереей.</span></strong></span><br /><br />Для просмотра фотографий предусмотрено три варианта.<br />1. В режиме слайдшоу.<br />2. В режиме перелистывания фотографий вручную.<br />3. Выборочный просмотр выбранной фотографии.<br /><br />Для начала просмотра всего альбома кликните мышкой на первую фотографию.<br />Для просмотра определённой фотографии кликните мышкой именно на ту которую хотите посмотреть.<br />При клике фотография откроется в полный размер и под ней появится блок управления галереей<br />На изображении показаны кнопки блока управления и описание их функций.<br /><br /> <img src="http://i40.servimg.com/u/f40/14/80/95/87/2012-112.jpg" /> </div> </div> <style> .informLink{ color : #A61F00; font-weight: bold; font-size: 17px; } .informLink:hover{ color : #ff0000; } .informCont{ display:none; border: solid 4px #AF815B; -moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius:6px; padding:5px; margin-top: 15px; background-color:#fff; height: auto; width: 600px; } .foto{ border: solid 2px #D4894A; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius:4px; padding:1px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('.informLink').click(function(){ $(this).parent().children('div.informCont').slideToggle(900); return false; }); }); </script> <center> <span style="color:#7E3B21;font-family:Times New Roman;font-size:28px;"><strong><em>Фотоальбом</em></strong></span><br /><span style="color:#FF0000;font-family:Times New Roman;font-size:14px;"><span style="text-decoration: underline;">Для просмотра слайдшоу кликни по картинке</span></span><br /><br /> <div style="overflow: scroll; overflow-x: hidden; height: 600px; width: 56%; border: solid 4px #FADBBC;-moz-border-radius: 8px;-khtml-border-radius: 8px;-webkit-border-radius: 8px; border-radius:8px; -webkit-box-shadow: 0px 0px 10px 3px #FADBBC;-moz-box-shadow: 0px 0px 10px 3px #FADBBC;box-shadow: 0px 0px 10px 3px #FADBBC; padding:5px; background: url(http://i40.servimg.com/u/f40/14/80/95/87/fxf10.jpg);"> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27610.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27313.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27311.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27314.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27312.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27310.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zhivot22.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zhivot23.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zhivot21.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="http://www.bugaga.ru/uploads/posts/2010-12/1293289431_animal28.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27512.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img "="" src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27515.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27519.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27516.jpg" class="foto" style="width: 93px; height: 140px;" /></a> <a href="https://i37.servimg.com/u/f37/19/34/71/86/zoo27518.jpg" rel="iLoad|Фотоальбом" title="описание фото"><img src="https://i37.servimg.com/u/f37/19/34/71/86/zoo27517.jpg" class="foto" style="width: 93px; height: 140px;" /></a> </div> </center>  <script src="http://studioad.ru/iload/iLoad.js" type="text/javascript"></script> <style> body { background:url(http://www.snapsnap.ru/i/pred03.jpg)repeat-y top left fixed; } </style>

ДЕМО

автор Ср 4 Янв - 23:46

Ссылки на картинки в коде указаны без правил. На самом деле ссылка на одну картинку должна выглядеть так :

Код:: <a href="https://ссылка1.jpg" rel="iLoad|Фотоальбом" title="описание фото"> <img src="https:/ссылка1.jpg" class="foto" style="width: 93px; height: 140px;" /></a>

То есть, в коде ссылку на одну картинку нужно повторить дважды.
Далее..

Код:: "iLoad|Фотоальбом"

iLoad| - оставить, как есть.
Фотоальбом - при желании можно переименовать. Тогда скрипт будет отдельно воспроизводить картинки из разных альбомов.
Вот поэтому в демонстрации отображаются не все картинки в превью.
Параметры высоты и ширины не критичны в коде, но рациональнее было бы группировать изображения по размерам и пропорциям. Обязательно, чтобы в одном альбоме эти параметры не менять.

URL:
BBCode:
HTML:

Галерея iLoaD на HTML-станице

Re: Галерея iLoaD на HTML-станице