PDA

View Full Version : No Slide in Slideshow!



Mcurtis
01-22-2012, 11:35 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: Hi Folks - I'm obviously new to Dreamweaver and am trying to create a nice, large, auto starting slideshow with no navigation. Just like they show in the example. You can see my attempt here at: http://www.marcicurtis.com/indexslideshow.html.
So far I've only added two photos, but they stack on top of each other instead of going into any sort of slideshow. I've been at this all day and just can't figure it out. Should the photos be in the head section (as you'll see I'm trying as well)?

Thanks for any and all help... it's GREATLY appreciated. Hoping you all get a chuckle out of my newbieness!

mlegg
01-23-2012, 06:44 PM
Did you download the fadeslideshow.js (http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js) and then upload it to your server?

auntnini
01-24-2012, 12:32 AM
I just couldn't resist. Your layout just begged for a ROLLOVER -- the sort of thing used by http://www.morgangaynin.com/gal/. Simple to implement, Simple for viewer -- no clicking.



<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.thumbs { margin: 20px auto; }
.thumbs img { height: 100px; width:auto; float:left; margin: 2px; border: 0;}
.space { margin: 20px auto; border: groove thick 10px #39F; }
</style>
<script language="JavaScript" type="text/javascript">
<!-- Adapted from www.morgangaynin.co
//LARGE IMAGES
pic01 = new Image
pic02 = new Image
pic03 = new Image
pic04 = new Image
pic05 = new Image
pic06 = new Image
pic07 = new Image
pic08 = new Image
pic09 = new Image
pic10 = new Image
pic11 = new Image
pic12 = new Image
pic13 = new Image
pic14 = new Image
pic15 = new Image
pic16 = new Image

pic01.src = "http://www.marcicurtis.com/michigan-author-photo3.jpg"
pic02.src = "http://www.marcicurtis.com/michigan-baby-photographer2.jpg"
pic03.src = "http://www.marcicurtis.com/michigan-engagement-photo-banner.jpg"
pic04.src = "http://www.marcicurtis.com/michigan-portrait-photographer2.jpg"
pic05.src = "http://www.marcicurtis.com/michigan-baby-photographer2.jpg"
pic06.src = "images/pic06.gif"
pic07.src = "images/pic07.gif"
pic08.src = "images/pic08.gif"
pic09.src = "images/pic09.gif"
pic10.src = "images/pic10.gif"
pic11.src = "images/pic11.gif"
pic12.src = "images/pic12.gif"
pic13.src = "images/pic13.gif"
pic14.src = "images/pic14.gif"
pic15.src = "images/pic15.gif"
pic16.src = "images/pic16.gif"
//THUMBNAILS
pic01a = new Image
pic02a = new Image
pic03a = new Image
pic04a = new Image
pic05a = new Image
pic06a = new Image
pic07a = new Image
pic08a = new Image
pic09a = new Image
pic10a = new Image
pic11a = new Image
pic12a = new Image
pic1a3 = new Image
pic14a = new Image
pic15a = new Image
pic16a = new Image

pic01a.src = ""
pic02a.src = ""
pic03a.src = ""
pic04a.src = ""
pic05a.src = ""
pic06a.src = ""
pic07a.src = ""
pic08a.src = ""
pic09a.src = ""
pic10a.src = ""
pic11a.src = ""
pic12a.src = ""
pic13a.src = ""
pic14a.src = ""
pic15a.src = ""
pic16a.src = ""

// End hiding script from old browsers -->
</script>
</head>


<body>
<div class="thumbs">
<a href="#" target="space" onMouseOver="document.holder.src=pic01.src">
<img src="http://www.marcicurtis.com/michigan-author-photo3.jpg"></a>
<a href="#" target="space" onMouseOver="document.holder.src=pic02.src"><img src="http://www.marcicurtis.com/michigan-baby-photographer2.jpg"></a>
<a href="#" target="space" onMouseOver="document.holder.src=pic03.src"><img src="http://www.marcicurtis.com/michigan-engagement-photo-banner.jpg"></a>
<a href="#" target="space" onMouseOver="document.holder.src=pic04.src"><img src="http://www.marcicurtis.com/michigan-portrait-photographer2.jpg"></a>
<a href="#" target="space" onMouseOver="document.holder.src=pic05.src"><img src="http://www.marcicurtis.com/michigan-baby-photographer2.jpg"></a>
</div>
<br clear="all">
<div class="space">
<img src="http://www.marcicurtis.com/michigan-author-photo3.jpg" name="holder" id="holder" alt="Holder">
</div>

</body>
</html>


You could even effect multiple rollovers. See demo at http://webdocdo.tripod.com/genericRollover/multiple.html