- Поиск на Youtube Быстрый поиск видео на Youtube.
- Фоторедактор Здесь вы можете отредактировать свои изображения перед размещением их на фотохостинге. Многофункциональный онлайн-инструментарий.
- iPleer.fm Здесь вы можете найти практически любую песню.
- Гид по сайту Тема о новых опциях на сайте с инструкциями и иллюстрациями.
- Наша беседка В этой теме можете задать любой интересующий вопрос относительно сайта и не только.
- Техподдержка В этом разделе Вы можете создать тему технического характера, связанных с компьютерами, телефонами и интернетом.
Последние темы
Любимые темы
Загрузка избранного...
Страница 1 из 1 • Поделиться
Галерея iLoaD на HTML-станице
- Код:
<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>
Феникс- Администратор
Посты : 1598
Очки : 6368
Возраст : 52
Откуда : Россошь
Re: Галерея iLoaD на HTML-станице
Ссылки на картинки в коде указаны без правил. На самом деле ссылка на одну картинку должна выглядеть так :
То есть, в коде ссылку на одну картинку нужно повторить дважды.
Далее..
Фотоальбом - при желании можно переименовать. Тогда скрипт будет отдельно воспроизводить картинки из разных альбомов.
Вот поэтому в демонстрации отображаются не все картинки в превью.
Параметры высоты и ширины не критичны в коде, но рациональнее было бы группировать изображения по размерам и пропорциям. Обязательно, чтобы в одном альбоме эти параметры не менять.
- Код:
<a href="https://ссылка1.jpg" rel="iLoad|Фотоальбом" title="описание фото">
<img src="https:/ссылка1.jpg" class="foto" style="width: 93px; height: 140px;" /></a>
То есть, в коде ссылку на одну картинку нужно повторить дважды.
Далее..
- Код:
"iLoad|Фотоальбом"
Фотоальбом - при желании можно переименовать. Тогда скрипт будет отдельно воспроизводить картинки из разных альбомов.
Вот поэтому в демонстрации отображаются не все картинки в превью.
Параметры высоты и ширины не критичны в коде, но рациональнее было бы группировать изображения по размерам и пропорциям. Обязательно, чтобы в одном альбоме эти параметры не менять.
Феникс- Администратор
Посты : 1598
Очки : 6368
Возраст : 52
Откуда : Россошь
Похожие темы
» 3D галерея на HTML-странице
» Рабочий скрипт iLoad
» Галерея "В мире интересного"
» [Туториал] Поиск по YouTube на html-странице
» Рабочий скрипт iLoad
» Галерея "В мире интересного"
» [Туториал] Поиск по YouTube на html-странице
Страница 1 из 1
URL: | |
BBCode: | |
HTML: |
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Вт 29 Мар - 7:21 автор Nataliya
» Шаман......
Вт 29 Мар - 7:19 автор Nataliya
» [Салаты] Пять ошибок при приготовлении оливье
Ср 26 Янв - 13:20 автор Scheila
» Наша Беседка.. :)
Сб 18 Дек - 13:17 автор Феникс
» Супы из рыбы и морепродуктов
Вт 14 Дек - 22:26 автор Scheila
» Другие закуски
Вт 14 Дек - 22:25 автор Scheila
» Теперь мы есть в Telegram
Чт 26 Авг - 7:59 автор Феникс
» мои клипы.
Ср 4 Авг - 20:55 автор Nataliya
» МОМЕНТЫ ЖИЗНИ
Ср 4 Авг - 20:44 автор Nataliya