创建一个可调大小的图片网格系统(译)
创建一个可调大小的图片网格系统
像iPhoto和Picasa这样的桌面应用可以用一个简单的滑动条改变图片网格的大小, 但现在, 不只是它们可以做到了. 感谢CSS和jQuery UI, 流体图片网格可以在网页上实现了. ( 看一看最终的效果吧 .)
1. 创建网格
首先我们创建一个静态的图片网格. 我准备了6张照片, 把它们裁剪成宽高不大于500像素的图片. 我们会生成一个ul列表, 把图片放在li标签里.
[code]
< 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把这些新尺寸加到每一张图片上.
[code]
$(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