画像をクリックしてその場で拡大表示させたい

画像を拡大表示するためには「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>

これであっさり完成です。

画像をクリックしてみましょう。

curry

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>

下の三枚の画像が矢印で切り替えられます。

curry
curry
curry

ということで簡単に対応することができました。
メデタシ メデタシ。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です