how to Add lightbox in content glider

**avenus** · 10-20-2008, 07:13 AM

1) Script Title:Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:
i want to add "Light box" inside this script is it possible. help me how to do so..

**avenus** · 10-22-2008, 06:55 AM

can sny one reply my problem

**jscheuer1** · 10-22-2008, 02:50 PM

First, use an AJAX friendly version of lightbox like 2.04 or preferably 2.04a (for advanced features and bug fixes). However, since the Featured Content Glider uses the jQuery script library and Lightbox uses the prototype.js library, there will be conflicts unless steps are taken (as fortunately can be fairly easily done) to isolate the jQuery library. To do that follow these instructions:

Originally Posted by ddadmin

Inside featuredcontentglider.js, first do a search and replace, by replacing all occurences of $ with $j. Then, and only then, add the below to the top of the file:

var $j = jQuery.noConflict();

Once you have taken care of that, install both scripts in the head of your page as instructed for each. Setup the Glider(s) (Step 2 on the Glider Demo page) and use the typical sort of Lightbox markup:

Code:

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

or its typical grouped markup (this latter will work best if using Lightbox 2.04a which corrects bugs in the group implementation of Lightbox 2.04):

Code:

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

anywhere on your page, as well as anywhere on your external pages imported via AJAX to the Glider.

**traq** · 10-22-2008, 03:14 PM

could he use facebox instead (that uses jQuerry, does it not)?

**jscheuer1** · 10-22-2008, 03:23 PM

Originally Posted by traq

could he use facebox instead (that uses jQuerry, does it not)?

Perhaps, but that may not be as AJAX friendly, and was not the question - facebox has a different user interface.

ThickBox resembles Lightbox more closely and also uses jQuery and can easily be made AJAX friendly, as I pointed out in the javascript section:

http://www.dynamicdrive.com/forums/s...96&postcount=2

If you think your idea would work, please supply detailed instructions.

**traq** · 10-23-2008, 12:38 AM

actually, I was just wondering, for my own information. I meant to ask a question, not hint at a solution - sorry for the confusion! I will try it out when I have some time.

**avenus** · 10-24-2008, 02:42 PM

it worked thank you very much Mr. Admin. I 'll come to you if i got any probs
thanx for helping you can check my site
http://www.avinas.com.np i have used this contentglider and lightbox in "my work" page site is still under construuction

**jscheuer1** · 10-24-2008, 04:33 PM

I can see right away that, for browsers other than IE, you will need to use a higher z-index for lightbox in order to actually cover the glider, change as shown in lightbox.css:

Code:

#lightbox	{
position: absolute;	
left: 0; 
width: 100%; 
z-index: 1000; 
text-align: center; 
line-height: 0;
}

and:

Code:

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

Just to be on the safe side, though probably not required, also change:

Code:

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; }

in that same file.

**avenus** · 10-27-2008, 06:41 AM

thank you very much
I have one more problem
My site shows error in Xhtml test on W3c.org
and if i use the clean version that htey provide it doesn't works as before so do you have any solution for this??

Thankyou once again for your help!!

**jscheuer1** · 10-27-2008, 09:04 AM

I'm not 100% sure what you mean. I am assuming you are referring to validation. XHTML should rarely be used because if your page were to truly be served as XHTML, it wouldn't even be parsed by IE. XHTML gets much use on the web though, many people mistakenly believe it is somehow advanced. But it really is just being served as HTML in most cases anyway. Your page is closer to HTML 4.01 Transitional than to XHTML 1.0 Transitional. But it will validate as neither because there is a mixture of code syntaxes relatively exclusive to the two DTDs used on it, and there are a few omissions that would be invalid in either DTD. It could probably be made to validate under either DTD, but I doubt that it can be made to do so by a program and still work (or even perhaps look) as intended.

As for the "clean version that they provide", if you are referring to:

Clean up Markup with HTML Tidy

All that does is eliminate errors based upon algorithms programmed into it. It cannot read your mind to determine what you intended in every case where there is an error.

What I would suggest is changing to HTML 4.01 Transitional. Change this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

Once you have that, there will only be about 29 errors. Most if not all of which you can correct on your own by getting rid of shorttag (valid only in XHTML) and adding alt attributes to images that lack them. Two examples of shorttag:

Code:

<link rel="stylesheet" href="whatever.css" type="text/css" />

Code:

<img src="some.jpg" alt="" />

both of which should be (for valid HTML):

Code:

<link rel="stylesheet" href="whatever.css" type="text/css">

Code:

<img src="some.jpg" alt="">

For missing alt attributes, if you cannot think of appropriate alt attributes where they are missing or don't want to use them anyway even if you can, you may use an empty alt attribute as I have done in my example image tags above.