我想创建一个从网页上的用户上传的图像缩略图。我想创建一个图片库,在那里我可以显示所有的图像预览缩略图,当用户点击时,他可以看到放大的图像。
是否可以这样做,这样页面就不会变得很重
发布于 2010-08-01 16:30:01
您可能应该缓存缩略图图像,但要创建它们,请参见:
发布于 2014-08-31 19:47:28
您必须为缩略图的图像标签设置一个类。如下所示:
.thumbnail {
box-shadow: 0 0 7px #fff;
cursor: pointer;
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: -35px;
width: 70px;
border: 3px solid #ff``f;
border-radius: 3px;
}
举个例子:
<img id="Image1" class="thumbnail" src="..." .../>
所有的图片都可以用css来调整大小。对于创建放大的图像,您必须使用jquery Modal。对于Modal,请阅读此链接:http://www.jacklmoore.com/colorbox/,您必须创建一个jquery文件。在点击每个图片后,你必须用你的src调用plugin。这样的jquery:
$('.thumbnail').on('click', function () {
var src = $(this).attr('src');
$(this).colorbox({ html: "<img src='" + src + "' style='width:1024px;height:728px'/>", width: "1024px", height: "728px", close: "", closeButton: true, scrolling: false, overlayClose: true, scalePhotos: true, escKey: true });
});
https://stackoverflow.com/questions/3381250
复制相似问题