Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «overlay»
Меняем в плагине basket alert на аякс окошко с оформлением 2013-11-30 18:38:11
Вот понадобилось заказчику такое окошко ,пришлось искать замену alert 1.Скачиваем скрипты [ ...
+ развернуть текст сохранённая копия
Вот понадобилось заказчику такое окошко ,пришлось искать замену alert 1.Скачиваем скрипты [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам js.zip (8.03 Kb)[/is-logged] ,распаковываем и заливаем скрипты и стиль в папку js вашего шаблона
2.подключаем скрипты и стиль в хеад main.tpl
Код: <script src="{{ tpl_url }}/js/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="{{ tpl_url }}/js/jquery.alerts.js" type="text/javascript"></script>
<link href="{{ tpl_url }}/js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />3.Идем /engine/plugins/basket/js и меняем содержимое на этот код
Код: function rpcBasketRequest(method, params) {
var linkTX = new sack();
linkTX.requestFile = '/engine/rpc.php';
linkTX.setVar('json', '1');
linkTX.setVar('methodName', method);
linkTX.setVar('params', json_encode(params));
linkTX.method='POST';
linkTX.onComplete = function() {
linkTX.onHide();
if (linkTX.responseStatus[0] == 200) {
var resTX;
try {
resTX = eval('('+linkTX.response+')');
} catch (err) { jAlert('{l_fmsg.save.json_parse_error} '+linkTX.response); }
// First - check error state
if (!resTX['status']) {
// ERROR. Display it
jAlert('Error ('+resTX['errorCode']+'): '+resTX['errorText']);
} else {
//jAlert('Request complete, answer: '+resTX['data']+'; '+resTX['update']);
jAlert('Товар добавлен в корзину.');
document.getElementById('basketTotalDisplay').innerHTML = resTX['update'];
document.getElementById('basket_'+params['id']).value = '1';
}
} else {
jAlert('{l_fmsg.save.httperror} '+linkTX.responseStatus[0]);
}
}
linkTX.onShow();
linkTX.runAJAX();
}
4.Ну вроде все
Тэги: lightbox,, overlay, диалоги,
Регистрация в модальном окне 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
... .ru/dialogi- overlay-i-lightbox/ ...
+ развернуть текст сохранённая копия
Модальное окно с фреймом,может кому пригодится Здесь ничего сложного,стили ,скрипт и сам код окошка. Код: <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, диалоги,
Главная / Главные темы / Тэг «overlay»
|
Взлеты Топ 5
Падения Топ 5
|
