Полезное в сети
Всегда в теме
Статистика
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
Главная » 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);} }
Готово! СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК |
|
|
| Всего комментариев: 0 | |
