We help IT Professionals succeed at work.

lightbox  image

lulu50
lulu50 asked
on
Hi,

I am using lightbox on my site when the user click on the image.  
the image takes the whole site is there a way to my the size of the image lightbox smaller.

I got it from this site
http://lokeshdhakar.com/projects/lightbox2/#download

this is my site
http://www.churchesbulletin.com/Ad.cfm?AdID=75

is there a way to when the user click on the image it will make it larger but not too large.
Comment
Watch Question

BRONZE EXPERT

Commented:
hello.
here http://lokeshdhakar.com/forums/discussion/5606/updated-10102011-new-mods-lb2.05-prevnext-navbuttons-captions-autoresize-integration-hth-  there are discussed some of the features of this lightbox. As i understand there is no implemented way to resize the picture as stated in the same page
"2b) ALSO Find
imgHeight = maxHeight
....and read the notation there. Offhand I do not remember if I scheduled to go back and create a proper LightboxOptions setting for that. You may need to tweak this setting."
i'd advice to check on another lightbox here http://leandrovieira.com/projects/jquery/lightbox/
or check on the top 10 here http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
hope that helps

Commented:
Hello,

this has not been tested but think should work.

In lightbox.js add the first piece of code (the function) to the top.

Then, find this:

resizeImageContainer: function(imgWidth, imgHeight) {

and replace with:

resizeImageContainer: function(imgWidth, imgHeight) {

var newSize = scaleSize(XXX, ZZZ, imgWidth, imgHeight);
imgWidth = newSize[0];
imgHeight = newSize[1];

where XXX is the max width you want, and ZZZ is the max height you want. Replace XXX and ZZZ with the values you want.

Regards

Chorch

function scaleSize(maxW, maxH, currW, currH) {
	var ratio = currH / currW;
	if(currW >= maxW &amp;&amp; ratio <= 1){
		currW = maxW;
		currH = currW * ratio;
	} else >if(currH >= maxH){
		currH = maxH;
		currW = currH / ratio;
	}
	return [currW, currH];
}

Open in new window

lulu50Web application

Author

Commented:
Chorch:

I have javascript error

http://www.churchesbulletin.com/Ad.cfm?AdID=75
lulu50Web application

Author

Commented:
I think the error from this

} else >if(currH >= maxH){
Commented:
yes, right... sorry

should be:

function scaleSize(maxW, maxH, currW, currH) {
      var ratio = currH / currW;
      if(currW >= maxW && ratio <= 1){
            currW = maxW;
            currH = currW * ratio;
      } else if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
      }
      return [currW, currH];
}
lulu50Web application

Author

Commented:
Chorch:

it resized the box behind the image but the image stayed the same.

I need to resize the image too
lulu50Web application

Author

Commented:
it resized the resizeImageContainer

how can I resize the image if it is more than 500 x 333
lulu50Web application

Author

Commented:
Thanks

Explore More ContentExplore courses, solutions, and other research materials related to this topic.