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

Question

我有一个网站,在一个大页面上有很多图像.

最简单的是我可以包含的脚本,它会自动搜索同一页面,并使用大于100px的所有图像从中创建幻灯片库.

任何人都知道这样一个简单的脚本,是否需要任何编程技巧？

我发现这是一个开始:

jQuery获取大于特定大小的元素内的所有图像

为了使所有图像更大,你可以使用这样的东西:

var allImages = $('img', yourDivElement)

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

---

更新:

经过一些研究,我发现这是最合适的:Fancybox Gallery

它应该在这个页面上实现:

http://www.kathrinhoffmann.com/

Answer 1

谢谢，

我是这样解决的：

我下载了 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);
    }
});