JavaScript + Ajax 実践サンプル集 - jQueryで写真をランダムに並べ替える

jQueryで写真をランダムに並べ替える

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryとCSS3を利用して写真をランダムに並べ替えします。サンプルが起動すると写真をランダムに並べ替えた状態で表示します。写真はドラッグして移動したり、クリックして前面／背面に入れ替えできます。 [View All]をクリックするとすべての写真を重ねて表示します。写真を切り替えるには、写真中央にマウスを移動して切り替えボタンをクリックします。 [Shuffle]をクリックするとランダムに並べ替えします。写真右上の[X]をクリックするとディスク上から削除します。

※このサンプルはIE以外でご覧ください。

このサンプルを編集して試してみる

このサンプルのソースコードとイメージは、ここからダウンロードできます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Photo Desk</title>
    <link href="jQuery/interactivePhotoDesk/css/style.css" rel="stylesheet" type="text/css" />
    <link href="jQuery/interactivePhotoDesk/demo.css" rel="stylesheet" type="text/css" />
	
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

var idx, idxLarge = -1;
		    var mouseup = false;

var photoW = 184;
		    var photoH = 205;

var $container = $('#pd_container');

var $options = $('#pd_options_bar');

var photosSize = $container.find('.pd_photo').length;

var navPage = 0;
	
		    var ie = false;
		    if ($.browser.msie) {
		      ie = true;
		    }

start();

function start() {
		      $('#pd_loading').show();

var tableW = $container.width();
		      var tableH = $container.height();

var horizontalMax = tableW - photoW;
		      var verticalMax = tableH - photoH;

$('<img />').attr('src', 'images/paperball.png');

var cntPhotos = 0;
		      $container.find('.pd_photo').each(function (i) {
		        var $photo = $(this);
		        $('<img />').load(function () {
		          ++cntPhotos;
		          var $image = $(this);

var r = Math.floor(Math.random() * 201) - 100; //*41
		          var maxzidx = parseInt(findHighestZIndex()) + 1;
		          var param = {
		            'top': Math.floor(Math.random() * verticalMax) + 'px',
		            'left': Math.floor(Math.random() * horizontalMax) + 'px',
		            'z-index': maxzidx
		          };

$photo.css(param);
		          if (!ie)
		            $photo.transform({ 'rotate': r + 'deg' });
		          $photo.show();
		          if (cntPhotos == photosSize) {
		            bindEvents();
		            $('#pd_loading').hide();
		          }
		        }).attr('src', $photo.find('img').attr('src'));
		      });
		    }

$(document).bind('mouseup', function (e) {
		      if (mouseup) {
		        mouseup = false;
		        var $photo = $container.find('.pd_photo:nth-child(' + idx + ')');
		        var r = Math.floor(Math.random() * 101) - 50;
		        var $photoT = parseFloat($photo.css('top'), 10);
		        var $photoL = parseFloat($photo.css('left'), 10);
		        var newTop = $photoT + r;
		        var newLeft = $photoL + r;
		        if (ie)
		          var param = {
		            'width': '-=40px',
		            'height': '-=40px',
		            'top': newTop + 'px',
		            'left': newLeft + 'px'
		          };
		        else
		          var param = {
		            'width': '-=40px',
		            'height': '-=40px',
		            'top': newTop + 'px',
		            'left': newLeft + 'px',
		            'rotate': r + 'deg',
		            'shadow': '0 0 5px #000'
		          };
		        $photo.stop(true, true).animate(param, 200).find('img').stop(true, true).animate({
		          'width': '-=40px',
		          'height': '-=40px'
		        }, 200);
		      }
		      e.preventDefault();
		    });

$container.find('.delete').bind('click', function () {
		      var $photo = $(this).parent();
		      var $photoT = parseFloat($photo.css('top'), 10);
		      var $photoL = parseFloat($photo.css('left'), 10);
		      var $photoZIndex = $photo.css('z-index');
		      var $trash = $('<div />', {
		        'className': 'pd_paperball',
		        'style': 'top:' + parseInt($photoT + photoH / 2) + 'px;left:' + parseInt($photoL + photoW / 2) + 'px;width:0px;height:0px;z-index:' + $photoZIndex
		      }).appendTo($container);

$trash.animate({
		        'width': photoW + 'px',
		        'height': photoH + 'px',
		        'top': $photoT + 'px',
		        'left': $photoL + 'px'
		      }, 100, function () {
		        var $this = $(this);
		        setTimeout(function () {
		          $this.remove();
		        }, 800);
		      });
		      $photo.animate({
		        'width': '0px',
		        'height': '0px',
		        'top': $photoT + photoH / 2 + 'px',
		        'left': $photoL + photoW / 2 + 'px'
		      }, 200, function () {
		        --photosSize;
		        $(this).remove();
		      });
		    });

$photo.unbind('mouseenter')
							.bind('mouseenter', function () {
							  $nav.show();
							})
							.unbind('mouseleave')
							.bind('mouseleave', function () {
							  $nav.hide();
							});
						  $options.find('.shuffle,.viewall').unbind('click');
						  if (cnt_photos == photosSize)
						    enlarge(findElementHighestZIndex());
						});
		      });
		    }

function disperse() {
		      var windowsW = $(window).width();
		      var windowsH = $(window).height();

$container.find('.pd_photo').each(function (i) {
		        var $photo = $(this);
		        //if it is the current large photo:
		        if ($photo.index() == idxLarge) {
		          if (ie)
		            var param = {
		              'top': parseInt((windowsH - 100) / 2 - photoH / 2) + 'px',
		              'left': parseInt((windowsW - 100) / 2 - photoW / 2) + 'px',
		              'width': '170px',
		              'height': '170px'
		            };
		          else
		            var param = {
		              'top': parseInt((windowsH - 100) / 2 - photoH / 2) + 'px',
		              'left': parseInt((windowsW - 100) / 2 - photoW / 2) + 'px',
		              'width': '170px',
		              'height': '170px',
		              'shadow': '1px 1px 5px #555'
		            };
		          $photo.stop(true).animate(param, 500, function () {
		            shuffle();
		            $options.find('.viewall').show();
		          }).find('img').animate({
		            'width': '170px',
		            'height': '170px'
		          }, 500);
		        }
		      });
		      $container.find('.pd_next_photo').remove();
		      bindEvents();
		    }

$container.find('.pd_photo').each(function (i) {
		        var $photo = $(this);
		        $photo.draggable({
		          containment: '#pd_container'
		        }).find('.delete')
						.show()
		      }).find('.pd_hold').unbind('mousedown').bind('mousedown', function (e) {
		        var $photo = $(this).parent();
		        mouseDown($photo);
		        e.preventDefault();
		      });
		    }

function navigate() {
		      if (photosSize == 0) return;

var tableW = $container.width();
		      var tableH = $container.height();

var horizontalMax = tableW - photoW;
		      var verticalMax = tableH - photoH;

var $photo = $container.find('.pd_photo:nth-child(' + parseInt(idxLarge + 1) + ')');
		      var r = Math.floor(Math.random() * 201) - 100; //*41
		      if (ie)
		        var param = {
		          'top': Math.floor(Math.random() * verticalMax) + 'px',
		          'left': Math.floor(Math.random() * horizontalMax) + 'px',
		          'width': '170px',
		          'height': '170px'
		        };
		      else
		        var param = {
		          'top': Math.floor(Math.random() * verticalMax) + 'px',
		          'left': Math.floor(Math.random() * horizontalMax) + 'px',
		          'width': '170px',
		          'height': '170px',
		          'rotate': r + 'deg',
		          'shadow': '1px 1px 5px #555'
		        };
		      $photo.stop(true).animate(param, 500, function () {
		        ++navPage;
		        var $photo = $(this);

$container.append($photo.css('z-index', 1));
		        if (navPage < photosSize)
		          enlarge(findElementHighestZIndex());
		        else { //last one
		          $options.find('.backdesk').hide();
		          $options.find('.viewall').show();
		          bindEvents();
		        }
		      }).find('img').animate({
		        'width': '170px',
		        'height': '170px'
		      }, 500);
		    }

function shuffle() {
		      var tableW = $container.width();
		      var tableH = $container.height();

Array.prototype.remove = function (from, to) {
		      var rest = this.slice((to || from) + 1 || this.length);
		      this.length = from < 0 ? this.length + from : from;
		      return this.push.apply(this, rest);
		    };
		  });
		</script>	
	</head>
	<body>

<div id="pd_options_bar" class="pd_options_bar">
			<a href="#" class="shuffle">Shuffle</a>
			<a href="#" class="backdesk" style="display:none;">Back to Desk</a>
			<a href="#" class="viewall">View All</a>
		</div>
		<div id="pd_container" class="pd_container">
			<div class="pd_photo">
				<div class="pd_hold">
					<img src="jQuery/interactivePhotoDesk/photos/1.jpg" alt=""/>
				</div>
				<span class="delete"></span>
			</div>
			<div class="pd_photo">
				<div class="pd_hold">
					<img src="jQuery/interactivePhotoDesk/photos/2.jpg" alt=""/>
				</div>
				<span class="delete"></span>
			</div>
			<div class="pd_photo">
				<div class="pd_hold">
					<img src="jQuery/interactivePhotoDesk/photos/3.jpg" alt=""/>
				</div>
				<span class="delete"></span>
			</div>
			<div class="pd_photo">
				<div class="pd_hold">
					<img src="jQuery/interactivePhotoDesk/photos/4.jpg" alt=""/>
				</div>
				<span class="delete"></span>
			</div>
			<div class="pd_photo">
				<div class="pd_hold">
					<img src="jQuery/interactivePhotoDesk/photos/5.jpg" alt=""/>
				</div>
				<span class="delete"></span>
			</div>
		</div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryで写真をランダムに並べ替える

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryで写真をランダムに並べ替える

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!