Создание полноэкранной галереи
В этом уроке мы создадим полноэкранную галерею используя jQuery. Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз.
В разработке данной галереи нам потребуется jQuery плагин Flip!, от Lucca Manno для переворачивания миниатюр.
Мы так же будем использовать плагин jQuery Mousewheel Plugin от Brandon Aaron.
Эти прекрасные фото были сняты Полиной Ефремовой.
Начнём с разметки!
HTML
В первую очередь, добавим элемент, который будет отображаться до того, как все изображения не загрузятся:
<div id="tf_loading" class="tf_loading"></div>
Создадим контейнер со всеми изображениями, которые будут отображены в галерее:
<div id="tf_bg" class="tf_bg"> <img src="/images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" /> <img src="/images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/> <img src="/images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/> <img src="/images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/> <img src="/images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/> <img src="/images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/> <div class="tf_pattern"></div> </div>
Мы будем использовать атрибут “longdesc” для того, чтобы указать путь к миниатюре. Последний элемент div будет служить шаблоном.
Добавим контейнер, который будет хранить контент, показывающийся в левой нижней части экрана.
<div id="tf_content_wrapper" class="tf_content_wrapper"> <div class="tf_content" id="content1" style="display:block;"> <h2>Dreamer</h2> <p>Far far away, behind the word mountains, ... </p> </div> <div class="tf_content" id="content2"> ... </div> ... </div>
Каждый блок с заголовком помещаем в элемент с классом “tf_content”.
Структура для блока, содержащего миниатюры изображений (располагается в правой части), будет выглядеть следующим образом:
<div id="tf_thumbs" class="tf_thumbs"> <span id="tf_zoom" class="tf_zoom"></span> <img src="/images/thumbs/1.jpg" alt="Thumb1"/> </div>
Span будет иметь класс “tf_zoom” или “tf_fullscreen” в зависимости от того в каком режиме мы находимся.
И наконец, добавим несколько элементов для навигации:
<div id="tf_next" class="tf_next"></div> <div id="tf_prev" class="tf_prev"></div>
Давайте взглянем что у нас со стилями.
CSS
После того, как мы написали html, определим несколько стилей, которые будут отвечать за полноэкранное отображение:
.tf_bg{ width:100%; height:100%; position:fixed; top:0px; left:0px; }
Контейнер будет растянут по всему экрану. Все изображения позиционируем абсолютно. Ширина и высота, в соответствии с расширениями экрана пользователя будут вычислены автоматически с помощью jQuery:
.tf_bg img{ position:absolute; top:0px; left:0px; width:100%; z-index: 1; display:none; } .tf_pattern{ position:absolute; width:100%; height:100%; background:transparent url(../images/pattern.png) repeat top left; z-index:2; }
Позиционируем контент:
.tf_content{ position:absolute; bottom:50px; left:50px; z-index:10; display:none; }
Заголовок панели с контентом будет оформлен специальным фоном, который мы загрузим через Google Font API. Это сделаем чуть позже.
.tf_content h2{ color:#fff; font-size:90px; padding:0; margin:0; font-family: 'Dancing Script', arial, serif; text-shadow:1px 1px 2px #000; }
Выставим параграфу с контентом небольшую тень:
.tf_content p{ color:#fff; padding:0; margin:0; background:transparent url(../images/bg_content.png) repeat top left; padding:40px; width:500px; font-family: 'PT Sans Narrow', arial, serif; font-size:20px; line-height:25px; text-transform:uppercase; text-shadow:2px 2px 1px #000; -moz-box-shadow:1px 1px 5px #202020; -webkit-box-shadow:1px 1px 5px #202020; box-shadow:1px 1px 5px #202020; border:4px solid #fff; }
Панель с миниатюрами будет располагаться по центру экрана, в правой его части. Так же придадим данной панели отражение, которое будет видно в браузерах функционирующих на базе Webkit:
.tf_thumbs{ position:absolute; z-index:12; right:50px; top:50%; margin-top:-79px; border:4px solid #fff; -moz-box-shadow:1px 1px 5px #202020; -webkit-box-shadow:1px 1px 5px #202020; box-shadow:1px 1px 5px #202020; -webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgb(18, 18, 18)) ); } .tf_thumbs img{ display:block; }
Элемент навигации будет располагаться рядом с миниатюрами:
.tf_next, .tf_prev{ width:35px; height:14px; position:absolute; top:50%; right:320px; z-index:100; cursor:pointer; background:transparent url(../images/nav.png) no-repeat top left; opacity:0.5; } .tf_next{ background-position:0px -14px; margin-top:80px; } .tf_prev{ background-position:0px 0px; margin-top:-55px; } .tf_next:hover, .tf_prev:hover{ opacity:0.9; }
Иконки для зума и полноэкранного режима будут располагаться в правом верхнем углу миниатюры:
.tf_zoom, .tf_fullscreen{ width:20px; height:20px; position:absolute; top:6px; right:6px; cursor:pointer; z-index:100; opacity:0.6; background:transparent url(../images/icons.png) no-repeat top left; } .tf_zoom{ background-position:0px -20px; } .tf_fullscreen{ background-position:0px 0px; } .tf_zoom:hover, .tf_fullscreen:hover{ opacity:0.9; }
Элемент загрузки отобразим в центре экрана:
.tf_loading{ position:fixed; top:50%; left:50%; margin:-30px 0px 0px -30px; width:60px; height:60px; background:#fff url(../images/loader.gif) no-repeat center center; z-index:999; opacity:0.7; }
Вот и всё со стилями. Приступим к написанию JavaScript.
JAVASCRIPT
В первую очередь подключим все наши скрипты:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript" src="/js/jquery.flip.js"></script> <script type="text/javascript" src="/js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
Затем добавим метод, который загрузит все наши изображения:
(function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options); o = $.meta ? $.extend({}, opts, this.data()) : opts; var c = this.length, l = 0; return this.each(function() { var $i = $(this); $('').load(function(i){ ++l; if(l == c) o.onComplete(); }).attr('src',$i.attr('src')); }); }; $.fn.preload.defaults = { onComplete : function(){return false;} }; })(jQuery);
Закэшируем некоторые значения:
var $tf_bg = $('#tf_bg'), $tf_bg_images = $tf_bg.find('img'), $tf_bg_img = $tf_bg_images.eq(0), $tf_thumbs = $('#tf_thumbs'), total = $tf_bg_images.length, current = 0, $tf_content_wrapper = $('#tf_content_wrapper'), $tf_next = $('#tf_next'), $tf_prev = $('#tf_prev'), $tf_loading = $('#tf_loading');
Затем, загрузим все изображения:
$tf_bg_images.preload({ onComplete : function(){ $tf_loading.hide(); init(); } });
Следующая функция покажет первую фотография и создаст несколько обработчиков событий:
function init(){ //получаем размеры изображения в зависимости от размеров экрана var dim = getImageDim($tf_bg_img); //ставим значения переменным и показываем изображение $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }).fadeIn(); //изменение размеров экрана меняет $tf_bg_img $(window).bind('resize',function(){ var dim = getImageDim($tf_bg_img); $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }); }); //расширяем изображение на весь экран $('#tf_zoom').live('click', function(){ if($tf_bg_img.is(':animated')) return false; var $this = $(this); if($this.hasClass('tf_zoom')){ resize($tf_bg_img); $this.addClass('tf_fullscreen') .removeClass('tf_zoom'); } else{ var dim = getImageDim($tf_bg_img); $tf_bg_img.animate({ width : dim.width, height : dim.height, top : dim.top, left : dim.left },350); $this.addClass('tf_zoom') .removeClass('tf_fullscreen'); } } ); //клик на стрелку вниз $tf_next.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('tb'); }); //клик на стрелку вверх $tf_prev.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('bt'); }); //события мыши - down / up $(document).mousewheel(function(e, delta) { if($tf_bg_img.is(':animated')) return false; if(delta > 0) scroll('bt'); else scroll('tb'); return false; }); //события клавиатуры - down / up $(document).keydown(function(e){ if($tf_bg_img.is(':animated')) return false; switch(e.which){ case 38: scroll('bt'); break; case 40: scroll('tb'); break; } }); }
Эта функция отвечает за вывод следующей или предыдущей фотографии:
function scroll(dir){ current = (dir == 'tb')?current + 1:current - 1; //мы хотим сделать круговую галерею if(current == total) current = 0; else if(current < 0) current = total - 1; $tf_thumbs.flip({ direction : dir, speed : 400, onBefore : function(){ //выставляем новую миниатюру var content = ''; content +=''; $tf_thumbs.html(content); } }); //получаем следующее изображение var $tf_bg_img_next = $tf_bg_images.eq(current), //размеры dim = getImageDim($tf_bg_img_next), //изображение должно позиционироваться сверху или низе, в зависимости от направления top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px'; //установим возвращённые данные и покажем следующее изображение $tf_bg_img_next.css({ width : dim.width, height : dim.height, left : dim.left, top : top }).show(); //меняем изображение $tf_bg_img_next.stop().animate({ top : dim.top },1000); //мы хотим добиться слайд-эффекта var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px'; $tf_bg_img.stop().animate({ top : slideTo },1000,function(){ //прячем его $(this).hide(); //$tf_bg_img – изображение которое показывается в данный момент $tf_bg_img = $tf_bg_img_next; //показываем описание нового изображения $tf_content_wrapper.children() .eq(current) .show(); }); //прячем текущее описание $tf_content_wrapper.children(':visible') .hide() }
Меняем размеры изображения и применяем их к размерам экрана:
function resize($img){ var w_w = $(window).width(), w_h = $(window).height(), i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h; if(i_w > i_h){ new_w = w_w; new_h = w_w * r_i; if(new_h > w_h){ new_h = w_h; new_w = w_h / r_i; } } else{ new_h = w_w * r_i; new_w = w_w; } $img.animate({ width : new_w + 'px', height : new_h + 'px', top : '0px', left : '0px' },350); }
Последняя функция даст нам размеры изображения и его правильное позиционирование:
function getImageDim($img){ var w_w = $(window).width(), w_h = $(window).height(), r_w = w_h / w_w, i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h, new_left,new_top; if(r_w > r_i){ new_h = w_h; new_w = w_h / r_i; } else{ new_h = w_w * r_i; new_w = w_w; } return { width : new_w + 'px', height : new_h + 'px', left : (w_w - new_w) / 2 + 'px', top : (w_h - new_h) / 2 + 'px' }; }
С jQuery покончено. Теперь подключим несколько шрифтов. Для этого, добавим следующий HTML в раздел head:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
Вот и всё! Мы надеемся, что урок вам понравился!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/b2fblaTeziI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Сейчас только тот является менеджером, кто заставляет знания работать. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.