Zymic Webmaster Forums > Using Lightbox 2 On Zymic

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript

k.digennaro

May 15 2008, 01:23 AM

First of all does zymic support the lightbox 2 script?

If so I want to use lightbox to create a gallery page for my band web site. I think lightbox is the perfect script for what im trying to do. I followed the instructions on how to use light box but i most have done something wrong. First off here's my web page Nascent Descent. So far its really just a homepage, I just finished the code for the index.html and the style.css, any ways if you click on the gallery link it will take you to the gallery, which is exactly as same as the homepage right now. I tried to test lightbox on the fan of the month photo. To do this i first went into my gallery.html and inserted the three lines of code.

CODE

into my header above the title.

Next I went into my css document and went all the way to the bottom of my style.css. I copy and pasted this into it.

CODE

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Then i added the images from the folder 'images' into my folder 'images' they have the same title.
I then uploaded the folder CSS, and JS.

Then i added this to the photo i wanted to run lightbox on.

CODE

<a href="images/photo_3.jpg" width="106" height="100" alt="photo 3" class="left" rel="lightbox" title="Test">image #1</a>

If you go to the above link you can see that it didnt work.

What did i do wrong?

Thanks,
Kevin

k.digennaro

May 17 2008, 01:40 AM

any one?

machine

May 17 2008, 05:22 AM

Yes, you can use lightbox 2.0 here @ Zymic.

I'm not sure if this is what you want [I didn't go through your CSS in detail], but it seems to me that the way to display a single image is as follows:

CODE

<a href="images/image-1.jpg" rel="lightbox">image #1</a>

I mean, this is the way I do it and it usually works.

I don't specify the image size as Lightbox 2.0 is supposed to do that neat 'animated resize' thing for each image...

And the way to display multiple images is like this:

CODE

<a href="images/image-1.jpg" rel="lightbox[groupname1]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[groupname1]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[groupname1]">image #3</a>

Replace 'groupname1' with a group name of your own, like 'bandpix' or some such...

mary123

Jan 22 2011, 09:10 AM

In google chrome the next and previous buttons doesn't appear, but you can get to the next picture.

In Firefox Close doesn't appear and have to close it by pressing somewhere else on the site.

In Opera next and previous appear but the close button is a picture that doesn't load but you can press it.

And for Internet explorer it's the same as Opera.

Anyone knows how to solve this?

zpcs

Feb 1 2011, 09:30 PM

QUOTE(mary123 @ Jan 22 2011, 04:10 AM)

In google chrome the next and previous buttons doesn't appear, but you can get to the next picture.
In Firefox Close doesn't appear and have to close it by pressing somewhere else on the site.
In Opera next and previous appear but the close button is a picture that doesn't load but you can press it.
And for Internet explorer it's the same as Opera.
Anyone knows how to solve this?

These are good points ...have you a web site that this/these issue(s) is associated with and if so, What is the web site address? A little pointing in the right direction usually helps.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.