Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Апрель » 13 » Фотоальбом превью с CSS3 и Jquery


00:15
Фотоальбом превью с CSS3 и Jquery

Фотоальбом превью с CSS3 и Jquery

 


Сегодня мы будем создавать скрипт для просмотра содержимого альбома со слайд-шоу. Он может быть использован как  фотогалереи, интернет-магазины, страницы профиля и многое другое. Пример взят в Facebook, где вы наведите курсор мыши на альбом и получаете слайд-шоу из некоторых из фотографий, содержащихся в нем.

 

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


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

HTML

На первом этапе создадим основу HTML . Это стандартный документ HTML5:

index.php

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Album Previews with CSS3 and jQuery | Tutorialzine </title>

 

        <!-- Our stylesheet -->

        <link rel="stylesheet" href="assets/css/styles.css" />

 

    </head>

    <body>

 

        <div id="main">

 

                <a href="#" data-images="assets/img/thumbs/11.jpg|assets/img/thumbs/10.jpg"

                   class="album">

                   <img src="assets/img/thumbs/4.jpg" alt="People" />

                   <span class="preloader"></span>

                </a>

 

                <!-- More albums will go here -->

 

        </div>

 

        <!-- JavaScript Includes -->

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

        <script src="assets/js/script.js"></script>

        <script src="assets/js/albumPreviews.js"></script>

 

    </body>

</html>

#main div используется для разметки страницы:

<a href="#" data-images="assets/img/thumbs/11.jpg|assets/img/thumbs/10.jpg" class="album">

   <img src="assets/img/thumbs/4.jpg" alt="People" />

   <span class="preloader"></span>

</a>

Каждый альбом представляет собой ссылку, которая, как правило, указывают на полную страницу альбома, в котором пользователь будет видеть все фотографии  данного раздела. Альбом также включает в себя данные атрибута, который содержит URL-адреса изображений, содержащихся в нем (это хорошая идея, чтобы указать на эскизы, а не полное изображение). В JQuery части урока, мы будем  добавить их в качестве реальных изображений на ссылку  альбома, и анимировать их.

Внутри ссылка, это  исходное изображение из альбома (который будет отображаться, даже если JavaScript выключен). Это изображение должно отличаться от тех, которые включены в данные атрибутов. Последнее является прелоадер диапазона, в котором отображаются прозрачными PNG, который вращается с помощью CSS3. Я решил пойти по этому пути вместо GIF, так как формат PNG поддерживает надлежащую прозрачность и выглядит лучше.

Тем не менее, это было бы слишком много работы, чтобы написать HTML для всех альбомов вручную. Для этого будем использовать PHP.

index.php

 

$albums = array(

    'People' => array(

                'assets/img/thumbs/4.jpg',

                'assets/img/thumbs/11.jpg',

                'assets/img/thumbs/10.jpg'),

 

   // More albums go here

);

 

foreach ($albums as $name => $a) {

 

    ?>

 

    <a href="#" data-images="<?php echo implode('|', array_slice($a,1))?>" class="album">

       <img src="" alt="<?php echo $name?>" />

       <span class="preloader"></span>

    </a>

 

    <?php

 

}

 

Вы видите, что я использую  array_slice  функции при построении данных атрибута, так что изображение по умолчанию не повторяется (в противном случае вы бы увидели изображение дважды в слайд-шоу).

Давайте напишем JavaScript!

JavaScript

Я использую JQuery библиотеку, чтобы сделать написание JavaScript легче.

Основные функции этого примера имеет вид портативных плагинов jQuery. Плагин ищет данные изображения, анализирует его и добавляет изображения в альбом. Затем запускается слайд-шоу, которое автоматически остановился на при наведении мыши:

 

