我有一个网站，一个大页面上有很多图片。
最简单的是我可以包含的脚本，它自动搜索同一页面并使用所有大于 100 像素的图像从它们创建幻灯片库。
有谁知道这么简单的脚本，不需要任何编程技能？
我一开始就发现了这个：
要使所有图像大于某个尺寸，您可以使用以下内容：
var allImages = $('img', yourDivElement)
var largeImages = allImages.filter(function(){
return ($(this).width() > 70) || ($(this).height() > 70)
})
更新：
经过更多研究，我发现这是最合适的：Fancybox Gallery
它应该在这个页面上实现：
这真的取决于你最喜欢的灯箱（“画廊开瓶器”）是什么。假设你喜欢ShadowBox。它要求rel="shadowbox[gallery-name]"其中画廊名称是可选的。shadowbox 的有趣之处在于它lightbox也shadowbox可以正常工作。
然后您需要做的是在具有此 rel 属性的图像周围添加一个链接标签。
var img = $("img"),
a = "<a href='",
b = "' rel='lightbox[",
galName = "chooseName",
c = "]'>";
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 左右的影响）和未加载的图像（这就是为什么我的过滤器需要回调来返回过滤后的图像的原因）：
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 = $('<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('<a></a>').parent().attr({'rel':'gallery', href: this.src});
});
$('a[rel=gallery]').fancybox();
您可以在这个 fiddle中看到工作演示（请注意，我用作body在演示中查找图像的根元素，您最好向包含您要使用的所有图像的元素添加一些类/属性并改用它）。
谢谢，
我是这样解决的：
我下载了 fancybox 并从我位于kathrinhoffmann.com的页面底部的fancybox 说明中添加了此代码：
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="s$
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="sc$
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
然后我包含了我自己的脚本：
<script type="text/javascript" src="/add_fancybox.js"></script>
看起来像这样：
var img = $("img"),
a = "<a href='",
b = "' rel='group' class='fancybox'>";
img.each(function() {
var $this = $(this);
if ($this.width() > 50 && $this.height() > 50) {
$this.wrap(a + $this.attr("src") + b);
}
});