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

実行結果

設置サンプル

photozou.jpの特定のアルバムのRSSフィードを取得して投稿した写真を一覧表示。サムネイルにマウスオーバーでズームインし、クリックするとphotozou.jpの写真ページに遷移します。

設置サンプルのソース

<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed.js"></script>
      <script type="text/javascript">
         $(function(){
            $.getFeed({
               /* photozou.jpの特定のアルバムのRSSフィードを取得 */
               url: "/content/lib/jquery/jfeed/proxy.php?url=http://photozou.jp/feed/photo_list/1662848/4254991.xml",
               success:function(xml){
                  /*  RSSフィードのタイトル */
                  $("#gallery h2").html("<a href='"+xml.image.link+"' class='prof'><img src='"+xml.image.url+"' /></a><a href='"+xml.link+"' class='title'>"+xml.title+"</a>");
                  if(xml.items.length<1){
                     /* 1件もない場合 */
                     $("#gallery ol").html("<li>情報がありません。</li>");
                  }else{
                     /* 写真一覧HTML生成 */
                     $(xml.items).each(function(i, item){
                        $("#gallery ol").append("<li><div class='thumb'>"+item.description+"</div>");
                     });
                  }
               }
            });
         });
      </script>
      <style type="text/css">
         #gallery {
            margin:0; padding:0;
            width:400px;
            border:1px solid #ccc;
            webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
            background:#eee;
         }
         #gallery h2 {
            margin:10px; padding:0;
            letter-spacing:-2px;
         }
         #gallery h2 .prof {
         }
         #gallery h2 .prof img {
            margin-right:10px;
            padding:2px;
            border:1px solid #ccc;
            background:#fff;
            webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
            vertical-align:middle;
         }
         #gallery ol {
            list-style:none;
            margin:5px; padding:0;
         }
         #gallery li {
            display:block;
            list-style:none;
            overflow:hidden;
            float:left;
            margin:5px; padding:0;
            border:1px solid #ccc;
            background:#fff;
            webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
            width:85px; height:85px;
         }
         #gallery li a {
            display:block;
            position:relative;
            margin:5px; padding:0;
            overflow:hidden;
            width:75px; height:75px;
         }
         #gallery li a img {
            position:absolute;
            -webkit-transition: .3s ease-in-out;
            display:block;
            width:75px; height:75px;
            overflow:hidden;
            top:0; left:0;
         }
         #gallery li a:hover img {
            width:120px; height:120px;
            top:-25px; left:-25px;
         }
      </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>photozou.jpの特定のアルバムのRSSフィードを取得して投稿した写真を一覧表示。サムネイルにマウスオーバーでズームインし、クリックするとphotozou.jpの写真ページに遷移します。</p>
<!-- CODE -->
         <div id="gallery">
            <h2></h2>
            <ol class="cf"></ol>
         </div>
<!-- CODE / -->
      </div>
   </body>
</html>