勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Lightboxで文字をクリックしたら画像を表示させる方法

   2024/02/02  JavaScript

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"つけるだけでいけた。

 - JavaScript

  関連記事

PHPで画像を比較して類似度を算出する「image-comparator」ライブラリの利用方法
PHPで画像を比較して類似度を算出する「image-comparator」ライブラリの利用方法

PHPで画像の類似度を計測したい。ただ、そのためのロジックが全く分からないためラ ...

PHPで画像にモザイクをかけて保存
PHPで画像にモザイクをかけて保存

やりたかった事はPHPで ・モザイク処理 ・元の画像とは別にファイル名をつけて保 ...

スマホでフォームの画像アップロード部分でカメラを起動させる方法
スマホでフォームの画像アップロード部分でカメラを起動させる方法

formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...

フォームからアップロードした画像にPHPでロゴ画像(透かし)を追加する方法
フォームからアップロードした画像にPHPでロゴ画像(透かし)を追加する方法

フォームから送られてきた画像に対してサイトロゴみたいなロゴ画像を右下等、指定の位 ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...