View Full Version : :: Lightbox image viewer 2.03a

04-15-2011, 06:36 PM
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 4 grouped images set. I would like every group to open the lightbox but with different style.
is that possible?

04-16-2011, 05:31 AM
Please help me!

04-16-2011, 05:04 PM
First of all, v2.03a of Lightbox is rather dated. It was a Dynamic Drive modification to Lightbox 2.03. Lightbox is as of this typing up to version 2.05:


But even it doesn't have the capability you're after. And I believe it lacks the v2.03a addition of linked titles, if that's important to you. Is it?

There are tons of lightbox type scripts out there though. One that has that capability in at least a limited way is FancyBox:


With it you can customize some of the elements in the 'lightbox' by groupings in the on page call that activates the 'lightbox' for each group.



might be able to be adapted similarly to FancyBox.

Any lightbox type script could be adapted to use different 'lightbox'.css stylesheets for different groups via some sort of stylesheet switcher activated by the same click or perhaps a mouseover of the link that activates the 'lightbox', but that would be easier with something like FancyBox, or even the more recent official Lightbox version. But it would still be a bit complicated. I'll give it some thought though.

There are tons of these lightbox clones out there, Google:

lightbox clones

to find them. Perhaps one has exactly what you want.

04-17-2011, 11:25 AM
OK, here's what you can do, setup some alternate stylesheets, one for each group name:

<link media="screen" rel="alternate stylesheet" title="lightbox[group1]" href="lightbox1.css" />
<link media="screen" rel="alternate stylesheet" title="lightbox[group2]" href="lightbox2.css" />
<link media="screen" rel="alternate stylesheet" title="lightbox[group3]" href="lightbox3.css" />
<link media="screen" rel="alternate stylesheet" title="lightbox[group4]" href="lightbox4.css" />

Place the above code in the head of the page after any regular stylesheets you have. Do not include the lightbox.css stylesheet link as either an alternate or regular stylesheet. You may need to include before these sheets some stylesheet that at least makes the #lightbox and #overlay selectors position: absolute. Make up the various lightbox1.css, lightbox2.css, etc. files by editing lightbox.css, each as you want it for the various groups.

Notice the titles of the alternate stylesheets, these should correspond to the rel attributes given for each of the 4 lightbox groups. Like the first one would be for lightbox tags like this one:

<a href="someBig.jpg" rel="lightbox[group1]" title="Whatever"><img src="someThumb.jpg" alt="" border=0 /></a>

Now, right after those alternate stylesheet links, put this code:

<script type="text/javascript">
var sheets = document.getElementsByTagName('link'), boxSheetsObj = {}, boxSheetsAr = [];
for (var i = sheets.length - 1; i > -1; --i){
if(sheets[i].rel.toLowerCase() === 'alternate stylesheet' && sheets[i].title){
sheets[i].disabled = true;
boxSheetsObj[sheets[i].title] = sheets[i];
function boxSheets(e){
e = e || event;
var t = e.target || e.srcElement;
while(!t.rel && t.parentNode){
t = t.parentNode;
if(t.rel && boxSheetsObj[t.rel]){
for (var i = boxSheetsAr.length - 1; i > -1; --i){
boxSheetsAr[i].disabled = true;
boxSheetsObj[t.rel].disabled = false;
if (document.addEventListener){
document.addEventListener('mousedown', boxSheets, false);
else if (document.attachEvent){
document.attachEvent('onmousedown', boxSheets);

That's it. When the user clicks on a lightbox link, if it has a rel corresponding to the title of one of these alternate sheets, that's the stylesheet that will be used.

I've only done limited testing on this - enough to know that it works. So if you have problems, let me know and provide a link to your page.