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/

This will only work for rendered size. for ex width specified in css or img tag. if a bigger picture has smaller rendered size then your condition wont work. — Harry Bomrah, May 19 '13 at 07:33
Well, if you need a filter then check my first example, and if you need to just apply some lightbox then go to the second example. — coma, May 19 '13 at 08:49

Bram Vanroy · Answer 1 · 2013-05-19T10:01:54.703

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.

@rubo77 Take a look at coma's solution. He is right about the original size. Also, you need to rework your website. Tables are **not** done for lay-out purposes. — Bram Vanroy, May 19 '13 at 10:00

score 3 · Answer 2 · edited May 26 '13 at 08:42

3

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

edited May 26 '13 at 08:42

Bram Vanroy

27,032
24
137
239

answered May 24 '13 at 07:22

Greg Suskind

134
7

@rubo77 http://jsfiddle.net/TZTFJ/ I have saved a working version for you. Exact same code. – Greg Suskind May 26 '13 at 02:49
sure, your code works in general, but It was no solution to my question. But thanks. – rubo77 May 26 '13 at 06:58

coma · Answer 3 · 2013-05-19T11:49:54.323

2

@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/

edited May 19 '13 at 11:49

answered May 19 '13 at 07:44

coma

16,429
4
51
76

You are right, hadn't thought about that. Good call! (one up) – Bram Vanroy May 19 '13 at 10:00
I've suffered a lot with the "load" stuff in the past, hehe. – coma May 19 '13 at 10:02
Small note, this does not allow for galleries. A simple var could solve this. E.g. `var gallery = true; if (gallery == true) original.parent().attr('rel', 'gallery-1')` (or something like that). – Bram Vanroy May 19 '13 at 10:21
Yes, it depends on the gallery plugin/library you want to use. But you're right, they use to group images by the rel attribute. – coma May 19 '13 at 11:35

score 1 · Answer 4 · answered May 19 '13 at 13:02

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

rubo77 · Accepted Answer · 2013-05-26T00:28:44.660

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

But how would I only load the whole jquery stuff if there are more than one large images on the page? — rubo77, May 26 '13 at 06:52
Here is the solution: http://stackoverflow.com/questions/16756908/only-load-the-whole-jquery-stuff-if-a-javascript-condition-is-fullfilled — rubo77, May 26 '13 at 07:02

Javascript Gallery that automatically uses all large images on page

5 Answers5

Linked