Javascript Gallery that automatically uses all large images on page

Question

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/

Answer 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.

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