Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: how to Add lightbox in content glider

  1. #1
    Join Date
    Oct 2008
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question how to Add lightbox in content glider

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

  2. #2
    Join Date
    Oct 2008
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    can sny one reply my problem

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

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

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

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    avenus (10-27-2008)

  5. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  6. The Following User Says Thank You to traq For This Useful Post:

    avenus (10-27-2008)

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

    Quote Originally Posted by traq View Post
    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.
    - John
    ________________________

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

  8. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.

  9. #7
    Join Date
    Oct 2008
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #8
    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

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

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

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    avenus (10-27-2008)

  12. #9
    Join Date
    Oct 2008
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

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

  13. #10
    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

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

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

  14. The Following User Says Thank You to jscheuer1 For This Useful Post:

    avenus (10-27-2008)

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
  •