Фотогалерея с альбомами на JQUERY

В этом уроке мы собираемся создать галерею изображений. У нас будет несколько альбомов содержащих слегка повернутые миниатюры, которые будут, появляются при  наведении курсора мыши. Полное изображение будет загружаться при нажатии на миниатюру. Для этой галерее мы будем использовать 2D Transform плагин для анимации вращения.

ПОСМОТРЕТЬ ДЕМО                             СКАЧАТЬ ИСХОДНИКИ

Давайте начнем.

РАЗМЕТКА

Мы собираемся включить в HTML все наши  DIV с классом "pp_gallery". Он будет состоять из загрузочной DIV, навигации, которая появится, когда полное изображение загрузиться и контейнером основных миниатюр.

Внутри  контейнера, который будет иметь класс "pp_thumbContainer", мы будем иметь несколько DIV для альбомов и DIV для возвращения в альбом. Каждый альбом будет содержать эскизы с описанием, упакованные в DIV с классом «содержания». 

<div id="pp_gallery" class="pp_gallery">

    <div id="pp_loading" class="pp_loading"></div>

    <div id="pp_next" class="pp_next"></div>

    <div id="pp_prev" class="pp_prev"></div>

    <div id="pp_thumbContainer">

        <div class="album">

            <div class="content">

                <img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" />

                <span>The Sixties by Tetsumo</span>

            </div>

            <div class="content">

                <img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" />

                <span>The Sixties by Tetsumo</span>

            </div>

            ...

            <div class="descr">

                The Sixties

            </div>

        </div>

        <div class="album" style="bottom:-90px;">

            ...

        </div>

        ...

        <div class="pp_back">Albums</div>

    </div>

</div>

HTML структура  предварительного просмотра  изображения будет следующей:

<div id="pp_preview" class="pp_preview">

    <img src="images/album1/1.jpg" />

    <div class="pp_descr"><span>Description</span></div>

</div>

Теперь, давайте посмотрим на стиль.

CSS

*{

    margin:0;

    padding:0;

}

body{

    background:#000 url(../bg.jpg) repeat center center;

    font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;

    font-size:12px;

    color: #fff;

    overflow:hidden;

}

Структурированный  фон очень хорошо подходит, мы решили добавить текстуру дерева. Вы можете найти эту текстуру на Webtreats .

Далее стиль загрузки DIV и навигация для фотографии, когда мы находимся в режиме предварительного просмотра:

.pp_loading{

    display:none;

    position:fixed;

    top:50%;

    left:50%;

    margin:-35px 0px 0px -35px;

    background:#fff url(../icons/loader.gif) no-repeat center center;

    width:70px;

    height:70px;

    z-index:999;

    opacity:0.7;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    border-radius:10px;

}

.pp_next, .pp_prev{

    cursor:pointer;

    top:50%;

    margin-top:-16px;

    width:32px;

    height:32px;

    position:fixed;

    text-align:center;

    border:1px solid #111;

    color:#fff;

    -moz-box-shadow:0px 0px 3px #000;

    -webkit-box-shadow:0px 0px 3px #000;

    box-shadow:0px 0px 3px #000;

}

.pp_next{

    right:-40px;

    background:#222 url(../icons/next.png) no-repeat center center;

}

.pp_prev{

    left:-40px;

    background:#222 url(../icons/prev.png) no-repeat center center;

}

Загрузка изображений будет в центре страницы с помощью 50% отрицательного значения margin-top. То же самое мы сделаем для элементов навигации, просто, что здесь будут элементы располагаться  вертикально.

Контейнер с эскизами будет расположен в нижней части страницы:

#pp_thumbContainer{

    position:fixed;

    bottom:0px;

    left:0px;

    height:65px;

    width:100%;

}

Альбомы  изначально скрыты. При загрузке страницы, они будут скользить в снизу, поэтому мы установим  начальное нижнее значение -90 пикселей:

#pp_thumbContainer .album{

    position:absolute;

    width:200px;

    height:65px;

    bottom:-90px;

}

 Значение для позиционирования альбомов будет рассчитываться динамически при загрузке страницы. Мы расположим  все альбомы равномерно по всей ширине страницы.

.album .descr,

