创建一个可调大小的图片网格系统(译)

创建一个可调大小的图片网格系统

像iPhoto和Picasa这样的桌面应用可以用一个简单的滑动条改变图片网格的大小, 但现在, 不只是它们可以做到了. 感谢CSS和jQuery UI, 流体图片网格可以在网页上实现了. ( 看一看最终的效果吧
.)

1. 创建网格

首先我们创建一个静态的图片网格. 我准备了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>

[/code]

然后,
我们使这些li浮动, 这样它们就会换行, 同时给它们的右侧和底部加一些白边. 当图片水平,竖直都居中的排列在网格中时是很好看的.
所以我们可以为图片设置宽, 高, 行距, 并在ul标签上声明text-align:center,
在图片上声明vertical-align:middle(更多关于这方面的技术请看iBloom的文章
).

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;

}

例1: 基础的图片网格.(这个时候图片有点大, 但我们一会儿会解决.)

Demo1 :http://demos.webdesignledger.com/jquery_image_grid/example1.htm

2. 爱上em

这是最令人兴奋的一
个部分. 还记得em这个单位么?一个em等于当前字体大小. 所以如果字体大小是10像素,
那么1em也是10像素.这个小单位就是我们的神奇要素. 我们接下来要做的是用em而不是像素来设定图片以及它们父级li的宽高.
我们会用jQuery测量每个图片的像素大小, 然后把结果转换成以em为单位的尺寸, 在用内联CSS把这些新尺寸加到每一张图片上.

$(document).ready(initializeGrid);

function initializeGrid() {

$("ul#grid li img").each(function() {

var width = $(this).width() / 100 + "em";

var height = $(this).height() / 100 + "em";

$(this).css("width",width);

$(this).css("height",height);

});

}

[/code]

你会发现我们用宽和高分别除以100得到新尺寸. 也就是说如果字体大小设置为100像素, 宽和高就是5em. 在这个例子里, 我们把字体大小设置为50像素. 同时, 我们把li的宽, 高, 行距从500px转换为5em.

ul#grid li {

...

font-size: 50px;

width: 5em;

height: 5em;

line-height: 5em;

}

3. 添加滑动条

jQuery UI
提供了一个轻量级的滑动条, 我们可以把它和li的字体大小绑定. 也许你猜到了: 当字体变大时, 图片变大; 变小时, 图片缩小. 很灵活, 对么?

创建滑动条的第一步是要包含jQuery和jQuery UI的JavaScript文件, 还有jQuery UI的CSS文件.

< link rel="stylesheet" href="ui.all.css" type="text/css">

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

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

然后我们为滑动条写一些简单的HTML:

< div id="grid_slider">

< div class='ui-slider-handle'>< /div>

< /div>

我们还要初始化滑动条, 比如调用一个叫initializeGrid()的方法. 设置最大值为100, 最小值为10, 初始化的值设置为50.

$("#grid_slider").slider({

value: 50,

max: 100,

min: 10,

slide: function(event, ui) {

$('ul#grid li').css('font-size',ui.value+"px");

}

});

转眼我们就有了这样一个可以自由伸展的图片网格, 并且对于浏览器来讲它是轻量级的.

最终效果：http://demos.webdesignledger.com/jquery_image_grid/example2.htm

原文出处: http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery