Javascript Gallery that automatically uses all large images on page

问题

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

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 get all images within an element larger than a specific size

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:

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

It should be implemented on this page:

http://www.kathrinhoffmann.com/

回答1:

It really depends on what is your favourite lightbox ("gallery opener"). Let's say thatyou like ShadowBox. It requires rel="shadowbox[gallery-name]" in which the gallery name is optional. The fun side of shadowbox is that lightbox instead of shadowbox will work as well.

What you then need to do is to add a link-tag around the images with this rel attribute.

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.

回答2:

Have you tried doing something like this to get the original width and height of an image:

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

回答3:

@Bram Vanroy is almost right, but you need to take care about the real size (non affected by CSS or so) and about non loaded images (that's why my filters needs a callback to return the filtered images):

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

    });

};

Here you have another example:

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

Here you have a Fancybox gallery as Bram suggested:

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

回答4:

Nothing stops you from wrapping your images (that you already found) with required markup and passing em to fancybox:

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

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

You can see the working demo in this fiddle (beware I used body as root element for finding images in demo, you better add some class/attribute to the element that holds all the images you want to work with and use it instead).

回答5:

Thanks,

I solved it like this:

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>

which looks like this:

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

来源：https://stackoverflow.com/questions/14811237/javascript-gallery-that-automatically-uses-all-large-images-on-page

标签

javascript

jquery

image-gallery