このエントリーをはてなブックマークに追加

クリック型スクリーンギャラリー（2）/Photo Gallery #05

このサンプルは、シングルイメージまたはイメージをグループ化してWebページに表示します。
イメージのサムネイルをクリックするとイメージを拡大して表示します。
拡大表示されたイメージを閉じるには[X]又は外枠をクリックします。
イメージの右側にマウスを移動すると[右矢印]、左側にマウスを移動すると[左矢印]ボタンが表示されますのでイメージを自由に切り替えることができます。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / style.css
　　　 | 　　 　　　 gallery05.css
　　　 |
　　　 +-- js / jquery-1.3.2.min.js
　　　 | 　　　 　 jquery.easing.1.3.js
　　　 | 　　　 　 jquery.fancybox-1.2.1.pack.js
　　　 |
　　　 +-- images /fancy_progress.png
　　　 　　　　　　　　　 fancy_closebox.png
　　　 　　　　　　　　 　fancy_left.png
　　　 　　　　　　　　　 fancy_right.png
　　　 　　　　　　　　　 fancy_title_left.png
　　　 　　　　　　　　　 fancy_title_right.png
　　　 　　　　　　　　　 fancy_title_main.png
　　　 　　　　　　　　　 fancy_shadow_e.png
　　　 　　　　　　　　　 fancy_shadow_n.png
　　　 　　　　　　　　　 fancy_shadow_ne.png
　　　 　　　　　　　　　 fancy_shadow_nw.png
　　　 　　　　　　　　　 fancy_shadow_s.png
　　　 　　　　　　　　　 fancy_shadow_se.png
　　　 　　　　　　　　　 fancy_shadow_sw.png
　　　 　　　　　　　　　 fancy_shadow_w.png
　　　 　　　　　　　　　 fancy_loading.gif
　　　 　　　　　　　　　 1_s.jpg
　　　 　　　　　　　　　 1_b.jpg
　　　 　　　　　　　　　 2_s.jpg
　　　 　　　　　　　　　 2_b.jpg
　　　 　　　　　　　　　 3_s.jpg
　　　 　　　　　　　　　 3_b.jpg
　　　 　　　　　　　　　 4_s.jpg
　　　 　　　　　　　　　 4_b.jpg
　　　 　　　　　　　　　 5_s.jpg
　　　 　　　　　　　　　 5_b.jpg
　　　 　　　　　　　　　 6_s.jpg
　　　 　　　　　　　　　 6_b.jpg
　　　 　　　　　　　　　 7_s.jpg
　　　 　　　　　　　　　 7_b.jpg
　　　 　　　　　　　　　 8_s.jpg
　　　 　　　　　　　　　 8_b.jpg
　　　 　　　　　　　　　 9_s.jpg
　　　 　　　　　　　　　 9_b.jpg

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

<a class="large" rel="group(グループ名)" title="タイトル 1(写真画像タイトル)" href="images/1_b.jpg(写真画像大ファイル名)"><img class="smallimage" src="images/1_s.jpg(写真画像小ファイル名)" /></a>

  • <div id="wrap">
  • <a class="large" rel="group" title="タイトル 1"
  • href="images/1_b.jpg"><img class="smallimage" src="images/1_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 2"
  • href="images/2_b.jpg"><img class="smallimage" src="images/2_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 3"
  • href="images/3_b.jpg"><img class="smallimage" src="images/3_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 4"
  • href="images/4_b.jpg"><img class="smallimage" src="images/4_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 5"
  • href="images/5_b.jpg"><img class="smallimage" src="images/5_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 6"
  • href="images/6_b.jpg"><img class="smallimage" src="images/6_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 7"
  • href="images/7_b.jpg"><img class="smallimage" src="images/7_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 8"
  • href="images/8_b.jpg"><img class="smallimage" src="images/8_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 9"
  • href="images/9_b.jpg"><img class="smallimage" src="images/9_s.jpg" /></a>
  • </div>

【style.css】

（Gallery #05デモでは全幅500pxに設定してあります。

  • #wrap{
  • width: 500px;
  • margin: 20px auto;
  • }
  • .smallimage {
  • background-color: #fff;
  • border: 1px solid #CCC;
  • padding: 3px;
  • margin: 10px 5px 0 0;
  • }

