Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «lightbox»
Регистрация в модальном окне 2013-11-22 02:47:22
Регистрация в модальном окне,может кому пригодится 1.Итак приступим,пропишем в стили стиль ...
+ развернуть текст сохранённая копия
Регистрация в модальном окне,может кому пригодится 1.Итак приступим,пропишем в стили стиль окошка Код: .modal-window {
display: none;
position: absolute;
z-index: 100;
background: #eee;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 5px #000000;
left: 30%;
top: 30px;
}
.modal-window-close {
position: absolute;
font-size: 10px;
cursor: pointer;
right: 4px;
top: 4px;
}
.modal-window-title {
text-align: center;
}
.modal-window-content {
padding: 5px;
}2.Кнопка вызова окна Код: <a href="{home}/register/" onclick="return showModal(this);">Регистрация</a>3.Код самого окошка Код: <div id="modalWindow" class="modal-window">
<div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
<div class="modal-window-title">Регистрация</div>
<div class="modal-window-content">
<iframe src="about:blank" width="600" height="300" frameborder="0"></iframe>
</div>
</div> 4.Подключаем скрипт вывода окна в head Код: <script type="text/javascript">
function showModal(self) {
var modal = document.getElementById('modalWindow');
var iframe = modal.getElementsByTagName('iframe')[0];
iframe.src = self.href;
modal.style.display = 'block';
return false;
}
</script> 5.Ну и скрываем все блоки в main.tpl для страницы регистрации кроме Код: {mainblock}вот так Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{l_langcode}" lang="{l_langcode}" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset={l_encoding}" />
<meta http-equiv="content-language" content="{l_langcode}" />
<meta name="generator" content="{what} {version}" />
<meta name="document-state" content="dynamic" />
{htmlvars}
<link href="{tpl_url}/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="{home}/rss.xml" rel="alternate" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="{scriptLibrary}/functions.js"></script>
<script type="text/javascript" src="{scriptLibrary}/ajax.js"></script>
<title>{titles}</title>
</head>
<body>[TWIG]
[sitelock]
<div id="loading-layer"><img src="{tpl_url}/images/loading.gif" alt="" /></div>
{% if not isHandler('core:registration') %}
тут ваши блоки
тут ваши блоки
тут ваши блоки
{% endif %}
{mainblock}
{% if not isHandler('core:registration') %}
тут ваши блоки
тут ваши блоки
тут ваши блоки
{% endif %}
[/TWIG]
[/sitelock]
<div id="modalWindow" class="modal-window">
<div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
<div class="modal-window-title">Регистрация</div>
<div class="modal-window-content">
<iframe src="about:blank" width="600" height="300" frameborder="0"></iframe>
</div>
</div>
</body>
</html> вот и все
Тэги: lightbox, overlay, twig,, диалоги,
Модальное окно с фреймом 2013-11-21 03:04:31
... ;dialogi-overlay-i- lightbox/modalnoe-okno ...
+ развернуть текст сохранённая копия
Модальное окно с фреймом,может кому пригодится Здесь ничего сложного,стили ,скрипт и сам код окошка. Код: <style>
.modal-window {
display: none;
position: absolute;
z-index: 100;
background: #eee;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 5px #000000;
left: 30%;
top: 30px;
}
.modal-window-close {
position: absolute;
font-size: 10px;
cursor: pointer;
right: 4px;
top: 4px;
}
.modal-window-title {
text-align: center;
}
.modal-window-content {
padding: 5px;
}
</style>
<script type="text/javascript">
function showModal(self) {
var modal = document.getElementById('modalWindow');
var iframe = modal.getElementsByTagName('iframe')[0];
iframe.src = self.href;
modal.style.display = 'block';
return false;
}
</script>
<div id="modalWindow" class="modal-window">
<div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
<div class="modal-window-title">Я модальное окно)</div>
<div class="modal-window-content">
<iframe src="about:blank" frameborder="0"></iframe>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis lorem ac dapibus ullamcorper. Pellentesque vestibulum felis eu odio bibendum, <a href="http://ngcmshak.ru/dialogi-overlay-i-lightbox/modalnoe-okno-s-freimom.html" onclick="return showModal(this);">ткни сюда</a>, ut viverra leo vestibulum. Sed a ipsum posuere, egestas mauris vel, porta magna. Mauris malesuada ipsum in lectus auctor, vel venenatis turpis facilisis. Mauris at eros libero. Curabitur eleifend lorem vel feugiat dignissim. Nam non molestie tortor.</p>
<p> Nullam arcu ligula, lacinia et diam ut, euismod congue metus. Nam erat enim, hendrerit at luctus in, vehicula quis turpis. Nulla id quam at nibh lacinia sollicitudin eget dictum massa. Donec ac arcu in dolor scelerisque tempor vel in justo. Sed elit orci, luctus vel magna a, dapibus ultricies nisl. Curabitur nunc lacus, ullamcorper nec libero at, fringilla luctus eros. Mauris faucibus eu risus id interdum. Duis ante quam, volutpat et tristique sed, tristique non nibh.</p> Посмотреть можете скопировав код и вставив в панель для проверки скриптов, справа.
Тэги: css,, lightbox,, overlay, диалоги,
Скрипт выбора фонового изображения пользователями 2013-11-19 01:57:59
Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных ...
+ развернуть текст сохранённая копия
Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных Вами вариантов. В скрипте будет использован только библиотека jQuery и плагин jQuery Cookie — он поможет нам сохранить выбранный пользователем вариант. Таким образом даже после перезагрузки страницы или закрытия браузера, фон будет тот же, что выбрал пользователь. И так, начнем… 1. Подключаем скрипты,первым делом подключаем саму библиотеку jQuery, если она у Вас еще не подключена, и плагин jQuery cookie. Код: <script type="text/javascript" src="{tpl_url}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.cookie.js"></script>2. HTML разметка. Код: <div id="panel-bg">
<div>Выберите фон страницы:</div>
<div class="button-bg bg-1" id="bg-1"></div>
<div class="button-bg bg-2" id="bg-2"></div>
<div class="button-bg bg-3" id="bg-3"></div>
<div class="button-bg bg-4" id="bg-4"></div>
<div class="button-bg bg-5" id="bg-5"></div>
<div class="button-bg bg-6" id="bg-6"></div>
<div class="button-bg bg-7" id="bg-7"></div>
</div> В блоке с id panel-bg находятся несколько блоков, которые будут в качестве кнопок. У каждого из них будет своя фоновая картинка, назначать мы их будем для классов. Также у этих блоков есть и id, которые должны совпадать с их классом (далее Вы поймете зачем). 3. CSS стили. Код: .button-bg {
width: 40px;
height: 40px;
border: 1px solid #ddd;
float: left;
margin: 7px 3px;
cursor: pointer;
}
.active,
.button-bg:hover {
box-shadow: 0 0 3px rgba(0,0,0,0.5);
border: 1px solid #fff;
}
.bg-1 {background: #fff url("images/agsquare.png");}
.bg-2 {background: #fff url("images/diagonales_decalees.png");}
.bg-3 {background: #fff url("images/geometry.png");}
.bg-4 {background: #fff url("images/gray_jean.png");}
.bg-5 {background: #fff url("images/ps_neutral.png");}
.bg-6 {background: #fff url("images/skelatal_weave.png");}
.bg-7 {background: #fff url("images/sneaker_mesh_fabric.png");}Для каждого класса задали свою фоновую картинку и выровняли блоки в линию. Так же добавили стили при наведении и для активного блока. 4. Cкрипт. Код: $(document).ready(function() {
if($.cookie('body-bg')) { // если кука уже есть
var bgBody = $.cookie('body-bg'); // получаем значение куки
$('body').addClass(bgBody); // добавляем класс body
$('#'+bgBody).addClass('active'); // выбираем активную кнопку и даем ей класс active
}
$('.button-bg').click(function() { // действия при клике на кнопку (блок div)
var bgBody = $('body').attr('class'), // получаем текущий класс и присваеваем его переменной bgBody
bgId = $(this).attr("id"); // получаем значение id, кнопки по которой был клик
$('body').removeClass(bgBody).addClass(bgId); // удаляем текущий класс у body и добавляем тот который был выбран
$('.button-bg').removeClass('active'); // удаляем у всех кнопок класс active
$(this).addClass('active'); // текущей кнопки даем класс active
$.cookie('body-bg', bgId, {expires: 365}); // добавляем куку на год
});
});Как видите, скрипт достаточно маленький и простой. При клике по одному из блоков, значение его id записывается в куку, а тегу body дается класс (такой же как id блока по которому был клик), а самому блоку добавляется класс active. Так же в начале есть проверка на существование куки, и если она уже есть, то так же добавляются нужные классы и body и блоку в панели. Все пользуемся.
Тэги: lightbox, overlay, диалоги,
Jquery плагин галереи PrettyPhoto 2013-11-19 01:09:34
PrettyPhoto — это простая галерея с огромными возможностями. Она поддерживает не только изображения, ...
+ развернуть текст сохранённая копия
PrettyPhoto — это простая галерея с огромными возможностями. Она поддерживает не только изображения, но и видео (в том числе с youtube и vimeo), flash, frame и AJAX. Эту галерею можно легко настроить под себя, внеся изменения в скрипт. В комплекте идут 6 тем оформления, которые позволяют легче подстроится под дизайн сайта. 1.Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам prettyphoto.zip (1.41 Mb)[/is-logged],распаковываем и заливаем в папку вашего шаблона.
2. Подключаем скрипты, первым делом jQuery, если он у Вас еще не подключен, а затем и скрипт PrettyPhoto.
Код: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 3. Подключим стили галереи
Код: <link rel="stylesheet" href="{tpl_url}/css/prettyPhoto.css" type="text/css" media="screen" />4.HTML разметка для галереи изображений
Код: <ul class="gallery clearfix">
<li><a href="{tpl_url}/images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]
" title="Описание снизу"><img src="{tpl_url}/images/thumbnails/t_1.jpg" width="60" height="60" alt="Название вверху" /></a></li>
<li><a href="{tpl_url}/images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]
"><img src="{tpl_url}/images/thumbnails/t_2.jpg" width="60" height="60" alt="Название вверху" /></a></li>
...
</ul> В теге rel ссылки мы указали в квадратных скобках, что это галерея 1 (для вывода одного изображения нужно оставить только prettyPhoto), в атрибуте title прописывается описание (выводится под изображением) и в атрибуте alt у изображения прописывается название (выводится над изображением).
Прописываем скрипт (желательно перед Код: </body> но можно и в head)
Код: <script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script> Передаем параметры
Код: <script type="text/javascript">
$(document).ready(function(){
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
animation_speed:'normal',//скорость анимации
theme:'light_square',//тема оформления
slideshow:3000,//время показа слайда
autoplay_slideshow: true//автоматический старт слайдшоу
});
});
</script> Описание всех параметров можно посмотреть в самом скрипте.
5. Разметка для вставки видео с youtube
Код: <a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a> Для вставки видео достаточно всего лишь прописать ссылку на страницу с видео.
6. Разметка для вывода содержимого какого-либо блока
Код: <a href="#block" rel="prettyPhoto" title="Контент">Контент из блока с id=block</a> Данная галерея обладает еще множеством возможностей и различными настраиваемыми параметрами. Обо всем остальном Вы можете узнать из файлов демонстрации, а я же хотел бы обратить внимание на одну вещь…
В этой галереи меня не устроил вывод названия и описания, точнее то, откуда они берутся (title и alt). В атрибуты нельзя прописать теги, точнее можно, но не удобно. И для этого я кое-что изменял в скрипте на 154 и 155 строке. Первоначально они выглядели так:
Код: pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('img').attr('alt')) ? $(n).find('img').attr('alt') : ""; }) : $.makeArray($(this).find('img').attr('alt'));
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));После изменения так:
Код: pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.description').html()) ? $(n).find('div.description').html() : ""; }) : $.makeArray($(this).find('div.description').html());
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.title').html()) ? $(n).find('div.title').html() : ""; }) : $.makeArray($(this).find('div.title').html());И после этого вовнутрь ссылки добавил два блока div:
Код: <a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Изображение 1" />
<div class="title" style="display: none;">Название</div>
<div class="description" style="display: none;">Описание</div>
</a> Таким образом в описание легко можно добавлять и ссылки и параграфы и все остальное.
7. Кнопка поделиться от яндекс
Так как галерея изменяет url адрес и открывает контент в зависимости от адреса, то в ней есть возможность добавления кнопок от социальных сетей, что бы ставить лайки и делиться ссылкой. Изначально там есть кнопка twitter и facebook. И для того, что бы внедрить в нее кнопку от яндекса необходимо в самом скрипте заменить содержимое social_tools (строка 93), на то, что получите от яндекса.
8.вот и все подробнее в документации
Тэги: lightbox,, overlay, диалоги,
Адаптивная галерея на jquery плагине LEAST.JS 2013-10-03 15:13:28
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как ...
+ развернуть текст сохранённая копия
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам gallery_least.zip (2.68 Mb)[/is-logged] ,заливаем в папку вашего шаблона.
Этот код размещаем между body :
Код: <section>
<ul id="gallery">
<li id="fullPreview"></li>
<!-- один элемент галереи -->
<li>
<a href="images/p1.jpg"></a>
<img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>Заголовок фото</h2>
</li>
<li>
<p>Краткое описание изображения</p>
</li>
</ul>
</div>
<div class="projectInfo">
Полное описание изображения
</div>
</li>
<!-- /один элемент галереи -->
</ul>
</section>
Для работы галереи в хеад подключаем следующие скрипты и стили:
Код:
<link href="{tpl_url}/css/least.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="{tpl_url}/js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="{tpl_url}/js/jquery.lazyload.js"></script>
Вызов плагина :
Код: $(document).ready(function(){
$('#gallery').least();
});Опции:
'random': true/false (по умолчанию true - включено)
'lazyload': true/false (по умолчанию true - включено)
Здесь можно подключить любой плагин,последние новости,популярные,и т .д.
Тэги: lightbox, overlay, диалоги,, изображениями,, эффекты
Главная / Главные темы / Тэг «lightbox»
|
Взлеты Топ 5
Падения Топ 5
|