(function($) {

 

    $.fn.albumPreviews = function() {

 

        return this.each(function(){

 

            var album = $(this),

                loop = null, images = $();

 

            if(!album.data('images')){

                // The data-images attribute is missing. Skip this album.

                return true;

            }

 

            var sources = album.data("images").split('|');

 

            album.on('mouseenter', function(){

 

                if(!images.length){

                    // The images have not been loaded yet

 

                    $.each(sources,function(){

                        images = images.add('<img src="' + this + '" />');

                    });

 

                    // Start the animation after the first photo is loaded

                    images.first().load(function() {

                        album.trigger('startAnimation');

                    });

 

                    album

                        .append(images)

                        .addClass('loading');

                }

                else{

                    // Start the animation directly

                    album.trigger('startAnimation');

                }

 

            }).on('mouseleave', function(){

                album.trigger('stopAnimation');

            });

 

            // Custom events:

 

            album.on('startAnimation',function(){

 

                var iteration = 0;

 

                // Start looping through the photos

                (function animator(){

 

                    album.removeClass('loading');

 

                    // Hide the currently visible photo,

                    // and show the next one:

 

                    album.find('img').filter(function(){

                        return ($(this).css('opacity') == 1);

                    }).animate({

                        'opacity' : 0

                    }).nextFirst('img').animate({

                        'opacity' : 1

                    });

 

                    loop = setTimeout(animator, 1000);  // Once per second

 

                })();

 

            });

 

            album.on('stopAnimation',function(){

 

                album.removeClass('loading');

                // stop the animation

                clearTimeout(loop);

            });

 

        });

 

    };

 

    // This jQuery method will return the next

    // element of the specified type, or the

    // first one if it doesn't exist

 

    $.fn.nextFirst = function(e) {

        var next = this.nextAll(e).first();

        return (next.length) ? next : this.prevAll(e).last();

    };

 

})(jQuery);

 

Анимация выполняется с помощью функции аниматора, которая меняет изображения один раз в секунду. Вы можете изменить это по своему вкусу.

А вот как он используется:

$(function() {

 

                // Initialize the plugin

                $('#main .album').albumPreviews();

 

});

Он будет активировать плагин и установит обработку событий на элементы.

Все, что мы должны сейчас сделать, это добавить некоторые CSS стили.

CSS

Я представил здесь наиболее интересные части таблицы стилей. Остальные вы найдете в исходнике / CSS / styles.css .

 

.album{

                width:140px;

                height:140px;

                margin: 15px 5px;

                position:relative;

 

                display:inline-block;

                border: 4px solid #F0F0F0;

                background-color: #F0F0F0;

 

                border-radius:12px;

                box-shadow:0 -2px 0 #616161;

 

                /* Reflections below the image */

                -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.1) 100%);

}

 

/* Showing a subtle shadow on the borders of the image */

.album:before{

                content: '';

                top: -1px;

                left: -1px;

                right: -1px;

                bottom: -1px;

                z-index:1000;

                position: absolute;

                box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;

                border:1px solid #fff;

}

 

/* The album photos (hidden by default) */

.album img{

                top:0;

                left:0;

                opacity:0;

                width:140px;

                height:140px;

                position:absolute;

}

 

/* The first (the default) thumbnail is visible */

.album img:first-child{

                opacity:1;

}

 

.album img,

.album:before{

                border-radius: 10px;

}

 

/* The preloader PNG. It is rotated with a CSS keyframe animation */

 

.album .preloader{

                display:none;

}

 

.album.loading .preloader{

                content:'';

                position:absolute;

                width:18px;

                height:18px;

                background:url('../img/preloader.png') center center;

                top: 0;

                left: 0;

                right: 0;

                bottom: 0;

                margin:auto;

                display:block;

 

                /* Configure a keyframe animation for Firefox */

                -moz-animation: rotate 1s linear infinite;

 

                /* Configure it for Chrome and Safari */

                -webkit-animation: rotate 1s linear infinite;

}

 

/* Webkit keyframe animation */

@-webkit-keyframes rotate{

                0%{                        -webkit-transform:rotate(0deg);}

                100%{   -webkit-transform:rotate(360deg);}

}

 

/* Firefox Keyframe Animation */

@-moz-keyframes rotate{

                0%{                        -moz-transform:rotate(0deg);}

                100%{   -moz-transform:rotate(360deg);}

}

 

Готово!      

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

 

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 965 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди