jQuery: Set a lightbox for every image that is scaled down

[Marked 197]

The problem

Say there is some reason you cannot control which images automatically open a lightbox when you click them: perhaps there are too many images, you have software that automatically controls this for you. In addition, you only want the lightbox to be applied to those images which are scaled down, which is now common place on websites since they are being optimized by mobile devices and the use of max-width:100%;

 

The Solution

By looping through each of whichever images we are targeting, we can compare the scaled down image dimensions with the actual dimensions of the image. If the real image dimensions are larger, apply the lightbox to the image, otherwise do nothing.

jQuery(document).ready(function($){
   //this is the image selector. 
   //An example of forum software which automatically adds a span around
   //images would be something like this: $('span[rel="lightbox"] img')
   var lightboxed_images = $('img');
   //loop through each image
   $.each($(lightboxed_images), function() {
       var img_url = $(this).attr('src');
       var theImage = new Image();
       theImage.src = $(this).attr("src");

       //this is the width of the actual image
       var imageRealWidth = theImage.width;
       //this is the scaled width of the image
       var fakeWidth = $(this).width();

      //if the real image is larger than the scaled image, apply the lightbox
       if(imageRealWidth > fakeWidth){
           //you can add a class and apply a custom style so 
           //visitors know its scaled down 
           $(this).addClass("lightbox_active");
           //when the image is clicked, launch the lightbox
           //this example only shows an example where a 
           //lightbox can be called in javascript. This needs to be 
           //set to however your lightbox can be called
           $(this).click(function() {
               $.lightbox(img_url);
               return false;
           });
       }

   });
}); 

 

Thanks to CSS Tricks for the code to getting the actual image dimensions: http://css-tricks.com/snippets/jquery/get-an-images-native-width/

 

Here is an example of how you would do it with IPB's posted images

 

jQuery(document).ready(function($){
   $.each($('span[rel=\"lightbox\"] img'), function() {
       var img_url = $(this).attr('src');

       // Create new offscreen image to test
       var theImage = new Image();
       theImage.src = $(this).attr("src");

       var imageRealWidth = theImage.width;
       var fakeWidth = $(this).width();

       if(imageRealWidth > fakeWidth){
           $(this).addClass("lightbox_active");
           $(this).click(function() {
               $.lightbox(img_url);
               return false;
           });
       }

   });
});