Lightbox 2 & Div - display:none
Regular
Location: Fort Myers, FL
Posted: Wed, 2008-01-09 21:10
This topic isn't entirely CSS related, however I have a feeling my problem is stemming from CSS on my page - and you guys have helped me out a lot in the past so I thought I'd give this a try.
I'm using Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/) on my web page. Without going in a whole other direction, I have tested out Lightbox 2, I have it setup correctly and I have used it a lot in the past.
I have 3 thumbnail images I have placed in a DIV tag. When the page loads, the DIV with the 3 thumbnails is hidden. I'm using a button to make the DIV appear. Here is the code:
<div style="display:none;" id="fp1">
<h3>Before & After</h3>
<a href="gallery/beforeafter/images/ba1.jpg" rel="lightbox[ba]" title=""><IMG src="gallery/beforeafter/thumbnails/ba1.jpg" height="70" width="105" alt="ba1" class="photo" border="0" /></a><a href="gallery/beforeafter/images/ba2.jpg" rel="lightbox[ba]" title=""><IMG src="gallery/beforeafter/thumbnails/ba2.jpg" height="70" width="105" alt="ba2" class="photo" border="0" /></a><a href="gallery/beforeafter/images/ba3.jpg" rel="lightbox[ba]" title=""><IMG src="gallery/beforeafter/thumbnails/ba3.jpg" height="70" width="105" alt="ba3" class="photo" border="0" /></a>
</div>The problem is that when I make the DIV appear, lightbox doesn't function. However if I take my thumbnails out of the DIV and load the page, lightbox works fine.
I was wondering if anyone could give me any suggetsions on what I could try to work around this problem or to get it to work?
Much thanks!
Foochuck
http://www.myspace.com/foochuck
Moderator
Posts: 5577
Joined: 2005-02-22
Post a link so we can see
Posted: Thu, 2008-01-10 01:51
Post a link so we can see what is going on with Lightbox2.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 48
Joined: 2003-10-15
Location: Fort Myers, FL
Here's the link...
Posted: Thu, 2008-01-10 13:49
First off, I apologize I'm using Lytebox - which works fine for me outside of what I'm trying to do.
Here's a link to my page:
http://www.newrisedesigns.com/charlie/testing/
On the left there are 3 thumbnails - if you click them, lytebox works just fine.
Above those 3 thumbnails is a button that turns on the hidden DIV. Inside of the DIV are the same 3 thumbnails - setup the same way, except Lytebox doesn't function. I'm guessing since the images aren't visible on the page when it loads, lytebox isn't executing properly.
Any suggestions??
Foochuck
http://www.myspace.com/foochuck
Moderator
Posts: 5577
Joined: 2005-02-22
You aren't revealing the
Posted: Thu, 2008-01-10 18:23
You aren't revealing the hidden div, you are using a script to create a new div. Lightbox initializes itself after the document loads. Part of that initialisation is to iterate through the page looking for anchors with a "rel" value of "lightbox" (or something similar). If you create an element later, it will not have been processed by the lightbox initialization. After you create the element, fire off a call to the lightbox initilization routine to force it to redo the page --- hopefully that won't cause any problems with the elements that have already been initialized.
Fwiw, if you use Firebug to reveal your hidden div, those images will do the lightbox thing when clicked.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 48
Joined: 2003-10-15
Location: Fort Myers, FL
Thanks Chris - I had a
Posted: Thu, 2008-01-10 18:25
Thanks Chris - I had a feeling something along those lines was happening.
Where can I check out Firebug?
FOO
Foochuck
http://www.myspace.com/foochuck
Regular
Posts: 48
Joined: 2003-10-15
Location: Fort Myers, FL
Do you know of any other
Posted: Thu, 2008-01-10 22:14
Do you know of any other script I can use to make the different DIV's appear using javascript?
I tried calling lytebox() with no luck.
Foochuck
http://www.myspace.com/foochuck
Moderator
Posts: 5577
Joined: 2005-02-22
Firebug is a Firefox
Posted: Thu, 2008-01-10 23:38
Firebug is a Firefox extension.
If all you need to do is reveal a DIV on clicking a link. Write some javascript to change the class on the DIV or one of its antecedents. Use CSS to have the starting class use display:none or visibility:hidden and then have the new class override those values to make the DIV visible.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 48
Joined: 2003-10-15
Location: Fort Myers, FL
Thanks for your insight and
Posted: Thu, 2008-01-10 23:43
Thanks for your insight and your help.
Foochuck
http://www.myspace.com/foochuck