Image Gallery with Lightbox: Max image size hack
 
Lightbox is a great script to implement easy full screen image galleries into webpages.

To include in your webpage, just upload the files to your html-dir, and include these lines in your header:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


Then, check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Finally, you're ready to use lightbox as follows:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Or with a group of images:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>



Max image size hack

If your images exceed the size of your screen, follow these instructions:
STEP 1:
-----------------------------------------------
In the global variables section you need to add two new ones...
var lb_max_width = 600; //if you wish to constrain the width (set to 99999 for unlimited size)
var lb_max_height = 400; //if you wish to constring the height (set to 99999 for unlimited size)

STEP 2:
------------------------------------------------
Add the following two "global" functions to the bottom of the code, before the "initLightbox" call at the very bottom.
I added them right after the "pause" function definition.

function lb_scale_dims(orig_w, orig_h, max_w, max_h)
{
var scale = lb_scale_rate(orig_w, orig_h, max_w, max_h);
var new_w = Math.round(scale*orig_w); new_h = Math.round(scale*orig_h);
if (new_w < 1) { new_w = 1; } if (new_h < 1) { new_h = 1; }
return Array(new_w, new_h);
}
function lb_scale_rate(orig_w, orig_h, max_w, max_h) {
var scale1 = 0; var scale2 = 0;
if (orig_w > max_w) { scale1 = (orig_w - max_w) / orig_w; }
if (orig_h > max_h) { scale2 = (orig_h - max_h) / orig_h; }
var scale = (scale1>scale2)?scale1:scale2;
return (1-scale);
}

STEP 3:
------------------------------------------------
Add the following code in the "changeImage" around line 445 (is the start of the function).
Directly after the line (about 465) "Element.setSrc('lightboxImage', imageArray[activeImage][0]);"
You need to add the following code (notice this is in the method "onload" for the preloader)...

var dims = lb_scale_dims(imgPreloader.width, imgPreloader.height, lb_max_width, lb_max_height);
Element.setWidth('lightboxImage', dims[0]);
Element.setHeight('lightboxImage', dims[1]);
myLightbox.resizeImageContainer(dims[0], dims[1]);



German Version
To install the german version, grab the files (below). They include the following changes:
lightbox.css:
#imageData #bottomNavClose{ width: 113px; float: right; padding-bottom: 0.7em; outline: none;}

lightbox.js (configuration section):
  // When grouping images this is used to write: Image # of #.
  // Change it for non-english localization
  labelImage: "Bild",
  labelOf: "von"

Finally, replace the images with the german images.

Source:
- http://www.lokeshdhakar.com/projects/lightbox2/
- http://www.huddletogether.com/forum/comments.php?DiscussionID=1798&page=1
- http://www.huddletogether.com/forum/comments.php?DiscussionID=1465
- http://www.phpblogger.net/2007/07/10/lightbox-2-deutsch/

Additional stuff:
- http://stackoverflow.com/questions/12490833/make-lightbox-effect-close-on-image-click
- http://stackoverflow.com/questions/13084852/changing-the-cursor-in-lightbox
 
admin / Nov 02, 2009
 
Files
 
lightbox2_deutsch.zip: Lightbox 2 German version
 
lightbox2.04.zip: Lightbox 2.04 Source
 
   
 
 
Login: 
Pass: 
 
 
     
     
2004 - 2019 / lookass.ch
makememad@lookass.ch