1. ¥À¥¦¥ó¥í¡¼¥É
¤µ¤Æ¤Þ¤º¤Ï Litebox¤Î¥µ¥¤¥È ¤Ç¡¤litebox-1.0.zip¤ò¥À¥¦¥ó¥í¡¼¥É¤·¤Æ¡¤²òÅष¤Þ¤¹¡£¤Á¤Ê¤ß¤Ë²òÅह¤ë¤È¤¡Ö³ÈÄ¥»Ò¤¬Æó½Å¡×¤È¤«Ê¸¶ç¤ò¸À¤ï¤ì¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¤¬Âç¾æÉפǤ¹¡£
2. ½àÈ÷
FC2¥Ö¥í¥°¤Ç¤Ï¥Õ¥©¥ë¥À¹½Â¤¤ò°Ý»ý¤Ç¤¤Ê¤¤¤Î¤Ç¡¤»È¤¦¥Õ¥¡¥¤¥ë¤À¤±¤É¤³¤«Å¬Åö¤Ë litebox-fc2 ¤Ê¤É¥Õ¥©¥ë¥À¤òºî¤Ã¤Æ°Üư¤·¤Æ¤·¤Þ¤¤¤Þ¤·¤ç¤¦¡£»È¤¦¥Õ¥¡¥¤¥ë¤È¤Ï°Ê²¼¤Î9¥Õ¥¡¥¤¥ë¤Ç¤¹¡£
js / litebox-1.0.js
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif
¤µ¤Æ¡¤Ãæ¿È¤Î½ñ¤´¹¤¨¤¬É¬ÍפǤ¹¡£
3. ¥¹¥¯¥ê¥×¥È¤ÈCSS¤Î½¤Àµ¡¦É¬¿ÜÃʳ¬
°Ê²¼¤ÎÀÖÂÀ»ú¤ÎÄ̤ê¤Ë litebox-1.0.js ¤È lightbox.css ¤ò¤½¤ì¤¾¤ì½ñ¤´¹¤¨¤Þ¤¹¡£
3.1 "litebox-1.0.js"¤Î½¤Àµ¡Ê20¹Ô¡Á¡Ë
//
// Configuration
//
var fileLoadingImage = "./file/loading.gif";
var fileBottomNavCloseImage = "./file/closelabel.gif";
var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
3.2 "lightbox.css"¤Î½¤Àµ¡Ê45¹Ô¡Á¡Ë
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }
4. ¥¹¥¯¥ê¥×¥È¤ÈCSS¤Î½¤Àµ¡¦±þÍÑÃʳ¬
¤µ¤Æ¡¤¾åµ¤Î²þ¤¤Ç¤â¤¦»È¤¦¤³¤È¤Ï²Äǽ¤Ê¤Î¤Ç¤¹¤¬¡¤¼Â¤Ï¤³¤Î¥¹¥¯¥ê¥×¥È¤Ï <a> ¤Ë rel="lightbox" ¤È½ñ¤«¤ì¤Æ¤¤¤Ê¤¤¤Èưºî¤·¤Þ¤»¤ó¡£º£¤Þ¤Ç¤Îµ»ö¤òÁ´ÉôÊÔ½¸¤·Ä¾¤¹¤È¤«¤ä¤Ã¤Æ¤é¤ì¤Þ¤»¤ó¤Î¤Ç¡¤²èÁü¥Õ¥¡¥¤¥ë¤Ø¤Î¥ê¥ó¥¯¤Ç¤¢¤ì¤Ð Litebox ¤¬Æ°ºî¤¹¤ë¤è¤¦¤Ë litebox-1.0.js ¤ò²þ¤¤·¤Þ¤·¤ç¤¦¡£²þ¤¤¹¤ë²Õ½ê¤Ï2¤«½ê¤Ç¤¹¡£
4.1 "litebox-1.0.js"¤Î½¤Àµ¡Ê126¹Ô¡Á¡Ë
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
var relAttribute = String(anchor.getAttribute('rel'));
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}
¤³¤³¤ò¡¤°Ê²¼¤Î¤è¤¦¤Ë½ñ¤´¹¤¨¤Þ¤¹¡£
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
//var relAttribute = String(anchor.getAttribute('rel'));
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}
4.2 "litebox-1.0.js"¤Î½¤Àµ¡Ê264¹Ô¡Á¡Ë
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'),
anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
¤ò°Ê²¼¤Î¤è¤¦¤Ë½ñ¤´¹¤¨¤Þ¤¹¡£
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
imageArray.push(new Array(anchor.getAttribute('href'),
anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
¤³¤ì¤Çjpeg¡¤gif¡¤png¥Õ¥¡¥¤¥ë¤Ø¤Î¥ê¥ó¥¯¤Ï Litebox ¤Ç³«¤«¤ì¤ë¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£¤Á¤Ê¤ß¤Ë¤«¤Ê¤ê¤ä¤Ã¤Ä¤±»Å»ö¤Ê¤Î¤ÇÉÔ¶ñ¹ç¤¬¤¢¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¡£¤´¼«Ê¬¤ÎÀÕǤ¤Ç¤É¤¦¤¾¡£¡Ê¤½¤â¤½¤âjavascript¤ÎÃμ±¤È¤¤¤¨¤Ð´Ø¿ô¡©¥á¥½¥Ã¥É¡©¥×¥í¥Ñ¥Æ¥£¡©¥×¥í¥·¡¼¥¸¥ã¤Ã¤Æ¤Ê¤ó¤À¤Ã¤±¡©¤ß¤¿¤¤¤Ê´¶¤¸¤Ç¤¹¤Î¤Ç¡Ä¡Ë
¤Ç¤Ï¡¤FC2¥Ö¥í¥°¤Ë¥í¥°¥¤¥ó¤·¤Æ¡¤¥Õ¥¡¥¤¥ë¤ò¥¢¥Ã¥×¤·¤Þ¤·¤ç¤¦¡£
5. ¥Õ¥¡¥¤¥ë¤Î¥¢¥Ã¥×¥í¡¼¥É
¡Ö¥Õ¥¡¥¤¥ë¥¢¥Ã¥×¥í¡¼¥É¡×¤Ç¡¤¾åµ9¥Õ¥¡¥¤¥ë
js / litebox-1.0.js
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif
¤ò¤¹¤Ù¤Æ¥¢¥Ã¥×¥í¡¼¥É¤·¤Þ¤¹¡£
6. ¥Æ¥ó¥×¥ì¡¼¥È¤Î½¤Àµ
ºÇ¸å¤Ë¡¤¡Ö¥Æ¥ó¥×¥ì¡¼¥È¤ÎÀßÄê¡×¤Ç¡¤¸½ºß»ÈÍÑÃæ¤Î¥Æ¥ó¥×¥ì¡¼¥È¤ò½¤Àµ¤·¤Þ¤¹¡£¸À¤ï¤º¤â¤¬¤Ê¤Ç¤¹¤¬¡¤¥Ð¥Ã¥¯¥¢¥Ã¥×¼è¤Ã¤Æ¤ª¤¯¤ÈµÈ¤«¤È¡£
¤Þ¤º¡¤¡ÖHTML¤ÎÊÔ½¸¡×¤Ë¤Æ¡¤<head> ¡Á </head>´Ö¤Ë°Ê²¼¤Î¹Ô¤òÄɲä·¤Þ¤¹¡£
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%url>file/prototype.lite.js"></script>
<script type="text/javascript" src="<%url>file/moo.fx.js"></script>
<script type="text/javascript" src="<%url>file/litebox-1.0.js"></script>
¼¡¤Ë¡¤<body>¤ËonloadÍ×ÁǤòÄɲä·¤Þ¤¹¡£¤¿¤È¤¨¤Ð¤³¤ó¤Ê´¶¤¸¤Ç¤¹¡£
<body onload="initLightbox()">
¥Æ¥ó¥×¥ì¡¼¥È¤Ë¤è¤Ã¤Æ¤Ï¤¹¤Ç¤Ë<body>¥¿¥°¤Ë¿§¡¹½ñ¤¤¤Æ¤¢¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¤¬¡¤> ¤ÎľÁ°¤Ë onload="initLightbox()"¤òÆþ¤ì¤ì¤ÐOK¤Ç¤¹¡£
¤Ç¤¤¢¤¬¤Ã¤¿¤é˺¤ì¤º¤Ë¡Ö¹¹¿·¡×¥Ü¥¿¥ó¤ò²¡¤·¤Æ¤¯¤À¤µ¤¤¡£
¤ªÈè¤ì¤µ¤Þ¤Ç¤·¤¿¡¤°Ê¾å¤Çºî¶È´°Î»¤Ç¤¹¡£»ä¤â¤è¤¯¤ï¤«¤Ã¤Æ¤Ê¤¤¤Î¤Ç¿½¤·Ìõ¤Ê¤¤¤Ç¤¹¤¬´Ä¶¤Ë¤è¤Ã¤Æ¤Ï¤¦¤Þ¤¯¤¤¤«¤Ê¤«¤Ã¤¿¤ê¤¹¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¡£¸å¤Ï¤¯¤ì¤°¤ì¤â¥¿¥¤¥×¥ß¥¹¤Ë¤Ï¤ªµ¤¤ò¤Ä¤±¤¯¤À¤µ¤¤¡£¥³¥Ô¥Ú¿ä¾©¤Ç¤¹¡£
1·î24ÆüÄɵ¡§¤¤¤¯¤Ä¤«ÆâÍÆ¤Ë¥ß¥¹¤¬¤¢¤ê¤Þ¤·¤¿¤Î¤Ç½¤Àµ¤·¤Þ¤·¤¿¡£¿½¤·Ìõ¤¢¤ê¤Þ¤»¤ó¤Ç¤·¤¿¡£