PDA

View Full Version : Ultimate Fade-in slideshow (v2.1)



Askaris
11-11-2009, 04:46 PM
-Straightforward, auto playing slideshow with no hyperlinking, descriptions
I have been trying to make this scipt work with bad results.

I copy the code as spec in the <HEAD> and make the adjustment for pictures size. Were do I put the pictures, in a fil or straight on the webbsight ?

I then put the code in selected <div>

I do not know what I do wrong ?

Regards Anna :)

jscheuer1
11-11-2009, 05:06 PM
In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

The images can most easily go in the same folder as your page, then simply list them in this part (highlighted) of the on page settings:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["photo_1.jpg"],
["photo_2.jpg"],
["photo_3.jpg"],
["photo_4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

Simply change the names photo_1.jpg, photo_2.jpg, etc. to reflect the actual names of your images.

If you want more help:

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

Askaris
11-11-2009, 06:10 PM
Hello, this is the scipt, I get the message "FadeSlideShow is undefined"

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [484, 242], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["bookflip1.jpg"],
["bookflip2.jpg"],
["bookflip3.jpg"],
["bookflip4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>

<body>

<div style="position: absolute; width: 484; height: 242; z-index: 1; left: 176px; top: 171px" id="lager1"><div id="fadeshow1"></div>

</body>

</html>

jscheuer1
11-11-2009, 09:02 PM
You need to have the main scripts linked to the page (form the demo page):



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

The jquery/1.3.2/jquery.min.js is a hot link so all you need is the tag as shown, but the fadeslideshow.js file must be downloaded from the demo page and placed in the same folder as your page.

Askaris
11-11-2009, 09:57 PM
Hello Again, I have made the adjustments and downloaded the fadeslideshow.js to the same folder ad the page, but it is till saying 'fadeSlideShow' is undefined

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny sida 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [484, 242], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["bookflip1.jpg", "", "", ""],
["bookflip2.jpg", "", "", ""],
["bookflip3.jpg"],
["bookflip4.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

</head>

<body>

<div style="position: absolute; width: 574px; height: 305px; z-index: 1; left: 216px; top: 115px; background-color:#C0C0C0" id="lager1"><div id="fadeshow1"></div>
&nbsp;</div>

</body>

</html>

Anna :(

jscheuer1
11-12-2009, 12:38 AM
Looks good. I'll need a link to the page to figure this one out.

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

Askaris
11-14-2009, 12:49 PM
Hello,
www.stallcompass.se is the web page. Though I havenīt updated the side "Bildgalleri" with the script since I can't make it work !

Anna

jscheuer1
11-14-2009, 04:40 PM
You'll have to put up a demo that shows the problem. I'm sorry about that, but that's just the way it goes. Your code looks OK, you say you've done all that's required, obviously we've missed something. A live demo of the problem is required for further debugging.

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

It doesn't have to be a page accessible on your site from other pages though, just a demo of the problem. I'd suggest putting it in the same live folder where you want to eventually have the page with the slide show, only give it a name like:

problem_demo.htm