Фотоальбом превью с 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);}
}
Готово!
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
Ссылка на
источник
| 
