Почему я бросил вести этот сайт! Потому, что система ведет себя по-хамски по отношению к посетителям сайта, навязывая последним бесконечное количество баннеров-заглушек контента, особенно пришедшим с мобильных устройств!
Фиксированное окно по центру страницы с помощью js/fancybox
DownLoad_Free

Фиксированное окно по центру страницы с помощью js/fancybox - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



  • Страница 1 из 1
  • 1
Архив » История мировых и локальных событий » История развития сайта » Фиксированное окно по центру страницы с помощью js/fancybox (на примере вывода в нем увеличенного изображения)
Фиксированное окно по центру страницы с помощью js/fancybox
Дата: Четверг, 05.07.2012, 11:03 | Сообщение # 1
Группа: Администраторы
Сообщений: 1530
<img src="адрес маленького фото" onclick="s_okno('адрес большого фото')" />

<div style="z-index: 100; position: absolute; display: none;" id="okno"></div>

<script>
var okno=document.getElementById("okno");

function s_okno(i2) {
okno.style.left=document.body.clientWidth/2-200; //200 - подберите эмпирически - это половина ширины окна
okno.style.top=document.body.scrollTop+50;
var h=document.body.clientHeight-170; //170 - подберите эмпирически, чтобы окно вписывалось в страницу
okno.innerHTML="<img src='"+i2+"' height='"+h+"' style='border:10px solid #f7f6f5;cursor:pointer;' onclick=okno.style.display='none';>";
okno.style.display='block';
}
</script>
 
Дата: Четверг, 05.07.2012, 12:27 | Сообщение # 2
Группа: Администраторы
Сообщений: 1530
Аналогичное современное решение с помощью модуля ulightbox используемое на Юкоз сайтах

<script type="text/javascript" src="http://s41.ucoz.net/src/jquery-1.7.2.js"></script>
<link href="http://s41.ucoz.net/src/ulightbox/ulightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://s41.ucoz.net/src/ulightbox/ulightbox.js"></script>


<body>

<a href="http://poshiv-odezhdi.3dn.ru/_ph/1/534738460.jpg"
class="ulightbox" rel="ultbx" title="">
<img alt="" style="height:100px;" src="http://poshiv-odezhdi.3dn.ru/_ph/1/534738460.jpg"></a>

<a href="http://poshiv-odezhdi.3dn.ru/_ph/1/60276008.jpg"
class="ulightbox" rel="ultbx" title="">
<img alt="" style="height:100px;" src="http://poshiv-odezhdi.3dn.ru/_ph/1/60276008.jpg"></a>

</body></html>
 
Дата: Четверг, 27.09.2012, 13:31 | Сообщение # 3
Группа: Администраторы
Сообщений: 1530
Тестирование fancybox/ulightbox
http://jsfiddle.net/Py2RA/238/

Документация по настройкам fancybox с примерами
http://fancyapps.com/fancybox/#examples
 
Дата: Четверг, 27.09.2012, 23:42 | Сообщение # 4
Группа: Администраторы
Сообщений: 1530
Автоматический запуск отражения картинки в сплывающем lightbox окне при загрузке страницы

<script>
$(".ulightbox").attr('rel', 'gal').fancybox({
helpers: {
overlay : null, //не затемнять содержимое страницы
title : { type : 'inside' } //прописывать title внутри всплывающего окна
}
});
$(".ulightbox").eq(0).trigger('click'); //запустит первую картинку, eg(1) - вторую картинку и тд.
</script>
 
Архив » История мировых и локальных событий » История развития сайта » Фиксированное окно по центру страницы с помощью js/fancybox (на примере вывода в нем увеличенного изображения)
  • Страница 1 из 1
  • 1
Поиск:


Copyright kachay.ucoz.org © 2008-2024Хостинг от uCoz
^ Наверх ^
Пригодилось!