Javascript Gallery, which automatically uses all the large images on the page

Question

I have a website with a large number of images on one large page.

The easiest would be a Script, which I could include, which automatically scans the same page and uses all images larger than 100 pixels to create a slide show gallery from them.

Does anyone know such a lightweight script that needs any programming skills?

I found this for a start:

jQuery get all images within an element exceeding a certain size

To get all the larger images, you can use something like this:

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

---

Update:

After several studies, I found this the most suitable: Fancybox Gallery

It should be implemented on this page:

http://www.kathrinhoffmann.com/

Answer 1

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 is as follows:

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

Answer 2

It really depends on your favorite lightbox ("gallery opener"). Say you like ShadowBox . This requires rel="shadowbox[gallery-name]" , in which the gallery name is optional. The interesting side of shadowbox is that lightbox will work instead of shadowbox .

What you need to do is 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 3

You tried to do something similar to get the original width and height of the 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' : ''; } }); 

Answer 4

@Bram Vanroy is almost right, but you need to take care of the real size (not affected by CSS or so) and unloaded images (so my filters require 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 the Fancybox gallery, as suggested by Bram:

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

Answer 5

Nothing prevents you from wrapping your images (which you already found) with the necessary 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 a working demo in this script (beware that I used body as the root element to search for images in the demo, you better add some class / attribute of the element that contains all the images you want to work with and use them instead) .