PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

instagr.amのRSSをモザイクギャラリー表示してみました。

参照:RSS.stagram(instagr.amのRSS取得)、Making a Mosaic Slideshow With jQuery & CSS(モザイクギャラリー)

設置サンプルのソース

<!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" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
       <title>設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
      <script type="text/javascript">
/*
Making a Mosaic Slideshow With jQuery & CSS
http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/
*/
         /* スライドに表示する画像パスを配列で指定 */
         var slides = new Array();
   $(function(){
      /* 左矢印をクリックした時 */
      $('.arrow.left').click(function(){
         prev();
         clearInterval(auto);
      });
      $('.arrow.right').click(function(){
         next();
         clearInterval(auto);
      });
      /* 画像のプレロード */
      for(var i=0;i<slides.length;i++){
         (new Image()).src=slides[i];
      }
      /* 最初に表示する画像(1始まり) */
      transition(1);
      /* 10秒おきに自動切り替え */
      var auto;
      auto=setInterval(function(){
         next();
      },5*1000);
   });
   var current = {};
   /* スライドを表示. */
   function transition(id){
      if(!slides[id-1]) return false;
      if(current.id)   {
         if(current.id == id) return false;
         /* 現在のスライドを最前面に表示 */
         current.layer.css('z-index',10);
         
         /* 他のスライドレイヤを全て削除 */
         $('.mosaic-slide').not(current.layer).remove();
      }
      /* グリッド生成 */
      var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:10,cols:10,image:slides[id-1]}));
      /* 現在のスライドを背後に移動 */
      newLayer.css('z-index',1);
      $('#mosaic-slideshow').append(newLayer);
      if(current.layer){
         /* 現在のスライドの各タイルを非表示にし、新しいスライドを表示 */
         $('.tile',current.layer).each(function(i){
            var tile = $(this);
            setTimeout(function(){
               tile.css('visibility','hidden');
            },i*10);
         })
      }
      /* 現在のオブジェクトに現在のIDと新レイヤの要素を追加 */
      current.id = id;
      current.layer = newLayer;
   }
   /* 次へ移動 */
   function next(){
      if(current.id)   {
         transition(current.id%slides.length+1);
      }
   }
   /* 前へ移動 */
   function prev(){
      if(current.id)   {
         transition((current.id+(slides.length-2))%slides.length+1);
      }
   }
   /* タイルのサイズ */
   var tabwidth=31, tabheight=31;
      /* グリッド表示処理 */
      function generateGrid(param){
         /* スライド画像の各タイルをグリッド表示 */
         /* Creating an empty jQuery object: */
         var elem = $([]),tmp;
         for(var i=0;i<param.rows;i++){
            for(var j=0;j<param.cols;j++){
               tmp = $('<div>', {
                     "class":"tile",
                     "css":{
                        "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
                     }
               });
               /* jQueryオブジェクトにタイルを追加 */
               elem = elem.add(tmp);
            }
            /* 各行の終わりでまわり込み解除 */
            elem = elem.add('<div class="clear"></div>');
         }
         return elem;
      }
      </script>
      <!-- CSS -->
      <link href="/content/lib/jquery/galleria.css" rel="stylesheet" type="text/css">
      <style media="screen,projection" type="text/css">
         #main {
            width:418px; height:418px;
         }
         #mosaic-slideshow{
            /* The slideshow container div */
            width:418px; height:418px;
            margin:0 auto;
            position:relative;
            overflow:hidden;
         }
         .mosaic-slide {
            /* This class is shared between all the slides */
            position:absolute;
            top:25px; left:40px;
            border:10px solid #555;
            border-width:10px 6px 6px 10px;
         }
         .tile{
            /* The individual tiles */
            width:31px; height:31px;
            float:left;
            border:1px solid #555;
            border-width:0 1px 1px 0;
            background-color:#555;
         }
         .arrow{
            /* The prev/next arrows */
            width:35px; height:70px;
            background:url("/content/img/ajax/mosaic_arrows.png") no-repeat;
            position:absolute;
            cursor:pointer;
            top:50%;
            margin-top:-35px;
         }
         .arrow.left { left:0; background-position:center top; }
         .arrow.left:hover { background-position:center -70px; }
         .arrow.right { right:0; background-position:center -140px; }
         .arrow.right:hover { background-position:center -210px; }
         .clear { clear:both; }
         #mosaic-slideshow img {
            width:306px; height:306px;
         }
       </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>instagr.amのRSSをモザイクギャラリー表示してみました。</p>
         <p>参照:<a href='http://rss.stagram.tk/'>RSS.stagram</a>(instagr.amのRSS取得)、<a href='http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/' target='_blank'>Making a Mosaic Slideshow With jQuery & CSS</a>(モザイクギャラリー)</p>
<!-- CODE -->
<div id="main">   <div id="mosaic-slideshow">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
    </div>
</div>
<!-- / CODE -->
      </div>
   </body>
</html>