Слайдшоу с фотофлип эффектом
Загружаются все картинки и начинается слайдшоу с эффектом перелистывания.
HTML
Подключаем библиотеку jQuery и скрипт прямо в теле:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jQuery.photoFlip.js"></script>PHP
<!--?php
$directory = 'directory'; //name of the album folders
$image = glob($directory . '/{*.jpg,*.gif,*.png}', GLOB_BRACE);// Scanning the directory folder for images:
echo json_encode($image); //returning the json string
?-->JS
Загрузка изображений:
var markup = {
slideshow_container: $(' <
div id = "slideshow_container" > < /div>
'),
next: $('<a id="next"></a>'),
loading: $(' <
div id = "loading" > < /div>
')
}
markup.loading.hide().appendTo('body').fadeIn(); markup.slideshow_container.find('img').remove(); $.post("load_images.php", function(msg) {
var image_count = msg.length; //length of the data received from php json
for (var i = 0; i < image_count; i++) { //loop
var image_source = msg;
var count = 0;
$('<img>').load(function() { //pass each msg into an img attribute
var image = $(this);
count++; //post-increment count
var rotate = Math.ceil(Math.random() * -25);
image.appendTo(markup.slideshow_container); //append
if (count < image_count) { //rotate the images if they are more than one
image.css({
'transform': 'rotate(' + rotate + 'deg)',
'-moz-transform': 'rotate(' + rotate + 'deg)',
'-webkit-transform': 'rotate(' + rotate + 'deg)'
});
} //end if
//after loading all the images
if (count == image_count) {
markup.loading.fadeOut();
markup.slideshow_container.hide().appendTo('body').fadeIn();
}
}).attr('src', image_source); //end img load function
} //end for
}, 'json'); //end post functionПерелистывание фоток:
(function autoAdvance() {
markup.next.trigger('click', [true]);
var top = markup.slideshow_container.find('img:last'); //topmost image in the album_container i.e index 0
var rotate = Math.ceil(Math.random() * -25); //degrees to rotate our images
var next_top = top.prev(); //the image after the topmost i.e index 1
if (top.is(':animated')) {
return false;
}
//store the top and left margins of the top most images
var margins = {
marginLeft: top.css('margin-left'),
marginTop: top.css('margin-top')
}
//animate the topmost image with an album flip effect and insert it before the bottom most image in the stack
//and give it the margins of the image before animation
//rotate the topmost image into view and give it zero rotation
top.animate({
marginLeft: 250,
marginTop: -385
}, 500, function() {
top.insertBefore(markup.slideshow_container.find('img:first'))
.css({
'transform': 'rotate(' + rotate + 'deg)',
'-moz-transform': 'rotate(' + rotate + 'deg)',
'-webkit-transform': 'rotate(' + rotate + 'deg)'
})
.animate({
'marginLeft': margins.marginLeft,
'marginTop': margins.marginTop
}, 500, function() {
next_top.css({
'transform': 'rotate(' + 0 + 'deg)',
'-moz-transform': 'rotate(' + 0 + 'deg)',
'-webkit-transform': 'rotate(' + 0 + 'deg)'
});
});
});
timeOut = setTimeout(autoAdvance, 4000);
})();Ссылки
