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:
Before & After
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!
Thu, 2008-01-10 01:51
#1
Post a link so we can see
Post a link so we can see what is going on with Lightbox2.
Thu, 2008-01-10 13:49
#2
Here's the link...
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??
Thu, 2008-01-10 18:23
#3
You aren't revealing the
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.
Thu, 2008-01-10 18:25
#4
Thanks Chris - I had a
Thanks Chris - I had a feeling something along those lines was happening.
Where can I check out Firebug?
FOO
Thu, 2008-01-10 22:14
#5
Do you know of any other
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.
Thu, 2008-01-10 23:38
#6
Firebug is a Firefox
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.
Thu, 2008-01-10 23:43
#7
Thanks for your insight and
Thanks for your insight and your help.
Thu, 2009-02-26 20:09
#8
Same Problem
Hi Chris, I need your help.
I'm revealing and hiding content in a specified div. So initially the 'hidden' content have a class named articles that has a style of visibility:hidden.
I know you mentioned that because the hidden content is hidden, lightbox cant read the file. I have tried this by deleting the "hidden" style and lightbox will work.
Question: How do I avoid this problem? How should I write the javascript.
The URL is http://www.filament-phase.com/amy you can try by clicking on 'design' and then 'ni-ke' and you'll see the thumbnail.
The code i am using to display the content on click is
function show_me(id){ document.getElementById("display").innerHTML=document.getElementById(id).innerHTML }
Hope you can help. Much appreciated