写真をふわっと拡大するライトボックス忘れてしまうので、
メモです。
必要なjqueryは、
「jquery-1.7.2.min.js」「lightbox.js」の2ファイル。
cssは「lightbox.css」です。
これをhtmlの<head>から</head>の間に
<link href="./css/lightbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
と記載。
さらに、
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.showOlderChanges').on('click', function (e) {
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
</script>
これを記載。
写真部分は
以下のように記載
<a href="./images/[クリックで表示される写真名]" rel="lightbox[photogroup]" title="[ここに記載したことがが写真のキャプションになる]" class="pc">
<img src="./images/[サムメールに使う写真]" alt="" class="[好きなクラスで]" /></a>
写真が拡大できることを示す「拡大鏡アイコン」が表示されます。
アイコンの表示もふわっとさせています。
これはcssが重要で、すべてcssでアニメーションさせます。
<style type="text/css">
.div_cat_but{
width:150px;
height:106px;
float:left;
overflow:hidden;
text-align:left;
}
.div_cat_but .mask {
width:150px;
height:106px;
text-align:left;
position:relative;
top:-114px;
left:0px;
z-index:10;
opacity: 0;
overflow:visible;
background: rgba(0,0,0,0.5);
box-sizing:border-box;
transition: all 0.8s ease-in-out;
}
.mask .info {
width:150px;
height:106px;
position:relative;
top:0px;
left:0px;
z-index:20;
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.div_cat_but:hover .mask {
opacity: 1;
background: rgba(0,0,0,0.5);
}
.mask:hover .info {
opacity:1;
transition-delay: 0.3s;
}
</style>
