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"つけるだけでいけた。
関連記事
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...