.pp_back{

    position:absolute;

    bottom:0px;

    left:-16px;

    background:#222;

    text-align:center;

    border:1px solid #111;

    padding:5px;

    cursor:pointer;

    width:169px;

    color:#fff;

    cursor:pointer;

    text-shadow:0px 0px 1px #fff;

    -moz-box-shadow:1px 1px 4px #000;

    -webkit-box-shadow:1px 1px 4px #000;

    box-shadow:1px 1px 4px #000;

}

.pp_back{

    text-transform:uppercase;

    bottom:120px;

    left:-100px;

    width:80px;

}

Рамка для изображения и названия изображений будут иметь следующий стиль:

#pp_thumbContainer .content{

    position:absolute;

    top:0px;

    height:155px;

    cursor:pointer;

}

Эти рамки также будет распространяться в динамическом положении в нашем JavaScript. Мы установили верхнее значение 0, для того чтобы  все эскизы выровнять к верхней части контейнера эскизов. Нам не нужны, вертикальные миниатюры.

Миниатюры будут иметь белую рамку и тень:

#pp_thumbContainer img{

    border:5px solid #fff;

    -moz-box-shadow:1px 1px 7px #000;

    -webkit-box-shadow:1px 1px 7px #000;

    box-shadow:1px 1px 7px #000;

}

Описание для каждого изображения невидимо. Мы будем использовать его только, для того чтобы заполнить описание элемента  для просмотра в полном размере.

#pp_thumbContainer .content span{

    display:none;

}

Упаковка  для полного изображения будет позиционироваться вне страницы, установив верхнюю границу до 150%. После загрузки изображения, мы будем двигать его снизу. Мы ставим левое значение до 50%, поскольку мы хотим, отцентрировать изображение. Поскольку мы не знаем еще, ширину и высоту фото, мы не можем устанавливать какие-либо отрицательные поля. Мы сделаем это в нашей функции JavaScript.

.pp_preview{

    position:fixed;

    top:150%;

    left:50%;

}

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

.pp_preview img{

    position:absolute;

    top:0px;

    left:0px;

    border:10px solid #fff;

    border-bottom:45px solid #fff;

    -moz-box-shadow:1px 1px 7px #000;

    -webkit-box-shadow:1px 1px 7px #000;

    box-shadow:1px 1px 7px #000;

}

Описание будет в нижней части предварительного просмотра. В JavaScript мы установим ширину и высоту предварительного просмотра  одного изображения, поэтому описание будет позиционироваться в толще нижней границы изображения.

.pp_descr{

    height:45px;

    line-height:45px;

    font-size:20px;

    width:100%;

    bottom:0px;

    left:0px;

    position:absolute;

    text-align:center;

    color:#00021c;

}

А теперь, давайте добавим немного эффекта!

JAVASCRIPT

У нас будет много анимации по всему JavaScript. Альбомы будут скользить снизу при загрузке страницы. Когда мы выбираем миниатюру, мы должны создать предварительный просмотр DIV и сдвинуть ее. Изображение будет изменять размер, так чтобы оно вписалось в окно.

var ie          = false;

if ($.browser.msie) {

    ie = true;

}

Мы будем использовать некоторые индексные переменные для навигации и сохранения некоторых элементов:

//current album/image displayed

var current     = -1;

var album       = -1;

//windows width

var w_width     = $(window).width();

//caching

var $albums     = $('#pp_thumbContainer div.album');

var $loader     = $('#pp_loading');

var $next       = $('#pp_next');

var $prev       = $('#pp_prev');

var $images     = $('#pp_thumbContainer div.content img');

var $back       = $('#pp_back');

Мы хотим распространить альбомы равномерно по всей странице, поэтому мы рассчитаем  левое значение:

var nmb_albums  = $albums.length;

var spaces      = w_width/(nmb_albums+1);

var cnt         = 0;

//preload all the images (thumbs)

var nmb_images  = $images.length;

var loaded      = 0;

$images.each(function(i){

    var $image = $(this);

    $('<img />').load(function(){

        ++loaded;

        if(loaded == nmb_images){

            //let's spread the albums evenly at the bottom of the page

            $albums.each(function(){

                var $this   = $(this);

                ++cnt;

                var left    = spaces*cnt - $this.width()/2;

                $this.css('left',left+'px');

                $this.stop().animate({'bottom':'0px'},500);

            }).unbind('click').bind('click',spreadPictures);

            //also rotate each picture of an album with a random number of degrees

            $images.each(function(){

                var $this = $(this);

                var r = Math.floor(Math.random()*41)-20;

                $this.transform({'rotate'   : r + 'deg'});

            });

        }

    }).attr('src', $image.attr('src'));

});

SpreadPictures функция сделает подобную вещь: он будет двигаться по выбранному альбому влево и распространять все эскизы:

function spreadPictures(){

    var $album = $(this);

    //track which album is opened

    album = $album.index();

    //hide all the other albums

    $albums.not($album).stop().animate({'bottom':'-90px'},300);

        $album.unbind('click');

        //now move the current album to the left

        //and at the same time spread its images throughout

        //the window, rotating them randomly, hide the description of the album

    //store the current left for the reverse operation

    $album.data('left',$album.css('left'))

          .stop()

          .animate({'left':'0px'},500)

          .find('.descr')

          .stop()

          .animate({'bottom':'-30px'},200);

        var total_pic   = $album.find('.content').length;

        var cnt         = 0;

        //each picture

        $album.find('.content')

              .each(function(){

            var $content = $(this);

            ++cnt;

            //window width

            var w_width     = $(window).width();

            var spaces      = w_width/(total_pic+1);

            var left        = (spaces*cnt) - (140/2);

            var r           = Math.floor(Math.random()*41)-20;

            //var r = Math.floor(Math.random()*81)-40;

        $content.stop().animate({'left':left+'px'},500,function(){

            $(this).unbind('click')

                       .bind('click',showImage)

                       .unbind('mouseenter')

                       .bind('mouseenter',upImage)

                       .unbind('mouseleave')

                       .bind('mouseleave',downImage);

        }).find('img')

          .stop()

          .animate({'rotate': r+'deg'},300);

        $back.stop().animate({'left':'0px'},300);

            });

}

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

$back.bind('click',function(){

    $back.stop().animate({'left':'-100px'},300);

    hideNavigation();

    //there's a picture being displayed

    //lets slide the current one up

    if(current != -1){

        hideCurrentPicture();

    }

    var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');

    $current_album.stop()

                  .animate({'left':$current_album.data('left')},500)

                  .find('.descr')

                  .stop()

                  .animate({'bottom':'0px'},500);

    $current_album.unbind('click')

                  .bind('click',spreadPictures);

    $current_album.find('.content')

              .each(function(){

                var $content = $(this);

                $content.unbind('mouseenter mouseleave click');

                $content.stop().animate({'left':'0px'},500);

        });

    $albums.not($current_album).stop().animate({'bottom':'0px'},500);

    });

Следующая функция, называется ShowImage , для отображения полного  образа, сдвинув его снизу. Для центрирования предварительного просмотра, нам нужно установить свои отрицательные поля в зависимости от ширины и высоты изображения. Мы также будем вращать превью в случайном порядке:

function showImage(nav){

    if(nav == 1){

        //reached the first one

        if(current==0){

            return;

        }

        var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')

                       .find('.content:nth-child('+parseInt(current)+')');

        //reached the last one

        if($content.length==0){

            current-=2;

            return;

        }

    }

    else

    var $content    = $(this);

    //show ajax loading image

    $loader.show();

    //there's a picture being displayed

    //lets slide the current one up

    if(current != -1){

        hideCurrentPicture();

    }

    current                 = $content.index();

    var $thumb              = $content.find('img');

    var imgL_source         = $thumb.attr('alt');

    var imgL_description    = $thumb.next().html();

    //preload the large image to show

    $('<img style=""/>').load(function(){

        var $imgL   = $(this);

        //resize the image based on the windows size

        resize($imgL);

        //create an element to include the large image

        //and its description

        var $preview = $('<div />',{

            'id'        : 'pp_preview',

            'className' : 'pp_preview',

            'html'      : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',

            'style'     : 'visibility:hidden;'

    });

        $preview.prepend($imgL);

        $('#pp_gallery').prepend($preview);

        var largeW  = $imgL.width()+20;

        var largeH  = $imgL.height()+10+45;

        //change the properties of the wrapping div

        //to fit the large image sizes

        $preview.css({

            'width'         :largeW+'px',

            'height'        :largeH+'px',

            'marginTop'     :-largeH/2-20+'px',

            'marginLeft'    :-largeW/2+'px',

            'visibility'    :'visible'

        });

        Cufon.replace('.pp_descr');

        //show navigation

        showNavigation();

        //hide the ajax image loading

        $loader.hide();

        //slide up (also rotating) the large image

        var r           = Math.floor(Math.random()*41)-20;

        if(ie)

            var param = {

                'top':'50%'

            };

        else

            var param = {

                'top':'50%',

                'rotate': r+'deg'

            };

        $preview.stop().animate(param,500);

    }).error(function(){

        //error loading image.

        //Maybe show a message : 'no preview available'

    }).attr('src',imgL_source);

}

