PDA

View Full Version : 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/dynamicindex17/featuredcontentglider.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 (http://www.lokeshdhakar.com/projects/lightbox2/) or preferably 2.04a (http://www.dynamicdrive.com/forums/showthread.php?t=37030) (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:


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:


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


<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
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/showpost.php?p=164296&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:


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


and:


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


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


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


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


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


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

both of which should be (for valid HTML):


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


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

redsky
05-21-2010, 03:41 AM
First, use an AJAX friendly version of lightbox like 2.04 (http://www.lokeshdhakar.com/projects/lightbox2/) or preferably 2.04a (http://www.dynamicdrive.com/forums/showthread.php?t=37030) (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:



...

Hi John,
I tried this [var $j = jQuery.noConflict(); ] for contentslider.js. Finally something that worked when I click on the thumbnail and lightbox opens up. However, I lost the ability to mouseover the thumbnails and display the larger image viewer (viewer now has no image with [var $j = jQuery.noConflict(); ] inserted in top of contentslider.js.

What can I change please so I can both click on the thumbnail to load lightbox2.04 AND retain the purpose of the contentslider??

Thanks,
Judith

jscheuer1
05-21-2010, 05:16 AM
Hi John,
I tried this [var $j = jQuery.noConflict(); ] for contentslider.js. Finally something that worked when I click on the thumbnail and lightbox opens up. However, I lost the ability to mouseover the thumbnails and display the larger image viewer (viewer now has no image with [var $j = jQuery.noConflict(); ] inserted in top of contentslider.js.

What can I change please so I can both click on the thumbnail to load lightbox2.04 AND retain the purpose of the contentslider??

Thanks,
Judith

This thread is for Lightbox and Content Glider. If you are using Content Slider, some things may be different:

Please post a link to a page on your site that contains the problematic code so we can check it out.

redsky
05-22-2010, 02:28 AM
http://www.redskyjewelry.com/MOCK%20RED%20SKY%20SITE/product_collections/anna/8m_necklace_anna.html

I took the $J out of the contentslider.js just so you know (yes, I knew the script was for content glider-- it was still the closest fix I came across to fixing this problem). So NOW, without the var= line added into the js, the problem remains. And to describe that problem:

I am using the content slider on my product pages. I want to be able to click on thumbnail and lightbox opens. Currently, lightbox opens only on click to the title of the thumbnail. I have seen this problem queried but have found no fix for it.

When I tried the content glider fix, the thumbnail actually clicked on to lightbox, but I lost the ability to mouseover the thumbnails and display the larger image viewer-- the larger image was absent.

On the above posted site link, I inserted a link for the thumbnail, along with the rel=lightbox, FOR ONLY THE FIRST THUMBNAIL (mystic black). This demonstrates the thumbnail opening in a new window on click rather than in the desired lightbox. You can see that clicking on the thumbnail titles brings up the lightbox.

Sorry about getting all this into the wrong thread. Also, please instruct fix like I am a dummy. I am strictly self taught, so I am still very ignorant with all but the rudimentary stuff.

Thank you, of course,
Judith

jscheuer1
05-22-2010, 10:49 AM
Yes, this is a different situation. There is no conflict with jQuery because the Content Slider doesn't use jQuery. The conflict here is that the Slider takes control of the rel attribute of those links which it uses as toc links. So where you have:


<a href="3_images_5x4_med_350x280/8m_neck_dg2.jpg" class="toc" rel="lightbox" title="mystic black">

Slider is removing rel="lightbox" from it. This can be easily fixed by editing the contentslider.js file with a plain text editor like NotePad and changing rel to rev here:


pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}

So that it looks like this:


pdivlinks[i].setAttribute("rev", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rev"))
return false
}

redsky
05-22-2010, 03:45 PM
That did it, thank you sooooo much! (and I hope this helps other people as well).

:D Judith