定番の「ライトボックス(lightbox」をワードプレスで試してみました。
プラグインでも数々あると思いますが、直接設置してみました。
ショートコードを用いてアップロードしたファイルをセットしています。
本来ならば画像をサムネイル用のファイルと分けるべきでしょうが、同じファイルを width で調整しています。
今回はCDNを利用して実現しています。
「参考サイト」：
ライトボックス公式サイト
lightbox2 CDNサイト
Flexbox (フレックスボックス) MDNリファレンス
特定の投稿のみCDNを読み込むように 「single.php」に記述。
|
1 2 3 4 5 6 7 8 9 |
// ---------------------------------- // 特定の投稿のみCDNを読み込むように [single.php]に記述 // ---------------------------------- if( get_the_ID() == 99999 ){ ?> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js" type="text/javascript"></script> <?php } |
function.php にファイルダウンロード用のショートコードを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//--------------------------------------------- // LightBox ショートコード //--------------------------------------------- function lightboximg($atts) { $path= "/img/flexbox"; $imgdata = get_template_directory_uri() . "$path/" . $atts[0]; return "<a href=\"$imgdata\" rel=\"lightbox[lightbox-group]\">". "<img src=\"$imgdata\" alt=\"\" class=\"item\" /></a>\n"; // サムネイルのサイズはスタイルシートで .itemに対してサイズを指定しています。 // 画像は 「Lightbox-group」でグループ化してあります。 // グループ化により 前、次の画像とリンクして画面を連動することができます。 } add_shortcode('lbimg', 'lightboximg'); |
投稿記事
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//--------------------------------------------- // ショートコードを利用してファイルを指定しています。 // サムネイル一覧がこのシートコードをファイルの数だけ記述しますが、 //--------------------------------------------- <div class="xxxxxxx" id="ltContainer"> <div>[lbimg "autum1a.jpg"]</div> <div>[lbimg "autum2a.jpg"]</div> <div>[lbimg "spring1a.jpg"]</div> <div>[lbimg "spring2a.jpg"]</div> <div>[lbimg "summer1a.jpg"]</div> <div>[lbimg "summer2a.jpg"]</div> <div>[lbimg "winter1a.jpg"]</div> <div>[lbimg "winter2a.jpg"]</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//--------------------------------------------- // display:flex, flex-wrap: wrap, justify-content: space-around および // CSSでデコレーションしてみました。 //--------------------------------------------- #ltContainer { /********************************* // flexBox は 比較的最近の技術なので、古いバージョンのブラウザでは対応していない場合があります。 // vendor-prefix を使う場合はコメントアウトを外します。 display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; *********************************/ display: flex; /********************************* -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; *********************************/ justify-content: space-around; } .item { width: 180px; margin-bottom:20px; border:10px solid #fff; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); border-radius: 1em; } .item:hover { transform: scale(1.1); /*画像の拡大率*/ transition-duration: 0.3s; /*変化に掛かる時間*/ } |