Следующие две функции для обработки навигации по изображениям:

//click next image

$next.bind('click',function(){

    current+=2;

    showImage(1);

});

//click previous image

$prev.bind('click',function(){

    showImage(1);

});

Функция hideCurrentPicture переведет  превью в режим слайд вверх. Мы не будем использовать анимацию вращения при использовании браузера IE:

//slides up the current picture

function hideCurrentPicture(){

    current = -1;

    var r   = Math.floor(Math.random()*41)-20;

    if(ie)

        var param = {

            'top':'-100%'

        };

    else

        var param = {

            'top':'-100%',

            'rotate': r+'deg'

        };

    $('#pp_preview').stop()

                    .animate(param,500,function(){

                        $(this).remove();

                    });

}

 ShowNavigation и HideNavigation функция будет отвечать за отображения и скрытия элементов навигации:

//shows the navigation buttons

function showNavigation(){

    $next.stop().animate({'right':'0px'},100);

    $prev.stop().animate({'left':'0px'},100);

}

//hides the navigation buttons

function hideNavigation(){

    $next.stop().animate({'right':'-40px'},300);

    $prev.stop().animate({'left':'-40px'},300);

}

При наведении указателя мыши на эскиз, мы хотим, чтобы он немного сдвигался вверх  и немного поворачивался:

function upImage(){

    var $content    = $(this);

    $content.stop().animate({

        'marginTop'     : '-70px'

    },400).find('img')

          .stop()

          .animate({'rotate': '0deg'},400);

}

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

function downImage(){

    var $content    = $(this);

    var r           = Math.floor(Math.random()*41)-20;

    $content.stop().animate({

        'marginTop'     : '0px'

    },400).find('img').stop().animate({'rotate': r + 'deg'},400);

}

И, наконец, мы будем использовать функцию изменения размера, чтобы изображение соответствовало окну просмотра:

function resize($image){

    var widthMargin     = 50

    var heightMargin    = 200;

    var windowH      = $(window).height()-heightMargin;

    var windowW      = $(window).width()-widthMargin;

    var theImage     = new Image();

    theImage.src     = $image.attr("src");

    var imgwidth     = theImage.width;

    var imgheight    = theImage.height;

    if((imgwidth > windowW)||(imgheight > windowH)){

        if(imgwidth > imgheight){

            var newwidth = windowW;

            var ratio = imgwidth / windowW;

            var newheight = imgheight / ratio;

            theImage.height = newheight;

            theImage.width= newwidth;

            if(newheight>windowH){

                var newnewheight = windowH;

                var newratio = newheight/windowH;

                var newnewwidth =newwidth/newratio;

                theImage.width = newnewwidth;

                theImage.height= newnewheight;

            }

        }

        else{

            var newheight = windowH;

            var ratio = imgheight / windowH;

            var newwidth = imgwidth / ratio;

            theImage.height = newheight;

            theImage.width= newwidth;

            if(newwidth>windowW){

                var newnewwidth = windowW;

                var newratio = newwidth/windowW;

                var newnewheight =newheight/newratio;

                theImage.height = newnewheight;

                theImage.width= newnewwidth;

            }

        }

    }

    $image.css({'width':theImage.width+'px','height':theImage.height+'px'});

}

Нам нужно добавить следующие строки в главе HTML:

<script src="js/cufon-yui.js" type="text/javascript"></script>

<script src="js/Note_this_400.font.js" type="text/javascript"></script>

Мы надеемся, вам понравился этот урок и он будет Вам полезным!

ПОСМОТРЕТЬ ДЕМО                            СКАЧАТЬ ИСХОДНИКИ

Источник