Javascript库，可自动使用页面上的所有大图像
我有一个网站，在一个大页面上有很多图像。
最简单的是我可以包含的脚本，它会自动搜索同一页面，并使用大于100px的所有图像从中创建幻灯片库。
任何人都知道这样一个简单的脚本，是否需要任何编程技巧？
我发现这是一个开始：
jQuery获取大于特定大小的元素内的所有图像
要将所有图像放大到某个尺寸，您可以使用以下内容：
var allImages = $('img', yourDivElement) var largeImages = allImages.filter(function(){ return ($(this).width() > 70) || ($(this).height() > 70) }) 更新：
经过一些研究，我发现这是最合适的： Fancybox Gallery
它应该在这个页面上实现：
http://www.kathrinhoffmann.com/
这真的取决于你最喜欢的灯箱（“画廊揭幕战”）。 让我们说你喜欢ShadowBox 。 它需要rel="shadowbox[gallery-name]" ，其中图库名称是可选的。 shadowbox的有趣之处在于lightbox而不是shadowbox也可以。
您需要做的是使用此rel属性在图像周围添加链接标记。
var img = $("img"), a = ""; img.each(function() { var $this = $(this); if ($this.width() > 100 || $this.height() > 100) { $this.wrap(a + $this.attr("src") + b + galName + c); } });
小提琴 。
您是否尝试过这样的操作来获取图像的原始宽度和高度：
// loop through img elements $('.img-class').each(function(){ // create new image object image = new Image(); // assign img src attribute value to object src property image.src = $(this).attr('src'); // function that adds class to image if width and height is greater that 100px image.onload = function(){ // assign width and height values var width = this.width, height = this.height; // if an image is greater than 100px width and height assign the // string fancybox to image object className property image.className = (width > 100 && height > 100) ? 'fancybox' : ''; } });
@Bram Vanroy几乎是正确的，但你需要注意实际大小（不受CSS影响）和非加载图像（这就是为什么我的filter需要回调来返回过滤后的图像）：
http://jsfiddle.net/coma/wh44u/3/
$(function() { $('img').filterBiggerThan(100, function(big) { console.log(big); }); }); $.fn.filterBiggerThan = function (limit, callback) { var imgs = []; var last = this.length - 1; this.each(function(i) { var original = $(this); var img = $('![]()
') .appendTo('body') .css({maxWidth: 'none'}) .load(function(event) { if(img.width() > limit || img.height() > limit) { imgs.push(original); } img.remove(); if(i >= last) { callback(imgs); } }); img.attr('src', this.src); }); };
这里有另一个例子：
http://jsfiddle.net/coma/NefFM/22/
Bram建议你有一个Fancybox画廊：
没有什么可以阻止你用你需要的标记包装你的图像（你已经找到）并将em传递给fancybox ：
largeImages.each(function(){ $(this).wrap('').parent().attr({'rel':'gallery', href: this.src}); }); $('a[rel=gallery]').fancybox();
你可以在这个小提琴中看到工作演示（注意我使用body作为根元素在demo中查找图像，你最好将一些类/属性添加到包含你想要使用的所有图像的元素中，然后使用它）。
谢谢，
我这样解决了：
我下载了fancybox，并在我的页面底部的kathrinhoffmann.com上的fancybox说明中添加了此代码：
然后我包括了我自己的脚本：
看起来像这样：
var img = $("img"), a = ""; img.each(function() { var $this = $(this); if ($this.width() > 50 && $this.height() > 50) { $this.wrap(a + $this.attr("src") + b); } });