Help with Lightbox image viewer 2.03a

[ikon]

1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I have gone over and over the html, have all 4 js files and 1 css file in the correct locations on my server, but the lightbox is not working on this page http://thereefman.com/snails.html --- NOTE: the first image "Nassarius Snail" is the one that i have been trying to get to work, as you can see it doesnt (at least in firefox)

Can you figure out why the script is not working?

THANK YOU!

[jscheuer1]

There's a conflict with jQuery on the page. Either get rid of jQuery and the scripts that use it or use Slimbox2 for the Lightbox duties.

See:

http://www.dynamicdrive.com/forums/blog.php?b=247

for important details on Slimbox2.

[ikon]

AWESOME thank you

[ikon]

Quick question, i've implemented the slimbox, Is there a way to adjust where the image loads on the page? It defaults to center, i want to move it to center-top... any suggestions?

[ikon]

and the "loading" and "close" images are not showing up, they are in the correct directories that correspond to the code in the css file.

[jscheuer1]

You won't get a group/gallery with next/previous without a group name. Change all:

 rel="lightbox"

to:

 rel="lightbox[shellfish]"

Include the brackets as shown, you can use any group name you like, but it must be the same for all of the images in the group.

Another thing I noticed was that you have some long and complicated title attributes. These show up onmouseover of the trigger images and it looks bad. If (using a text only editor like NotePad) you change the AUTOLOAD CODE BLOCK in slimbox2.js to:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);

You can use rev instead of title. For example:

<a href="inverts/neritebig.jpg" rel="lightbox[shellfish]" rev="<table cellspacing=4><tr><td colspan=2><font face=calibri size=2 color=#5f5f5f><b>Nerite Snail</b> <i>(Nerita tesallata)</i></td></tr><tr><td><font face=calibri size=2 color=#5f5f5f><b>Care Level:</b> Very Easy<br><b>Size:</b> 0.75 inch<br><b>Diet:</b> Hair, Film, Diatoms</td><td><font face=calibri size=2 color=#5f5f5f><b>Recommend:</b> 1 Per 2 Gallons<br><b>Compatibility:</b> Reef-Safe<br><b>Description:</b> Algae Eater</td></tr></table>" target="_top">
  <img src="inverts/nerite.png" border="0" width="230">
</a>

That way it won't show up on hover, but will still be there in the caption when the lightbox is activated.

As for raising the lightbox higher on the page, there's no real good way to do that I can see. On that particular page because all of the larger images are the same size, you can edit the slimbox2.css file as shown (additions/changes highlighted):

/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: fixed;
	top: 10px !important;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

#lbBottomContainer {
	top: 425px !important;
}

.lbLoading {
	background: #fff url(css/loading.gif) no-repeat center;
}

#lbImage {
	posi . . .

But that will not work if you have a different page with different height larger images or have varying heights of images on the same page. The only thing that would need to change is the 425px for the top value for the lbBottomContainer. It has to be the height of the larger image (400 in this case) plus a bit more to account for the borders and the slight distance from the top. If you were to have a different page with different images all the same height but not 400, you could use a separate css file for that page.

When I have more time I'll look into either editing the script or using a helper script to get it to calculate that value automatically.

[ikon]

John, i made those changes, you are a huge help I really appreciate it. The title hover change was a big one, thank you.

2 things

1) when i changed the code as in the .css file as you suggested, it adjusted the vertical height of the popup as intended, but it also darkened it, not sure why that happened, please take a look at what im talking about http://www.thereefman.com/snails.html

2) the "loading" and "close" images still are not showing up in the popup box?

THANK YOU!

[jscheuer1]

You inadvertently removed the z-index: 9999; from:

#lbCenter, #lbBottomContainer {
	position: fixed;
	top: 10px !important;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

Put it back. That will fix the darkened problem.

The close image and the loading image aren't showing up because relative paths in css files are relative to the css file, not to the page using the styles. So change this and similar:

.lbLoading {
	background: #fff url(css/loading.gif) no-repeat center;
}

to:

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

[ikon]

You are great, thank you.

One last question... Is there a way to get the pop up to load outside of the frame that it is clicked from? I tried adding both the "_parent" and "_top" target paths in the <a href tag for the images that use the script but that didn't work. Any suggestions?

Your help is much appreciated

[jscheuer1]

Now I saw that you had jQuery twice on the page in the iframe. You should only need it once, the first time. And when you're done, it should also only be on the top page once. Take care of that then have the scripts (jQuery and slimbox2) and the style (slimbox2.css) on both the page in the iframe and the top page.

Change:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);

to:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				parent.jQuery.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				parent.jQuery.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);

Also, for IE compatibility, at least your top page should have a standards invoking DOCTYPE.

BTW, I figured out a way to modify the script to calculate the top position. Revert to the original slimbox2.css file and use this script instead of slimbox2.js (I've already made the changes mentioned above in it):

Attachment 4426