無料ブログ「rentafree.net」の管理人ブログ

画像ポップアップ機能つくりました

ブログに画像ポップアップ機能作りました。

<img>にdata-popup属性でポップアップする画像URLを付けるとクリックでポップアップします。

スクリプトが3KB近くになったんで、
画像遅延ロードと合わせて、不要ならロードされない別スクリプト化しました。

画像が複数の時は、「Prev」「Next」みたいにしようと思ってたんですが、
めんどいのと、
ない方がいい気がしたんで機能付けませんでした。
ポップアップしたら、どこかクリックしたら閉じるだけ。

↓サンプルHTML↓
<img style="width: 320px; height: 240px;" src="http://file1.rentafree.net/188" data-popup="http://file1.rentafree.net/188" alt="サンプル">
↓サンプル表示↓
サンプル

詳細はこちらを確認してください。

サンプル画像は、ここのものを使わせてもらいました。