lightboxで文字をクリックしたら画像を表示させる
一般的に使われているのはサムネイル画像をクリックすると拡大画像が表示されるというもの。
ただ、今回は文字をクリックすると画像が表示されるようにしたかった。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <script type="text/javascript" src="http://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=http://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やjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...
-
-
PHPでコマンドを実行して画像を加工
PHPで画像をリサイズしたりサムネイルを作ろうとすると、 ソースが長くなって面倒 ...
-
-
PHPで画像の削除
やりたい事↓↓ --------------- 画像の削除。削除ボタンを押すと「 ...
-
-
画像をアップロードすると複数サムネイルを生成する方法
フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...
-
-
画像をサムネイル⇔クリックで拡大(lightbox)
画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
独自タグから
タグへの変換function
独自タグは##IMG1##みたいな感じ。 画像ファイル名は「ファイルパス/seq ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
-
画像登録用のfunction
<?php /****** 画像アップロード用function 画像送付側 ...