Слайдшоу с фотофлип эффектом

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

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