Загружаются все картинки и начинается слайдшоу с эффектом перелистывания.

Разметка HTML

Подключаем библиотеку jQuery и скрипт прямо в теле:

<script type="text/javascript" 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
?-->

javascript

Загрузка изображений:

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);
   })();

СКАЧАТЬСкачек: 520
712,18 Kb
Кто скачал?

ДЕМОПосмотреть
пример