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/

Answer 1

这取决于你最喜欢的灯箱（“画廊揭幕战”）。让我们说你喜欢ShadowBox。它需要rel="shadowbox[gallery-name]"，其中图库名称是可选的。影子框的有趣之处在于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

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

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/

在这里你有一个Frambox画廊，正如Bram建议的那样：

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

Answer 4

没有什么可以阻止您使用所需的标记包装您已经找到的图像（并已将其找到）并将其传递给fancybox：

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

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

您可以在this fiddle中看到工作演示（请注意我使用body作为根元素在demo中查找图像，您最好将一些类/属性添加到包含您想要的所有图像的元素中与之合作并使用它。）

Answer 5

谢谢，

我解决了这个问题：

我下载了fancybox，并在fancybox instructions页面底部的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);
    }
});

Javascript库，可自动使用页面上的所有大图像

5 个答案: