|
Фиксированное окно по центру страницы с помощью 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, 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>
|
| |
| |
Играйте бесплатно в 
