スポンサードリンク

タイトルだけでは何言ってんだこの野郎という感じかもしれない・・・。

上にある画像の上部にスライドバーが付いていて、バーを動かすと、全体的に画像のサイズが変わると言う代物。
なかなか面白そうなのでメモしておきたい。

とりあえず動かして見るとわかります

超訳していくとこんな感じ

Create a Resizable Image Grid with jQuery

First lets begin by setting up a static image grid. I have prepared 6 photographs than have been cropped to a maximum height and width of 500 pixels. We will create a ul and place our images inside li tags

6つの写真を、最大500ピクセルにトリミングして準備する。ulを作成し、liの中に画像を入れます。

ようするにこんな感じ。

<ul id="grid">
<li><img src="1deadsea.jpg"/></li>
<li><img src="2akko.jpg"/></li>
<li><img src="3jordan.jpg"/></li>

<li><img src="4petra.jpg"/></li>
<li><img src="5pyramids.jpg"/></li>
<li><img src="6deadsea.jpg"/></li>
</ul>

そしてCSS。

ul#grid li {
list-style: none outside;
float: left;
margin-right: 20px;
margin-bottom: 20px;
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
}
ul#grid li img {
vertical-align: middle;
}

んでもってjQuery UIをそろえて、jQueryと、jQueryUIを読み込む。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>

この読み込みに感しては、jQuery系jsって、名前を変えている人と、変えない人様々いるかと思います。バージョン情報を含むタイトルを利用されている方もいるとおもいますし、GoogleAPIから提供されているjQueryを利用している人もいるかもしれない。

なので、自分の環境に合わせてこの辺は変更したほうがいいと思います。

HTML部にスライダーを追加。

<div id="grid_slider">
<div class='ui-slider-handle'></div>
</div>

そして、jQueryを記述します。
この辺はこちらのブログでは貼りませんので、以下からどうぞ。
Create a Resizable Image Grid with jQuery

わかりにくい場合は、サンプルページにて、ソースの表示をしてもらえると、非常にわかり易いかもしれません。

GooglePicasaのような感じで、作りこむとかっこよく使えそうですね。

それでは、また。