I am using 2 frames in my web page. In 1 frame, i am opening a lightbox for image but it will take first frame portion for overlay. It should take a whole screen for overlay.

please help me dear.

thanks

…
Step 3: in your AJAX div area (the div u used to load AJAX content), put this line AFTER your closing div ([/div]):
[script]initLightbox();[/script]

Step 4: the last one, in EVERY anchor you produced using AJAX, put this in the onClick event:
showLightbox(this);return false;
i.e:
[a href="yourimage.jpg" onClick="showLightbox(this);return false;"][img src="thumbnail.jpg"][/a]

The problem I have to face with this one is AJAX compatibility, since initLightbox would only work on the initial opening of the page, not when dynamic image links acquired with AJAX. I found my wayaround after taking a peek at lightbox.js. Here is the steps:
1. comment out line 285 – 295 (which perform “on-the-fly” anchor modification)
2. comment out the last line which says addLoadEvent(initLightbox); to prevent initialization (in FF it works just fine with this line uncommented but I find that IE thinks differently :p)
3. in your AJAX div area (the div u used to load AJAX content), put this line AFTER your ):
initLightbox();
4. the last one, in EVERY anchor you produced using AJAX, put this in the onClick event:
showLightbox(this);return false;
i.e:

And… voila!! Have fun with your AJAX gallery+lightbox :D

P.S: Sorry if this cheapskate trick is already posted by someone before. Just trying to share :)

The exact javascript file you need to edit is in the “/js/” folder and is named “lightbox.js”. The line you will need to edit is line 218 and 223 in Lightbox v2. In different versions it may vary. If you do not see the word “title” anywhere on those lines then doing a search for “title” should yield your results.

You should see something like this:

if ((imageLink.rel == ‘lightbox’)){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + ‘[href][rel="' + imageLink.rel + '"]‘).
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

Simply change the attribute “title” on both of your lines to the attribute of your choice. I have even highlighted it for your convenience. Once finished you may save and exit. The next step is to edit your HTML to correspond to your new attribute. This is as easy as changing “title” to “id” in your img tag.

Your HTML tag should now look like this (if you used the ID attribute):

Image

Now you’re done. You may now use HTML in your lightbox description. However, you still have to deal with writing all that gibberish. If your images are dynamically handled by a PHP script you’ll be happy to hear that there’s a little function called “htmlentities()” that will deal with all that for you. I use the exact function in my gallery script.

If you’re unfortunate enough to be coding your gallery entirely in HTML without the help of a server side language I have created a little program that might help you out. I made it in Quickscript in fact!

Here is the source code for my little htmlentity encoding program:

if($_POST){
$code = $_POST['code'];
echo ‘Enter HTML here:
‘.$code.’

‘;
echo ‘Result:’.htmlentities($code).”;
}
else{
echo ‘
Enter HTML here:

‘;
}

You may use the program on my website by going here. If you’d like to use it on your own server you’ll need to edit the bits with my URL in it. That part was necessary to add because I was using quickscript and there was no absolute path for it to follow since it was retrieving the code from the database.

Now you are truly done! You are now free to use the HTML you encode into html entities in your Lightbox descriptions without having any nasty titles or having to use a lightbox alternative. If you have any quetions feel free to contact me.