Lightboxで文字をクリックしたら画像を表示させる方法
2024/02/02
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックすると拡大画像が表示されるというもの。ただ、今回は文字をクリックすると画像が表示されるようにしたかった。以下にサンプルとソースコードのメモ。
サンプルページ
https://taitan916.info/sample/lightbox/
ソースコード
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./lightbox/js/lightbox.min.js"></script>
<link href="./lightbox/css/lightbox.css" rel="stylesheet">
<style>
img.lb-image{width:300px !important; height:300px !important;}
</style>
</head>
<body>
<a href="http://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=https://taitan916.info/blog/" rel="lightbox">blog</a><br />
<a href="http://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=http://google.com/" rel="lightbox">Google</a><br />
</body>
</html>
aタグにrel="lightbox"つけるだけでいけた。
関連記事
-
-
PHPでダミー画像(プレースホルダー画像)を表示する「PHP-Dummy-Image-Generator」の利用方法
先日JavaScriptでダミー画像(プレースホルダー画像)を表示する「Hold ...
-
-
JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法
あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...
-
-
PHPにて指定した画像に対して、繰り返し透かし画像処理する方法
画像素材等のサイトで無料版の画像に対して「sample」等の透かし画像処理を行っ ...
-
-
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...