自动使用页面上所有大图的Javascript画廊

Question

我有一个网站，其中有很多图片放在一个大页面上。

最简单的方法是包含一个脚本，自动搜索该页面并使用所有大于100px的图片来创建幻灯片画廊。

有人知道这样一个容易的脚本，不需要任何编程技能吗？

我先找到了这个：

要获取所有大于某个大小的图像，您可以使用以下代码：

jQuery get all images within an element larger than a specific size

var allImages = $('img', yourDivElement)

var largeImages = allImages.filter(function(){
  return ($(this).width() > 70) || ($(this).height() > 70)
})

---

更新：

经过更多的研究，我发现这个最适合： Fancybox Gallery

它应该被应用在这个页面上：

http://www.kathrinhoffmann.com/

- rubo77

---

这仅适用于呈现大小。例如在CSS或img标签中指定的宽度。如果较大的图片具有较小的呈现大小，则您的条件将无法工作。 - Harry Bomrah

如果你需要一个过滤器，那么请查看我的第一个示例；如果你只需要应用一些灯箱效果，那么请转到第二个示例。 - coma

Answer 1

这真的取决于你最喜欢的lightbox（“画廊打开器”）是什么。假设你喜欢 ShadowBox。它需要使用rel="shadowbox[gallery-name]"，其中画廊名称是可选的。Shadowbox有趣的一面是light​​box也可以使用 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);
    }
});

Fiddle.

- Bram Vanroy

---

@rubo77 看看coma的解决方案。他关于原始大小的说法是正确的。此外，您需要重新设计您的网站。表格不是用于布局目的。 - Bram Vanroy

Answer 2

你尝试过像这样获取图像的原始宽度和高度吗：

// 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' : '';
    }
});

- Greg Suskind

---

@rubo77 http://jsfiddle.net/TZTFJ/ 我已经为您保存了一个可工作的版本。完全相同的代码。 - Greg Suskind

你的代码基本上是可以工作的，但它并不能解决我的问题。不过还是谢谢。 - rubo77

Answer 3

@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画廊：

http://jsfiddle.net/coma/NefFM/32/

- coma

---

你说得对，我没有想到那个。好主意！（点赞） - Bram Vanroy

我以前在“加载”方面遭受了很多苦难，呵呵。 - coma

小提示，这不允许使用图库。一个简单的变量可以解决这个问题。例如：var gallery = true; if (gallery == true) original.parent().attr('rel', 'gallery-1')（或类似的代码）。 - Bram Vanroy

是的，这取决于您想要使用的画廊插件/库。但是您是正确的，它们通常会通过rel属性对图像进行分组。 - coma

Answer 4

您可以将已找到的图像用所需的标记包装起来，并将其传递给 fancybox：

largeImages.each(function(){
  $(this).wrap('<a></a>').parent().attr({'rel':'gallery', href: this.src});
});

$('a[rel=gallery]').fancybox();

您可以在 这个 JSFiddle 查看工作示例（请注意，我在示例中使用了 body 作为查找图片的根元素，最好为包含要操作的所有图像的元素添加一些类/属性并使用它）。

- Juicy Scripter

Answer 5

谢谢，

我是这样解决的：

我下载了fancybox，并从fancybox说明中复制了底部代码，在kathrinhoffmann.com上添加了它：

<!-- 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);
    }
});

- rubo77

---

但如果页面上有超过一个大图像，我该如何仅加载整个jQuery内容？ - rubo77

这是解决方案：http://stackoverflow.com/questions/16756908/only-load-the-whole-jquery-stuff-if-a-javascript-condition-is-fullfilled - rubo77