Highside¤ÈFC2blog¤ÎÁêÀ¤Ë¤Ä¤¤¤Æ
·ëÏÀ¤«¤é¸À¤¦¤È¡¤¼ÂºÝÌäÂêHighslide¤È¤ÎÁêÀ¤Ï¤¢¤Þ¤ê¤è¤¯¤Ê¤¤¤Ç¤¹¡£FC2¥Ö¥í¥°¤Ç¤Ï¥¢¥Ã¥×¥í¡¼¥É»þ¤Ë¥Õ¥©¥ë¥À¤òºî¤ì¤Þ¤»¤ó¡£¤³¤ì¤¬¥Í¥Ã¥¯¤È¤Ê¤Ã¤Æ¤¤¤Þ¤¹¡£
¤¿¤À¤·¡¤Æ°¤«¤Ê¤¤¤È¤¤¤¦¤ï¤±¤Ç¤Ï¤Ê¤¯¡¤Æ°¤«¤¹¤¿¤á¤Ë¿¾¯Ï«ÎϤ¬É¬ÍפÀ¤È¤¤¤¦¤À¤±¤ÎÏäʤΤǡ¤Å¬Àڤ˥«¥¹¥¿¥Þ¥¤¥º¤·¤Æ¤ä¤ì¤ÐÌäÂê¤Ï¤Ê¤¤¤Ç¤¹¡£
¤¿¤ÀÀäÂФ˥¯¥ê¥¢¤Ç¤¤Ê¤¤ÌäÂê¤È¤·¤Æ¡¤¸½ºßFC2¥Ö¥í¥°¤Ë³ÈÄ¥»Òcur¤Î¥Õ¥¡¥¤¥ë¤Ï¥¢¥Ã¥×¤Ç¤¤Ê¤¤¤¿¤á¡¤Ãî´ã¶À¥«¡¼¥½¥ë¤Ï»È¤¨¤Þ¤»¤ó¡£
¤½¤ì¤Ç¤Ï¡¤¤È¤ê¤¢¤¨¤ºµ¡Ç½¤ò¥Õ¥ë¤Ë»È¤¦¤¿¤á¤Ë¤Ï¿§¡¹¤ÈÌÌÅÝ»ö¤¬Â¿¤¤¤Î¤Ç¡¤¤Þ¤º¤Ï¡Ö¤½¤ì¤Ã¤Ý¤¯¡×ư¤«¤¹¤¿¤á¤À¤±¤Ë¥«¥¹¥¿¥Þ¥¤¥º¤·¤Æ¤¤¤¤Þ¤·¤ç¤¦¡£
¤Á¤Ê¤ß¤Ë»ä¤¬¥À¥¦¥ó¥í¡¼¥É¤·¤¿»þÅÀ¤Ç¤Ï¡¤¥Ð¡¼¥¸¥ç¥ó2.2.8¤Ç¤·¤¿¡£Â¿Ê¬Â礤ʰ㤤¤Ï¤Ê¤¤¤È»×¤ï¤ì¤Þ¤¹¡£
¥À¥¦¥ó¥í¡¼¥É
¤Þ¤º¡¤Highslide¤Î¥µ¥¤¥È ¤ÇHighslide¤ò¥À¥¦¥ó¥í¡¼¥É¤·¤Þ¤¹¡£What do you intend to use Highslide JS for? ¤È¤¤¤¦¤ï¤±¤Ê¤Î¤Ç¤¹¤¬¡¤ÍפϾ¦ÍÑÍøÍѤ˴ؤ·¤Æ¤Ï»ÈÍÑÎÁ¤¬¤«¤«¤ê¤Þ¤¹¡£
- A personal website, educational site or other non-commercial use (free).
- A commercial or company website ($30).
¤Î¤´¼«Ê¬¤ËŬ¤·¤¿Êý¤òÁª¤ó¤Ç¥À¥¦¥ó¥í¡¼¥É¤·¤Æ¤«¤é²òÅष¤Æ¤¯¤À¤µ¤¤¡£Îã¤Ë¤è¤Ã¤Æ²òÅह¤ë¤È¤¡Ö³ÈÄ¥»Ò¤¬Æó½Å¡×¤È¤«Ê¸¶ç¤ò¸À¤ï¤ì¤ë¤«¤â¤·¤ì¤Þ¤»¤ó¤¬Âç¾æÉפǤ¹¡£
¥¢¥Ã¥×¥í¡¼¥É
¤È¤ê¤¢¤¨¤º¤½¤ì¤Ã¤Ý¤¯Æ°¤¯¤³¤È¤òÌÜɸ¤ËÏäò¿Ê¤á¤Þ¤¹¡£
FC2¥Ö¥í¥°¤Ë¥í¥°¥¤¥ó¤·¤Æ¡¤¡Ö¥Õ¥¡¥¤¥ë¥¢¥Ã¥×¥í¡¼¥É¡×¤Ç°Ê²¼¤Î¥Õ¥¡¥¤¥ë¤ò¥¢¥Ã¥×¤·¤Æ¤¯¤À¤µ¤¤¡£
highslide / highslide.js
highslide / highslide-packed.js
ÅöÁ³¤Ê¤¬¤éFC2¥Ö¥í¥°¤Ç¤Ï¥Õ¥©¥ë¥À¤Ïºî¤ì¤Þ¤»¤ó¤Î¤Ç¡¤¤½¤Î¤Þ¤Þ¥¢¥Ã¥×¤¹¤ë¤À¤±¤Ç¤è¤¤¤Ç¤¹¡£
¥Æ¥ó¥×¥ì¡¼¥È¤Î½¤Àµ
¡Ö¥Æ¥ó¥×¥ì¡¼¥È¤ÎÀßÄê¡×¤Þ¤¿¤Ï¡Ö¥Ö¥í¥°¥Ç¥¶¥¤¥ó¤ÎÀßÄê¡×¤Ç¡¤¸½ºß»ÈÍÑÃæ¤Î¥Æ¥ó¥×¥ì¡¼¥È¤ò½¤Àµ¤·¤Þ¤¹¡£
¤Þ¤º¡¤¡ÖHTML¤ÎÊÔ½¸¡×¤Ë¤Æ¡¤<head> ¡Á </head>´Ö¤Ë°Ê²¼¤Î¹Ô¤òÄɲä·¤Þ¤¹¡£
<script type="text/javascript" src="<%url>file/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<%url>file/';
hs.outlineType = null;
window.onload = function() {
hs.preloadImages();
}
</script>
¤µ¤é¤Ë¡¤<body>¤Îľ¸å¤Ë°Ê²¼¤òÄɲä·¤Þ¤¹¡£
<div id="highslide-container"></div>
¤Ê¤ª¡¤FC2¥¢¥¯¥»¥¹²òÀϤòÀßÃÖ¤·¤Æ¤¤¤ë¾ì¹ç¤Ç¤Ï¡¤<body>ľ¸å¤Ï¥¢¥¯¥»¥¹²òÀÏÍѤΥ¿¥°¤òÆþÎϤµ¤ì¤Æ¤¤¤ë¤«¤È»×¤¤¤Þ¤¹¤¬¡¤¥¢¥¯¥»¥¹²òÀÏÍѤΥ¿¥°¤Î¸å¤Ë¾åµ1¹Ô¤òÃÖ¤±¤ÐÌäÂê¤Ê¤¤¤è¤¦¤Ç¤¹¡£
¼¡¤Ë¡¤¡Ö¥¹¥¿¥¤¥ë¥·¡¼¥È¤ÎÊÔ½¸¡×¤Ë¤Æ¡¤°Ê²¼¤òÄɲä·¤Þ¤¹¡£
.highslide {
/* cursor: url(highslide/graphics/zoomin.cur), pointer; */
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-style: 'MS Sans Serif';
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
¸½¹Ô¤Î¥¹¥¿¥¤¥ë¥·¡¼¥È¤ÎºÇ¸å¤ËÉÕ¤±Â¤·¤Æ¤ª¤±¤ÐOK¤Ç¤¹¡£
°Ê¾å¤ÇHighslide¤¬°ì±þư¤¯¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¥ê¥ó¥¯¤Î½ñ¤Êý
¤Ç¤Ï¡¤¥¨¥ó¥È¥ê¤ò½ñ¤¯¤È¤¤Ë¤É¤Î¤è¤¦¤Ë¤¹¤ì¤Ð¤è¤¤¤Î¤«¤òÀâÌÀ¤·¤Þ¤¹¡£
º£¤Þ¤ÇÄ̤ê¤Ë²èÁü¤òÆþ¤ì¤ë¤È¡¤
<a href="http://...">
<img src="http://..." alt="..." />
</a>
¤È¤¤¤Ã¤¿¶ñ¹ç¤Ë¤Ê¤ë¤«¤È»×¤¤¤Þ¤¹¡£¤³¤ì¤ò¡¤¼¡¤Î¤è¤¦¤Ë½¤Àµ¤·¤Þ¤¹¡£
<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>
onkeypress="..." ¤Ï¤Ê¤¯¤Æ¤â¤¤¤±¤Þ¤¹¤¬¡¤¤¢¤ëÊý¤¬¤è¤êÎɤ¤¤Ç¤·¤ç¤¦¡¤¤È¤¤¤¦¤³¤È¤Ç¡£
¥¥ã¥×¥·¥ç¥ó¤ÎÉÕ¤±Êý
³ÈÂ礷¤¿²èÁü¤Î²¼¤Ë¥³¥á¥ó¥È¤òÆþ¤ì¤ë¤Ë¤Ï¤É¤Î¤è¤¦¤Ë¤¹¤ì¤Ð¤è¤¤¤Î¤«¤òÀâÌÀ¤·¤Þ¤¹¡£
¤µ¤Ã¤¤Î
<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>
¤Ë¡¤°Ê²¼¤Î¤è¤¦¤ËÄɲä·¤Þ¤¹¡£
<a href="http://..." id="gazou" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>
<div class="highslide-caption" id="caption-for-gazou">¤³¤³¤Ë¥³¥á¥ó¥È</div>
¤³¤Î¾ì¹ç¤Ç¤¢¤ì¤Ð¡¤²èÁü¤ò³ÈÂçɽ¼¨¤·¤¿¤È¤¡Ö¤³¤³¤Ë¥³¥á¥ó¥È¡×¤È²¼¤Ëɽ¼¨¤µ¤ì¤ë¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
id="gazou"
¤È
id="caption-for-gazou"
¤ËÃí°Õ¤·¤Æ¤¯¤À¤µ¤¤¡£¤³¤³¤Î¡Ögazou¡×¤òŬÅö¤Ë½ñ¤´¹¤¨¤ë¤³¤È¤Ç¿§¡¹¤Î¥³¥á¥ó¥È¤òÊÌ¡¹¤ËÉÕ¤±¤ë¤³¤È¤¬¤Ç¤¤Þ¤¹¡£
°Ê¾å¤Ç¤¹¡£¥Õ¥ëµ¡Ç½¤Î¤¿¤á¤Î¥«¥¹¥¿¥Þ¥¤¥ºÊýË¡¤Ï¤â¤¦¤·¤Ð¤é¤¯¤ªÂÔ¤Á¤¯¤À¤µ¤¤¡£