PDA

View Full Version : Lightbox pop-up - image toolbar



delavina
03-03-2006, 10:49 PM
I've finally got the lightbox image viewer (http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm) working...thanks to John's suggestion in another thread (http://www.dynamicdrive.com/forums/showthread.php?t=7703&highlight=lightbox) to replace part of the js code, which allows it to work with other javascripts.

My question is this: How can I prevent the annoying IE image toolbar from appearing on the large version of my image in the lightbox?

(I put <meta http-equiv="imagebar" content="no" /> in the <head> of my page, but this seems to only apply to the thumbnails, not the larger versions that pop-up in the lightbox.)

jscheuer1
03-03-2006, 11:33 PM
Don't ever use:

<meta http-equiv="imagebar" content="no" />

or the correct version:

<meta http-equiv="imagetoolbar" content="no">

as this will create a memory leak that can, under the right (or wrong, depending upon how you look at it) circumstances bring the user's computer to a crawl until every instance of the current browser session is closed.

Instead, use the galleryimg="no" attribute on any particular image that exhibits this toolbar in an obnoxious fashion. Not all images do this, they have to be big enough, be foreground images, and not have any dynamic qualities or style that prevent the toolbar in the first place.

To this end, here is where, in the lightbox.js file that the overlay image is created:


// create image
var objImage = document.createElement("img");
objImage.galleryimg = 'no';
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);


Adding the part in red should take care of it, if not, use instead:


objImage.setAttribute('galleryimg','no');

delavina
03-03-2006, 11:51 PM
Thanks, John. Inserting objImage.galleryimg = 'no'; worked!

In regards to a website that doesn't use the lightbox javascript - When you say "Instead, use the galleryimg="no" attribute on any particular image that exhibits this toolbar in an obnoxious fashion.", do you mean inside the <img> tag? That seems a bit tedious for a web site with lots of large images that display the annoying toolbar - is there any alternative that can be put into the <head> and therefore apply to all images on that page?

Forgive me if this is a dumb question. Thanks again!

jscheuer1
03-04-2006, 05:12 AM
Unfortunately, although Microsoft did devise the meta tag solution, it is buggy so, no, there is no good easy way. I just hit upon this style kludge for the head section but, it may have the same problem as the meta tag:


<!--[if IE]>
<style type="text/css">
img {
font-size:expression(this.galleryimg='no');
}
</style>
<![endif]-->

The image toolbar is only a problem in IE, so the IE conditional comment makes this invisible to all other browsers. Font-size is never needed for images and the expression method of defining a value for a style property is another IE specific technique. It works in limited testing here. But, in any case, it will only work if javascript is enabled. Neither the galleryimg attribute nor the meta tag have this limitation.

However, it is not so tedious to apply the galleryimg="no" attribute to all images on a page. Once your page is finished, all you need to do is open it in a text editor and do a global search and replace:

search on:

<img

replace with:

<img galleryimg="no"

With the cursor at the top of the page, click on 'replace all'.

mustaschen
12-17-2006, 05:32 PM
How will I make this work in a later version such as Lightbox 2.0 or 2.02? :confused:

jscheuer1
12-17-2006, 06:46 PM
How will I make this work in a later version such as Lightbox 2.0 or 2.02? :confused:

Pretty much the same way (near line# 240 in the 2.02 version of lightbox.js):


var objLightboxImage = document.createElement("img");
objLightboxImage.galleryimg = 'no';
objLightboxImage.setAttribute('id','lightboxImage');
objImageContainer.appendChild(objLightboxImage);

Add the red part. 2.0 is probably the same except for the line number. In either script, just use your text editor's search utility to search for:

objLightboxImage

until you find the above code.

mustaschen
12-18-2006, 11:53 AM
It works! Thank you. I tried this before I posted my question but I must have done something wrong. :rolleyes: Perhaps I put it in the wrong line...
Thanks again for the quick reply...