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"つけるだけでいけた。
サンプルページ
関連記事
-
-
ajaxを使わずに非同期っぽくsubmitする
ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...
-
-
画像アップの注意(パーミッション)
家と仕事場でここのところ画像関係を使っており、 まったく関係ないサーバーにアップ ...
-
-
JavaScriptで画像に光沢をつける(glossy.js)
凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...
-
-
独自タグを変換して画像を表示させる
やりたい事↓↓ ----- {$IMG1}～{$IMG5}までの独自タグがある。 ...
-
-
PHPで画像のフォーマット(拡張子)の変換
画像のアップロードでjpg/png/gif形式を受け付けつつ、 最終的にjpgで ...
-
-
faviconの取得と生成
AというサイトのfaviconをBというサイトで使いたかった。 ただ、favic ...
-
-
jQueryプラグイン使用時の注意
最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...
-
-
PHPで画像にモザイクをかけて保存
やりたかった事はPHPで ・モザイク処理 ・元の画像とは別にファイル名をつけて保 ...
-
-
ローディングアイコンの自動生成
オートページャーを作成中にローディングしている アイコンが必要になったのでメモ。 ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...