SQLの窓 イラストAC フリー素材

2013年12月14日

lightbox-2.6.min.js を使うのに、Google ドライブでホストしました。








久人ぶりに lightbox2 を見に行ったら、実装環境とかかなり変化がありまして、とりあえずダウンロードして全部そのまま Google ドライブへアップロードしました。

Google ドライブを使って WEB ページを公開する手順

記述方法も最新の datasetプロパティ を使用するようになっていました( rel="lightbox[ギャラリー]" も使えるようですが )

IE11 から利用可能になったカスタムデータ属性(datasetプロパティ)
<link href="https://googledrive.com/host/0B9Jymqpro6gSN2ttSUQxRktyZ2s/css/lightbox.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B9Jymqpro6gSN2ttSUQxRktyZ2s/js/lightbox-2.6.min.js"></script>
<a 
href="https://lh3.googleusercontent.com/-ockJe2Z1qxg/UmkiXn07cXI/AAAAAAAAQ2w/LeG04ga_h6k/s1000/1382552847536630.jpeg"
 data-lightbox="roadtrip"><img src="https://lh3.googleusercontent.com/-ockJe2Z1qxg/UmkiXn07cXI/AAAAAAAAQ2w/LeG04ga_h6k/s200/1382552847536630.jpeg" style="border: solid 0px #000000" /></a>
<a 
href="https://lh5.googleusercontent.com/-kG1CdBL0URQ/UmfPT4ki9dI/AAAAAAAAQ1U/ObGLimpi1LM/s1000/UrbanFuture4_1.jpg"
 data-lightbox="roadtrip"><img src="https://lh5.googleusercontent.com/-kG1CdBL0URQ/UmfPT4ki9dI/AAAAAAAAQ1U/ObGLimpi1LM/s200/UrbanFuture4_1.jpg" style="border: solid 0px #000000" /></a>
<br>
<a 
href="https://lh6.googleusercontent.com/-p5zol_txEGA/UmfPTqtwgEI/AAAAAAAAQ1Y/bWF-UJdFQbQ/s1000/UrbanFuture4_2.jpg"
 data-lightbox="roadtrip"><img src="https://lh6.googleusercontent.com/-p5zol_txEGA/UmfPTqtwgEI/AAAAAAAAQ1Y/bWF-UJdFQbQ/s200/UrbanFuture4_2.jpg" style="border: solid 0px #000000" /></a>
<a 
href="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s1000/UrbanFuture3_1.jpg"
 data-lightbox="roadtrip"><img src="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s200/UrbanFuture3_1.jpg" style="border: solid 0px #000000" /></a>
大きい画像は、1000px ぐらいが一番よさそうです。画面より大きくても縮小してくれますが、その場合は横スクロールが出てしまうようなので。

表示のアニメーションは昔に比べてかなりスムーズに表示されています。

jquery-1.10.2.min.js が同梱されていましたが、Google がホスティングしてる jQuery で最新を使っています( それで動作しているので )

なんか、ギャラリーにした場合、クリックした画像より以降が前もって読み込まれるみたいです(大きい画像)。Google Chrome でチェックしたのですが、ブラウザに依存する可能性はありますが、うまくできてますね。



【JavaScriptの最新記事】
posted by at 2013-12-14 01:45 | JavaScript | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX