PDA

View Full Version : Help with Lightbox image viewer 2.03a



ikon
04-13-2012, 05:43 AM
1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/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
04-13-2012, 01:59 PM
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
04-13-2012, 03:17 PM
AWESOME thank you

ikon
04-13-2012, 04:17 PM
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
04-14-2012, 04:12 PM
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
04-14-2012, 05:33 PM
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
04-14-2012, 05:57 PM
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
04-14-2012, 11:38 PM
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
04-15-2012, 04:25 PM
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
04-16-2012, 03:05 AM
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):

4426

ikon
04-16-2012, 07:55 PM
The code shown above, what file is that included in?

How do i go about creating "standards invoking DOCTYPE"?

By "jQuery occurs twice on the page in the frame", are you referring to this line? I should take one out?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Thank you

jscheuer1
04-17-2012, 09:34 AM
Take out the second one:


. . . -scrollbar-corner {
background: #1A1A1A;
}

/* Force the scroll bar to the left hand side of the screen */
.jspVerticalBar
{
left: 0;
}

</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane(
{
verticalDragMinHeigh . . .

About the code in my last post - If you use the attached file from my last post there's no need to edit it but that code is the code from the slimbox2.js we edited in post #6 (http://www.dynamicdrive.com/forums/showpost.php?p=272739&postcount=6) in this thread. I thought you'd recognize it.

The simplest standards invoking DOCTYPE is:


<!DOCTYPE html>

Place that as the very first thing at the beginning of the source code, ex:


<!DOCTYPE html>
<html>
<head>
<link REL="SHORTCUT ICON" HREF="starlogo.png">

<style type="text/css">
A:link {text-decoration: none; color: #ffffff}
A:visited {text-decoration: none; color: #ffffff}
A:active {text-decoration: none; color: #ffffff}
A:hover {text-decoration: none; color: #ffffff;}

</style>
<title>The Reef Man | Saltwater Livestock</title>
<meta name="description" conte . . .

ikon
04-17-2012, 02:14 PM
I replaced the slimbox2.js file with the new slimbox2-top.js (and renamed it on my server to the original name) but there was an issue, it would open the image in the same tab but there was no animation, it just opened it as a regular image? Thanks!

jscheuer1
04-17-2012, 02:46 PM
As I said before, you have to put the the scripts and style on both pages.

Go back to post number 10 (http://www.dynamicdrive.com/forums/showpost.php?p=272787&postcount=10) and follow the instructions.

ikon
04-18-2012, 06:57 AM
Ok thank you.

Since i put the <DOCTYPE tag in, now there is a table spacing issue in both FF and IE browsers on the main index page.

And now that the image animation loads in the parent frame, i'd prefer it to be reverted back to centered as it was originally :)

jscheuer1
04-18-2012, 10:08 AM
In that case, get rid of the DOCTYPE. And in the updated slimbox2.js file I gave you, if you're using that, get rid of:


// Set SlimBox Top if desired, use null for normal centered operation:
jQuery.slimbox.top = 10;

jQuery(function($){
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if (jQuery.browser.version < 7 || document.compatMode !== 'CSS1Compat'){$.slimbox.top = null;}
@end @*/
if(!$.slimbox.top){return;}
$('#lbCenter, #lbBottomContainer').css({
position: 'fixed'
});
});

And of course revert to the original slimbox2.css file - (the one that comes with slimbox) if you haven't already.

ikon
04-18-2012, 07:14 PM
I edited the css file to revert back to center, and I'm really happy with the parent frame loading the image animation, thanks a lot.

I was able to leave the DOCTYPE tag in, and added style="display:block" to every image tag in the index file, that solved the majority of the spacing issue, however there are 4 tiny spaces, which are basically showing up as white lines (in FF) around a couple of the linked images on the left side on the main page - http://www.thereefman.com

Any idea why those are showing up?

jscheuer1
04-18-2012, 11:15 PM
My impression is that the only reason to use a standards invoking DOCTYPE was to get IE to utilize the fixed position value for the Slimbox elements. If you're reverting to the absolute positioning for that, you can revert to quirks mode for the page.

And since that page was obviously designed as slices in quirks mode, the easiest way to get it to appear as intended would be to revert it to how it was, including removing the standards invoking DOCTYPE.

ikon
04-18-2012, 11:27 PM
gotcha.... i just took out the doctype line and it fixed the spacing issue.

if you notice i have the wibya bar on the bottom of the page, and it shows up properly in FF but if i remove the doctype tag that wibya bar doesnt show up properly in IE!!!!

jscheuer1
04-19-2012, 03:06 AM
Oh, I didn't realize it was required for that as you seemed happy with it before in quirks mode.

Anyways, in that case, try out this version of the page:

4429

Oh and on home.html, get rid of:


<link rel="stylesheet" href="http://thereefman.com/lightbox.css" type="text/css" media="screen">
<script src="lightbox.js"></script>

They're not being used and cause an error.

And set its body's background color to transparent. You may need to set this with the other pages (snails, etc.) that go in the iframe. Only seems important in IE 8 and less.

ikon
04-19-2012, 06:14 AM
Awesome i used the zip file you sent and that fixed the wibya bar in IE!

Now the thing thats giving me issues is the speech bubble script (in IE again) the image at the top images/layout_02.png should have the bubble pop up on mouseover and it works fine in FF but in IE it displays the text at the bottom down by the wibya bar

And also if you notice in IE each page that loads in the frame is not transparent as the corner overlaps and shows at the bottom right, i took out the lightbox script in the home.html file but it didnt fix it.

jscheuer1
04-19-2012, 06:59 AM
The problem with the speech bubble in IE 8 and less is that you have two unclosed font tags in the speechdata.txt. Add the highlighted:


<div>

<div id="speechbubble1" class="speechbubbles">
<font face=tahoma size=5><b>New Customer?</b><font size=2><br>Don't forget to enter promo code "NewCustomer" in the promo box during checkout to receive 10% off your entire livestock order!
</font></font>
</div>

<div id="speechbubble2" class="speechbubbles">
Create alternating colored horizontal rules quickly <b>with</b> this new Web 2.0 tool.
</div>

<div id="speechbubble3" class="speechbubbles">
Gradient images are used everywhere in web page design, such as the background of form buttons, DIVs, to act as shadows etc. This tool lets you easily generate a gradient image.
</div>

<div id="speechbubble4" class="speechbubbles">
Generate a favicon using any regular image with this tool. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is viewed.

</div>

</div>


I know about the dark corner in IE 8 and less (it's fine in IE 9, BTW). I did say to get rid of that script from home.html because it was causing an error. But I also said to set home.html's body's background color to transparent. That should fix the dark corner in IE 8 and less. And the other pages that get loaded into the iframe like shrimp and snails, etc. - Those will need their bodies' background color set to transparent as well.

Like here's the body tag from home.html:


<body style="background-attachment: fixed; background-repeat: no-repeat;" background="http://thereefman.com/images/layout_13.png">

Although you can and probably should move all of that to a stylesheet, you could, just to try it out add the highlighted:


<body style="background-color: transparent; background-attachment: fixed; background-repeat: no-repeat;" background="http://thereefman.com/images/layout_13.png">

If that works to get rid of the dark corner, and I'm pretty sure it will, do it for the other pages as well.


Another thing, you should get rid of the second copy of jQuery, it's not required. Drop the highlighted:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

BeaDavies
04-30-2012, 10:13 AM
Hi, I am getting into this conversation because it seems like the title applies to my case.
I wanted to get lightbox2.03a for my image gallery at this urls

http://www.beatricedavies.com/ILLUSTRATIONPAGE.html
http://www.beatricedavies.com/PAINTINGPAGE.html
http://www.beatricedavies.com/SKETCHESPAGE.html

Now, I am not a web designer and I am slowly learning about coding.
For lightbox's installation, I tried to follow the instructions without success.:o
An example of a sketch html I made to try it is here:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prova lightbox</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body>
<a href="images/ILLUSTRATION-JPEG/dusty.jpg" rel="lightbox" title="my caption"><img src="images/illust_thumbs/dusty_thumb.jpg" width="80" height="80"/></a>
<a href="images/ILLUSTRATION-JPEG/Mar07.jpg"rel="lightbox" title="my caption"><img src="images/illust_thumbs/Mar07_thumb.jpg" width="80" height="80" /></a>
<img src="images/illust_thumbs/sushi_thumb.jpg" width="80" height="80" />
</body>
</html>


I am using Dreamweaver cs4.
Now, where do I have to put the js and css in my database?
Then how should the links to the enlarged images look? The ones I made take me to a simple page with the image.

url for sample page above:

http://www.beatricedavies.com/prova%20lightbox.html


Everything you know more than I do is appreciated if you share. Thank you for help!

BeaDavies
05-08-2012, 10:15 AM
Ok, solved. Now I can't get the gallery working. How does grouping images work?
This again is the url of the sample page.

http://www.beatricedavies.com/prova%20lightbox.html

jscheuer1
05-08-2012, 04:36 PM
You have the right idea, but a typo is preventing it from working. Make sure the group name, in this case:

provalightbox

is the same for both rel attributes. Change the second one:


rel="lightbox[provaligthbox]"

to:


rel="lightbox[provalightbox]"

But I notice that you are using HTML in the title attribute. For that and numerous other reasons, Slimbox2 with the live load code from this blog post would be a better choice than Lightbox:

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

BeaDavies
05-08-2012, 05:50 PM
Oh my, I have been reading through the code so many times and never noticed that mistake!

thank you so much for suggestions

B

hardpeter
06-20-2012, 03:34 AM
Hi,
Using this lightbox script, is there a way to have the link (rev="http://www.dynamicdrive.com") open in a new window like target="_blank"?

Thanks,

Pete

jscheuer1
06-20-2012, 01:32 PM
Well, there is:

http://www.dynamicdrive.com/forums/showpost.php?p=163470&postcount=1

But I currently prefer Slimbox2 with a custom init for this:

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