【gallery05.css】

  • div#fancy_overlay {
  • position: fixed;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • background-color: #666;
  • display: none;
  • z-index: 30;
  • }
  • * html div#fancy_overlay {
  • position: absolute;
  • height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
  • }
  • div#fancy_wrap {
  • text-align: left;
  • }
  • div#fancy_loading {
  • position: absolute;
  • height: 40px;
  • width: 40px;
  • cursor: pointer;
  • display: none;
  • overflow: hidden;
  • background: transparent;
  • z-index: 100;
  • }
  • div#fancy_loading div {
  • position: absolute;
  • top: 0;
  • left: 0;
  • width: 40px;
  • height: 480px;
  • background: transparent url('../images/fancy_progress.png') no-repeat;
  • }
  • div#fancy_loading_overlay {
  • position: absolute;
  • background-color: #FFF;
  • z-index: 30;
  • }
  • div#fancy_loading_icon {
  • position: absolute;
  • background: url('../images/fancy_loading.gif') no-repeat;
  • z-index: 35;
  • width: 16px;
  • height: 16px;
  • }
  • div#fancy_outer {
  • position: absolute;
  • top: 0;
  • left: 0;
  • z-index: 90;
  • padding: 18px 18px 33px 18px;
  • margin: 0;
  • overflow: hidden;
  • background: transparent;
  • display: none;
  • }
  • div#fancy_inner {
  • position: relative;
  • width:100%;
  • height:100%;
  • border: 1px solid #BBB;
  • background: #FFF;
  • }
  • div#fancy_content {
  • margin: 0;
  • z-index: 100;
  • position: absolute;
  • }
  • div#fancy_div {
  • background: #000;
  • color: #FFF;
  • height: 100%;
  • width: 100%;
  • z-index: 100;
  • }
  • img#fancy_img {
  • position: absolute;
  • top: 0;
  • left: 0;
  • border:0;
  • padding: 0;
  • margin: 0;
  • z-index: 100;
  • width: 100%;
  • height: 100%;
  • }
  • div#fancy_close {
  • position: absolute;
  • top: -12px;
  • right: -15px;
  • height: 30px;
  • width: 30px;
  • background: url('../images/fancy_closebox.png') top left no-repeat;
  • cursor: pointer;
  • z-index: 181;
  • display: none;
  • }
  • #fancy_frame {
  • position: relative;
  • width: 100%;
  • height: 100%;
  • display: none;
  • }
  • #fancy_ajax {
  • width: 100%;
  • height: 100%;
  • overflow: auto;
  • }
  • a#fancy_left, a#fancy_right {
  • position: absolute;
  • bottom: 0px;
  • height: 100%;
  • width: 35%;
  • cursor: pointer;
  • z-index: 111;
  • display: none;
  • background-image : url(http:data:image/gif);base64,AAAA);
  • outline: none;
  • }
  • a#fancy_left {
  • left: 0px;
  • }
  • a#fancy_right {
  • right: 0px;
  • }
  • span.fancy_ico {
  • position: absolute;
  • top: 50%;
  • margin-top: -15px;
  • width: 30px;
  • height: 30px;
  • z-index: 112;
  • cursor: pointer;
  • display: block;
  • }
  • span#fancy_left_ico {
  • left: -9999px;
  • background: transparent url('../images/fancy_left.png') no-repeat;
  • }
  • span#fancy_right_ico {
  • right: -9999px;
  • background: transparent url('../images/fancy_right.png') no-repeat;
  • }
  • a#fancy_left:hover {
  • visibility: visible;
  • }
  • a#fancy_right:hover {
  • visibility: visible;
  • }
  • a#fancy_left:hover span {
  • left: 20px;
  • }
  • a#fancy_right:hover span {
  • right: 20px;
  • }
  • .fancy_bigIframe {
  • position: absolute;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • background: transparent;
  • }
  • div#fancy_bg {
  • position: absolute;
  • top: 0; left: 0;
  • width: 100%;
  • height: 100%;
  • z-index: 70;
  • border: 0;
  • padding: 0;
  • margin: 0;
  • }
  • div.fancy_bg {
  • position: absolute;
  • display: block;
  • z-index: 70;
  • border: 0;
  • padding: 0;
  • margin: 0;
  • }
  • div.fancy_bg_n {
  • top: -18px;
  • width: 100%;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_n.png') repeat-x;
  • }
  • div.fancy_bg_ne {
  • top: -18px;
  • right: -13px;
  • width: 13px;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_ne.png') no-repeat;
  • }
  • div.fancy_bg_e {
  • right: -13px;
  • height: 100%;
  • width: 13px;
  • background: transparent url('../images/fancy_shadow_e.png') repeat-y;
  • }
  • div.fancy_bg_se {
  • bottom: -18px;
  • right: -13px;
  • width: 13px;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_se.png') no-repeat;
  • }
  • div.fancy_bg_s {
  • bottom: -18px;
  • width: 100%;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_s.png') repeat-x;
  • }
  • div.fancy_bg_sw {
  • bottom: -18px;
  • left: -13px;
  • width: 13px;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_sw.png') no-repeat;
  • }
  • div.fancy_bg_w {
  • left: -13px;
  • height: 100%;
  • width: 13px;
  • background: transparent url('../images/fancy_shadow_w.png') repeat-y;
  • }
  • div.fancy_bg_nw {
  • top: -18px;
  • left: -13px;
  • width: 13px;
  • height: 18px;
  • background: transparent url('../images/fancy_shadow_nw.png') no-repeat;
  • }
  • div#fancy_title {
  • position: absolute;
  • bottom: -33px;
  • left: 0;
  • width: 100%;
  • z-index: 100;
  • display: none;
  • }
  • div#fancy_title div {
  • color: #FFF;
  • font: bold 12px Arial;
  • padding-bottom: 3px;
  • }
  • div#fancy_title table {
  • margin: 0 auto;
  • }
  • div#fancy_title table td {
  • padding: 0;
  • vertical-align: middle;
  • }
  • td#fancy_title_left {
  • height: 32px;
  • width: 15px;
  • background: transparent url(../images/fancy_title_left.png) repeat-x;
  • }
  • td#fancy_title_main {
  • height: 32px;
  • background: transparent url(../images/fancy_title_main.png) repeat-x;
  • }
  • td#fancy_title_right {
  • height: 32px;
  • width: 15px;
  • background: transparent url(../images/fancy_title_right.png) repeat-x;
  • }

【Sample Code】

  • <!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>
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  • <title>フォト ギャラリー サンプル #05</title>
  • <link href="css/style.css" rel="stylesheet" type="text/css" />
  • <link href="css/gallery05.css" rel="stylesheet" type="text/css" media="screen" />
  • <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  • <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  • <script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
  • <script type="text/javascript">
  • $(function() {
  • $('a.large').fancybox();
  • });
  • </script>
  • </head>
  • <body>
  • <div id="wrap">
  • <a class="large" rel="group" title="タイトル 1"
  • href="images/1_b.jpg"><img class="smallimage" src="images/1_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 2"
  • href="images/2_b.jpg"><img class="smallimage" src="images/2_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 3"
  • href="images/3_b.jpg"><img class="smallimage" src="images/3_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 4"
  • href="images/4_b.jpg"><img class="smallimage" src="images/4_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 5"
  • href="images/5_b.jpg"><img class="smallimage" src="images/5_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 6"
  • href="images/6_b.jpg"><img class="smallimage" src="images/6_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 7"
  • href="images/7_b.jpg"><img class="smallimage" src="images/7_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 8"
  • href="images/8_b.jpg"><img class="smallimage" src="images/8_s.jpg" /></a>
  • <a class="large" rel="group" title="タイトル 9"
  • href="images/9_b.jpg"><img class="smallimage" src="images/9_s.jpg" /></a>
  • </div>
  • </body>
  • </html>

* FancyBox - simple and fancy jQuery plugin
* Examples and documentation at: fancy.klade.lv/
* Version: 1.2.1 (13/03/2009)
* Copyright (c) 2009 Janis Skarnelis
* Licensed under the MIT License: en.wikipedia.org wiki MIT_License
* Requires: jQuery v1.3+

Copyright(C)2009 My Island All Rights Reserved.