【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;
}
【javascript】jquery-1.3.2.min.jsjquery.easing.1.3.jsjquery.fancybox-1.2.1.pack.js
【images】fancy_progress.pngfancy_closebox.pngfancy_left.pngfancy_right.pngfancy_title_left.pngfancy_title_right.pngfancy_title_main.pngfancy_shadow_e.pngfancy_shadow_n.pngfancy_shadow_ne.pngfancy_shadow_nw.pngfancy_shadow_s.pngfancy_shadow_se.pngfancy_shadow_sw.pngfancy_shadow_w.png▼デモで使用しているサンプル画像です。1_s.jpg1_b.jpg2_s.jpg2_b.jpg3_s.jpg3_b.jpg4_s.jpg4_b.jpg5_s.jpg5_b.jpg6_s.jpg6_b.jpg7_s.jpg7_b.jpg8_s.jpg8_b.jpg9_s.jpg9_b.jpg
【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>お役立ちツール
" カラーコード作成ツール
" ホームページ診断ツールのご紹介
" CSS 検証サービス
* 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