Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «overlay»
Адаптивная галерея на jquery плагине LEAST.JS 2013-10-03 15:13:28
... /> <div class=" overLayer"></div ...
+ развернуть текст сохранённая копия
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин 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, диалоги,, изображениями,, эффекты
Хак вывод Ajax окна в любом месте сайта. 2013-10-03 14:37:51
Хак дает возможность вывести любое Ajax окно в любом месте сайта. Возможность: задать размер ...
+ развернуть текст сохранённая копия
Хак дает возможность вывести любое Ajax окно в любом месте сайта. Возможность: задать размер окна; название окна; любое количество окон (у каждого должен быть свой ID); любое содержание окна (все хтмл теги) Так начнем с установки: Скрипт вставляем в любом месте вашего сайта, рекомендую создать дополнительную страницу шаблона куда складать свои скрипты: Код: <script type="text/javascript">
function Modalcom() {
$(function(){
$('#Modalcom').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 700,
height: 500,
});
});
$('#Modalcom').show(3000);
$('.ui-dialog').show(3000);
}
</script> width: 700 - ширина окна height: 500 - высота окна Modalcom - в нашем случаи ID окна Где хотим видеть кнопку для активирования Ajax окна: Код: <center><div class="showLinki">
<div class="quote">
<input type="submit" class="fbutton" onclick="Modalcom(); return false;" value="Комментировать" style="width:200px;">
</div></div></center> style="width:200px - ширина кнопки вызов окна: Код: <a href="#" onclick="FuncName(); return false;" value="Нажми на меню" class="bbcodes"></a> Содержимое окна: Код: <div id="Modalcom" title="Оставить комментарий" style="display:none; ">
ЗДЕСЬ содержимое окна
</div>
Тэги: lightbox,, overlay, диалоги,, интерфейс
Всплывающее окно при загрузке сайта с помощью CSS3 и JS 2013-10-01 19:15:36
Всем нам попадались сайты, при загрузке которых сразу, или с задержкой в несколько секунд ...
+ развернуть текст сохранённая копия
Всем нам попадались сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием, будь то объявление, реклама, подписная форма или форма обратной связи. Все давно придумано и прекрасно работает. Разметка HTML Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент div id="parent_popup" отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера div id="popup" будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида: Код: <div id="parent_popup">
<div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div> Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой JS и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот JS лучше всего в конце тела страницы html перед закрывающим тегом /body. Ну а сам скрипт состоит всего лишь из нескольких строк: Код: <script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script> В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение. Для закрытия окна мы просто используем ссылку с небольшим javascript в атрибуте и определенным классом class="close" для возможности оформления внешнего вида кнопки закрытия через стили CSS. Код: <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a> Таким образом мы подошли к самому интересному моменту (на мой взгляд) создания всплывающего окна, к формированию внешнего вида с помощью стилей и некоторых свойств CSS3. Стили CSS Для начала создадим стилевой идентификатор #parent_popup с помощью которого мы свяжем наше окно с javascript и сформируем внешний вид основного контейнера div id="parent_popup". Код: #parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Для основы нашего окна выставляем фиксированное положение (position: fixed;), то есть, если вы будете прокручивать страницу при открытом окне, оно так же будет смещаться вниз. Зададим цвет фона черного цвета и добавим ему небольшую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон будет располагаться поверх всех остальных элементов. В завершении с помощью свойства display: none; скроем его до момента активации javascript. Теперь давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь все так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока. Код: #popup {
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}С помощью свойств CSS3 можно практически как угодно сформировать внешний вид всплывающего окна, например использовать функцию линейного градиента для фона, или же различные виды трансформации. При этом правда не следует забывать, что не все браузеры одинаково хорошо справляются с обработкой новых свойств CSS3. Закрываем окно На завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаем класс close и начинаем оформлять кнопку закрытия: Код: .close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении определяемся с изменением цвета фона при наведении курсора мыши на кнопку. Все! Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «хрень» и уж тем более блокировать возможность закрытия окна. Уважайте своих пользователей и они к вам потянутся.
Тэги: css,, lightbox,, overlay, диалоги,, интерфейс,
Хак cкользящая панель - Portamento 2013-09-19 16:01:12
Оригинальная скользящая панель - Portamento , где основное функционирование завязана на ...
+ развернуть текст сохранённая копия
Оригинальная скользящая панель - Portamento , где основное функционирование завязана на использовании Jquery плагина Portamento. Сам плагин написан программистом Крисом Нобелем, главная особенность - это динамически передвигающийся по мере прокрутки слой с вашим содержимым. Скользящая панель - Portamento удобна для показа рекламного блока новостей, а также меню сайта, главным образом потому, что он всегда перед глазами. Установка проста и выполняется за пару шагов: 1. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам hak_portamento.zip (46.96 Kb)[/is-logged]
2. Раскладываем содержимое по папкам
portamento.js (или portamento-min.js) -> templates/YOURTEMPLATE/js/
3. Открываем main.tpl, в head вставляем
Код: <script src="{tpl_url}/js/portamento.js"></script>
4. Добавим CSS стили. Portamento оборачивает панель в элемент с ID = portamento_container.
#portamento_container обеспечивает правильное положение панели, устанавливая ей свойство position:absolute.
Панель получает класс fixed, когда она скользит. Поэтому для нее надо установить свойство position:fixed.
Например:
Код: #portamento_container {
float:right;
position:relative;
}
#portamento_container #example {
float:none;
position:absolute;
}
#portamento_container #example.fixed {
position:fixed;
}5. Настроить панель.
Для начала нам нужно понять в каких пределах будет "ездить" наш слой (панель).
Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side
в main.tpl вставляем код
Код: <script>
$('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>
Portamento можно настроить за счет входных данных:
wrapper - элемент необходимый, чтобы ограничивать перемещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент .
gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.
disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.
Тэги: lightbox,, overlay, диалоги,, интерфейс,, меню, навигация
STICKY FOOTER - СКОЛЬЗЯЩЕЕ ФУТЕР МЕНЮ 2013-09-16 13:16:56
Футер представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS ...
+ развернуть текст сохранённая копия
Футер представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS. javascript используется для усовершенствования футера, как при наведении мыши на элементы или при клике. Это означает, что если в браузере отключен javascript, он будет прекрасно работать во всех браузерах, но без эффектов. Так же присутствуют некоторые CSS3 функции, такие как закругленные углы и тени текста, так, что если пользователь зайдет с какого нибудь Internet Explorer (версий 6, 7 и 8), функциональность футера не будет нарушена. Установка: 1. Скачать архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам stickyfooter.zip (78.48 Kb)[/is-logged]
2. Залить файлы на сервер в папку шаблона согласно их директориям, в случае замены (ну вряд ли конечно) сделать бекап файлов.
3. Открыть main.tpl и в head вставить:
Код: <script type="text/javascript" src="{tpl_url}/js/hoverintent.js"></script>
<script type="text/javascript" src="{tpl_url}/js/footer.js"></script>
<script type="text/javascript">
$(document).ready(function($){
$('#footer').stickyFooter({
speed : 'fast',
effect : 'hover_fade',
showhidefooter : 'show',
hide_speed : 1000,
hide_delay : 2000
});
});
</script>
Опции опишу ниже.
4.Вставляем код перед /body
Код: <ul id="footer" class="footer_fixed">
<li id="footer_home"><a href="http://ngcmshak.ru/">Dark5ider.ru</a></li>
<li id="footer_home"><a href="#"><img src="{tpl_url}/images/footer_home.png" alt="Домой" /></a></li>
<li><a href="#" class="dropup">Большой блок</a><!-- Блок 3: Большой -->
<div class="footer_dropup drop10columns">
<div class="col_10">
<h4>Большой блок</h4>
</div>
<div class="col_5">
<p>Используйте один из любых 6 включенных JQuery эффектов, чтобы показать содержание блока, показываться может как при наведении мыши , так и при щелчке, с 3 различными стилями: fade, slide или toggle.
<p>В правой части находятся <a href="http://ngcmshak.ru/">соц. значки</a> с тултипом (стоит плагин hoverIntent, я бы лично советовал BootStrap)</p>
</div>
<div class="col_5">
<p class="black_box">В футере встроен ряд стилей для вывода информации, такие как: заголовки, списки, абзацы с иконками, (это темное поле), таблицы и изображения! Все эти элементы оформлены в CSS, вы можете использовать соответствующий класс в HTML..
</p>
</div>
<div class="clear"></div>
<div class="col_2">
<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_2">
<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_3">
<h5>Текст с иконкой</h5>
<p class="calendar">Это параграф с иконкой календаря</p>
<p class="note">Это параграф с иконкой заметки</p>
<p class="archive">Это параграф с иконкой архива</p>
<p class="search">Это параграф с иконкой поиска</p>
<p class="help">Это параграф с иконкой помощи.</p>
</div>
<div class="col_3">
<h5>И еще</h5>
<p class="delete">Это параграф с иконкой удаления</p>
<p class="favorite">Это параграф с иконкой избранного</p>
<p class="lock">Это параграф с иконкой блокировки.</p>
<p class="briefcase">Это параграф с иконкой портфеля.</p>
<p class="user">Это параграф с иконкой пользователя.</p>
</div>
</div>
</li><!-- Конец Блок 3 -->
<li><a href="#" class="dropup">Изображения</a><!-- Блок 4: Изображения -->
<div class="footer_dropup drop6columns">
<div class="col_6">
<h4>Простой параграф с изображением</h4>
<img src="img/asset01.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>
<hr />
<h4>Еще один параграф с изображением</h4>
<img src="img/asset02.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>
</div>
</div>
</li><!-- Конец Блок 4 -->
<li><a href="#" class="dropup">Текст, Таблицы и списки</a><!-- Блок 5: Текст, Таблицы и списки -->
<div class="footer_dropup drop8columns">
<div class="col_8">
<h4>Дополнительные списки</h4>
</div>
<div class="col_2">
<ol class="num">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>
</div>
<div class="col_2">
<ol class="num2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>
</div>
<div class="col_2">
<ul class="list">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_2">
<ul class="list2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">еще...</a></li>
</ul>
</div>
<div class="col_8">
<hr />
</div>
<div class="col_4">
<p class="dark">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="brown">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="yellow">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="red">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="blue">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="green">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
</div>
<div class="col_4">
<h4>Таблица</h4>
<p>Темная таблица хорошо сочетается с общим стилем футера.</p>
<table id="table_dark" cellspacing="0">
<tr><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
</table>
</div>
</div>
</li><!-- Конец Блок 5 -->
<li id="social"><!-- Блок 6: Соц сети -->
<ul>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/twitter.png' alt="" class="footer_icon" /><span>Twitter</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/rss.png' alt="" class="footer_icon" /><span>RSS</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/flickr.png' alt="" class="footer_icon" /><span>Flickr</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/facebook.png' alt="" class="footer_icon" /><span>Facebook</span></a></li>
</ul>
</li><!-- Конец Блок 6 -->
</ul>
<a id="footer_trigger" class="active" href="#"></a><!-- Кнопка свернуть -->
5. Готово.
Настройка:
speed : ставим насколько быстро "drop ups" показывается. Варианты: slow, normal, fast или значение в миллисекундах, пример: speed : 500
effect : Эффект показа "drop ups": 'hover_fade', 'hover_slide', 'hover_toggle', 'click_fade', 'click_slide' или 'click_toggle'
showhidefooter : Футер может быть скрыт или открыт, когда страница загрузилась, 'show' его покажет, ну и соответственно 'hide' скроет. hide с параметрами:
hide_speed : время (в миллисекундах) за которое футер "скрывается"
hide_delay : время (в миллисекундах) через которое футер "скрывается"
Тэги: css,, lightbox,, overlay, диалоги,, интерфейс,, меню, навигация,
Главная / Главные темы / Тэг «overlay»
|
Взлеты Топ 5
Падения Топ 5
|
