自动在页面上使用所有大图像的Javascript Gallery [英] Javascript Gallery that automatically uses all large images on page

问题描述

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

I have a site with lots of images on one large page.

最容易的是我可能包含的脚本，该脚本会自动搜索同一页面，并使用所有大于100px的图像从中创建幻灯片库.

The easiest would be a Script that i could include, that automatically searches through that same page and uses all images larger than 100px to create a slideshow gallery from them.

任何人都知道这样一个简单的脚本，不需要任何编程技能吗?

Anyone knows such an easy script, that doesent need any programming skills?

我从一开始就发现了这一点

I found this for a start:

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

要使所有图像放大到某个尺寸，可以使用如下所示的内容:

To get all images larger that some size you can use something like this:

var allImages = $('img', yourDivElement)

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

---

更新:

---

Update:

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

After some more research, I found this the most fitting: Fancybox Gallery

它应在此页面上实现:

http://www.kathrinhoffmann.com/

推荐答案

谢谢

我这样解决了:

我下载了fancybox，并从页面底部 fancybox说明中添加了此代码. a href ="http://kathrinhoffmann.com" rel ="nofollow"> kathrinhoffmann.com :

I downloaded fancybox and added this code from the fancybox instructions at the bottom of my page at 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>

然后我添加了自己的脚本:

Then I included my own 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 Gallery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！