Geeks With Blogs
Scott Wojan DotRant BLOG

I needed lightbox 2 functionality for a project I'm working on, but didn't want the overhead of having to include prototype, scriptaculous, et al that comes with it since we are already using JQuery.  I found the excellent JQuery lightbox plugin written by Leandro Vieira Pinho and works well, but I needed to be able to set the max height and width so I had to mod the code as follows:

 

settings = jQuery.extend({
    maxWidth: null,
    maxHeight: null,

...

function _resize_container_image_box(intImageWidth,intImageHeight) {
    //rescale if necessary
    if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
	var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
	var scale = isWider ?  settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
	intImageWidth = intImageWidth * scale;
	intImageHeight = intImageHeight * scale;
     }

     $('#lightbox-image').height(intImageHeight); 
     $('#lightbox-image').width(intImageWidth);  

...
Now you can specify a max width and height like:
    $('.yourClass a').lightBox({
            maxHeight: 500,
            maxWidth: 700
    });
Posted on Wednesday, June 17, 2009 9:19 AM | Back to top

Copyright © Scott Wojan | Powered by: GeeksWithBlogs.net