Lightbox clash with Ultimate Fade-In

**andywhitham** · 11-18-2011, 11:49 AM

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 ~

**jscheuer1** · 11-18-2011, 01:59 PM

See:

http://www.dynamicdrive.com/forums/blog.php?b=247

**andywhitham** · 11-19-2011, 08:02 AM

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

**jscheuer1** · 11-19-2011, 10:01 AM

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.

**andywhitham** · 11-19-2011, 10:48 AM

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

Thread: Lightbox clash with Ultimate Fade-In

Thread Tools

Search Thread

Lightbox clash with Ultimate Fade-In

Bookmarks

Bookmarks

Posting Permissions