Results 1 to 4 of 4

Thread: :: Lightbox image viewer 2.03a

  1. #1
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default :: Lightbox image viewer 2.03a

    1) Script Title: :: Lightbox image viewer 2.03a


    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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?

  2. #2
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    Please help me!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    http://www.huddletogether.com/projects/lightbox2/

    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:

    http://fancybox.net/

    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.

    ColorBox:

    http://colorpowered.com/colorbox/

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, here's what you can do, setup some alternate stylesheets, one for each group name:

    Code:
    	<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:

    Code:
    <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:

    Code:
    <script type="text/javascript">
    (function(){
    	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];
    			boxSheetsAr.push(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);
    	}
    })();
    </script>
    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.
    Last edited by jscheuer1; 04-17-2011 at 11:41 AM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •