Автор

23 04.2013
Полноэкранная галерея для сайта

Полноэкранная галерея для сайта


 

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..

 

ДЕМО
ИСХОДНИКИ

 

Давайте для начала разберемся, с чего все надо начинать, В разработке данной галереи мы будем использовать jQuery плагин Flip!, от Lucca Manno для переворачивания миниатюр. Мы так же будем использовать плагин jQuery Mousewheel Plugin от Brandon Aaron. Все плагины можно скачать в исходниках.

И так, приступим. В первую очередь подключим все наши скрипты:

<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>

Теперь добавим элемент, который будет отображаться до того, как все изображения не загрузятся:

<div id="tf_loading"></div>

Далее, мы создадим контейнер со всеми изображениями, которые будут отображены в галерее:

<div id="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></div>
</div>

Мы будем использовать атрибут longdesc для того, чтобы указать путь к миниатюре. Последний элемент div будет служить шаблоном. Добавим контейнер, который будет хранить контент, показывающийся в левой нижней части экрана.

<div id="tf_content_wrapper">
    <div id="content1" style="display:block;">
        <h2>Dreamer</h2>
        <p>Far far away, behind the word mountains, ... </p>
    </div>
    <div id="content2">
        ...
    </div>
    ...
</div>

Как Вы заметили, каждый блок с заголовком помещаем в элемент с классом tf_content”.

Структура для блока, содержащего миниатюры изображений (располагается в правой части), будет выглядеть следующим образом:

<div id="tf_thumbs">
    <span id="tf_zoom"></span>
    <img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>

Span будет иметь класс “tf_zoom” или “tf_fullscreen” в зависимости от того в каком режиме мы находимся. И наконец, добавим несколько элементов для навигации:

<div id="tf_next"></div>
<div id="tf_prev"></div>

Половину пути мы прошли, теперь рассмотрим не менее важную часть урока, это оформление галереи с помощью стилей CSS, и начнем мы с полноэкранного отображения, для этого используем параметры:

.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;
}

Со стилями все, теперь приступим к завершающему этапу.

Для начала добавим метод, который загрузит все наши изображения:

(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);
            $('<img alt="">').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     +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '">';
            $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'
    };
}

Вот и все, на этом наша полноэкранная галерея готова. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

10 05.2017
Полноэкранная галерея для сайта

Конструктор продуктов - полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.


08 04.2013
Полноэкранная галерея для сайта

Вы бы хотели создать панель для сайта которая будет содержать фотографии, но при этом панель будет скрыта. Это весьма удобно, ведь визуальное оформления ресурса не загромождается, а это, безусловно, плюс для сайта. Ведь множество информации на сайте приводит к плохой организации ресурса, и посетитель попросту не хочет находится на такой помойке, а не сайте. В данном уроке мы рассмотрим нечто необычный подход к организации галереи, а именно создания фотопанели для сайта с помощью jQuery и замечательного ресурса Flickr.


18 05.2013
Полноэкранная галерея для сайта

Галерея-это универсальное средство, которое помогает красиво организовать картинки на сайте. Различный креативный подход к поставленному вопросу позволяет привлечь не только внимание пользователя к необходимому материалу, но и добавить изюминку на сайт. В данном уроке мы рассмотрим как создать достаточно простую и практичную галерею с эффектом скольжения изображений справа на лево при помощи jquery и небольших стилей css. Основная идея состоит в том, что фокусировка направлена на одно изображение, а при выборе другого происходит скольжение.


19 04.2013
Полноэкранная галерея для сайта

В последнее время мы то и делаем, что рассказываем об адаптивности и ее важности в веб-дизайне, если вы читаете наши уроки то вам не следует напоминать, что это такое и для чего оно нужно. Но что делать, если у вас под рукой нет возможности проверить ваше творение на наличие ошибок в адаптивности. Для этого существуют специальные онлайн сервисы проверки сайта, макета, на его адаптивность. Такие сервисы стали появляется как грибы после дождя, а самое главное, что они бесплатные, что повышает к ним интерес.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close