画像をクリックしてその場で拡大表示させたい
画像を拡大表示するためには「Light Box」とやらを使えばいいようなので、さっそく使ってみました。
CDNなので下準備はたった3行書けばOK
そもそもCDNが何なのかよく分かりませんが、何はともあれ headerタグの中に3行追加すればいいようなのでそれを突っ込みましょう。
私は、Wordpressのテーマ「Twenty Sixteen」を使っているので、[外観] > [テーマの編集] から「header.php 」を選択して、header内の下の方に追加します。
(真ん中の3行が追加した内容です。)
<?php wp_head(); ?> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> <?php if ( !is_user_logged_in() ) : ?>
画像を拡大するために imgタグに属性を追加
あっさりと下準備ができてしまったので、画像の方を触ってみましょう。
画像を aタグで囲って、リンクは画像のURLを指定して「data-lightbox=”20171217″」を追加します。
(20171217の部分はなんでも適当でOKです)
<a href="/image1.png" data-lightbox="20171217"> <img src="/image1.png" /> </a>
これであっさり完成です。
画像をクリックしてみましょう。
data-lightbox と data-title
画像のタイトルを表示したいときは aタグの中に「data-title=”毎日カレー日和「ナマステ」”」なんて指定しておけばOKです。
また、先ほど出てきた「data-lightbox」は、同じページ内で複数の画像を表示するときに同じ値を指定しておけば、矢印で画像を切り替えて表示させることができるそうです。
ということで、「data-lightbox」に同じ値を指定した3枚の画像を表示させてみましょう。
<a href="/image1.png" data-lightbox="20171217" data-title="毎日カレー日和「今日はカレーよ」"> <img src="/image1.png" /> </a> <a href="/image2.png" data-lightbox="20171217" data-title="毎日カレー日和「ナマステ」"> <img src="/image2.png" /> </a> <a href="/image3.png" data-lightbox="20171217" data-title="毎日カレー日和「OK」"> <img src="/image3.png" /> </a>
下の三枚の画像が矢印で切り替えられます。
ということで簡単に対応することができました。
メデタシ メデタシ。