PDA

View Full Version : Need Help with Fade In SlideShow



Beginner_MP
02-02-2012, 08:40 PM
Script Title: Ultimate Fade-in slideshow (v2.4)

Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Describe problem:

Thanks in advance for any help you can give. Here's my issue. I have used this script before, and it's great, but for a recent application i needed to make a fade-in slideshow with images (pngs) that have transparent backgrounds (because it looks better on the site than with the black background as the images have some transparency as well). I therefore modified the .js file to accomodate this by changing black to transparent. My problem is this: It looks great when an image fades in, but when the next image comes in, the previous one disappears completely and doesn't "fade out" like the samples on the webpage listed above.

Here is the site I am talking about: http://www.lettersforaleitha.com/

I don't know if my modification has anything to do with the issue, or if it has arisen for some other reason. do you have any advice on how to fix this? Thanks again!

jscheuer1
02-03-2012, 05:00 AM
Revert to the official version of the script.

Update the jQuery version. Change this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Add the highlighted as shown:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://turtlebacklane.com/trans_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>
<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
margin: auto;
background-color: transparent !important;
background-image: url(http://www.lettersforaleitha.com/files/theme/bodybg.jpg?583085) !important;
background-position: -490px -478px !important;
}
</style>
<script
type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [825,428], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://turtlebacklane.com/uploads/pat/ashomeslide1.png","","",""],
["http://turtlebacklane.com/upl . . .

The browser cache may need to be cleared and/or the page refreshed to see changes.