Results 1 to 5 of 5

Thread: Lightbox clash with Ultimate Fade-In

  1. #1
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox clash with Ultimate Fade-In

    1) Script Title: Lightbox & Ultimate Fade-In

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/indexb.html

    3) Describe problem:
    Hi,

    I have a Ultimate Fade-In Slideshow effect on my site ( a graphic along the top of the page) and I have been trying to add a Lightbox effect to a group of smaller graphics on the same page. Here is the problem :

    The Ultimate Fade-in effect works fine UNTIL I add the coding for the Lightbox into the HEAD section of my coding. When I upload the page , the Lightbox effect works fine on the smaller images, BUT it stops the Ultimate Fade-In Slideshow effect on the large graphic happening, I just get a blank picture ( www.awstyle.co.uk/coppicehotel/gall2)

    It instructs you to place the script coding into the HEAD of the page on both effects, does this mean I cant have both the Lightbox effect AND the Ultimate effect on 2 seperate graphics on the same page??



    ~andy whitham ~

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

  3. #3
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for the info. The Lightbox effect isn't working for me with the Slimbox2 version.
    here is the url for the test page Im working on:
    www.awstyle.co.uk/coppicehotel/gall2

    I'm trying to get the block of small pictures to have the lightbox effect. Currently I'm trying to get the first of the images to work, top left hand corner.

    I have the larger images saved in the folder at my site, along with the small ones.

    I d/loaded the jQuery library ( version 1.7 ) and uploaded it to the same folder as all other components on this page.

    I also uploaded all the x 4 folders that came with the download of Slimbox2 ( css + extra + js + src )

    I added the script :
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

    into the header of the page, as instructed.

    I also put the activation code ahead of the required graphic, finishing it with the </a> tag.

    All I get when I click on the small graphic is it opening to the large graphic on a white page.

    Any help would be appreciated John.

    many thanks
    Andy Whitham

  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

    In the head, change:

    Code:
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    to:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    Also - In the body, get rid of the highlighted:

    Code:
    <BODY BGCOLOR="808080" TEXT="#000000" vlink='#ffffff'>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <center> <TABLE WIDTH="75%" BO
    Now, I thought at first that being in quirks mode might hurt the Slimbox Box. But it doesn't appear to. However, while checking that theory I discovered that the page 'as is' doesn't look very well in IE. I found that if I removed the widths for the first table and all 4 of its td's that fixed it for IE and didn't seem to hurt others.
    Last edited by jscheuer1; 11-19-2011 at 10:42 AM. Reason: change comment
    - John
    ________________________

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

  5. #5
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thanks for that..I did as you suggested and it seems to be working okay, fingers crossed.
    http://www.awstyle.co.uk/coppicehotel/gall2.
    The first of the tiny pictures work fine so I will repeat the coding on the rest of those pics now and with a bit of luck they all will have the desired effect.

    Your a top man John, wish I had your knowledge but at 56 yrs old I struggle initially with all this stuff but get there eventually..lol

    Andy

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
  •