If you want to skip the critique and explanations, just copy the the last code block in this post, paste it into a text only editor like NotePad and save it as - say index3.html, and upload it to your test folder. Should work pretty well and can be tweaked if need be. In any case, any questions or problems, just let me know.
OK, you've done better than a lot of non-coders do first time. You have the scripts in place and the code on your page is pretty much workable. There are three main problems, and one's not even your fault:
- There's no division in the HTML markup to receive the slideshow.
- You have two initialization calls, when likely you only want one slideshow, or if you want two slideshows, the second one is also missing a division to receive it in the HTML markup.
- You've hotlinked to the Dynamic Drive images for the slideshows (this is the one that's not your fault), often one can hotlink to images from another site, but Dynamic Drive blocks that. It can sometimes work if the images are cached in the browser, but even then it often fails - you need to use your own images.
One and two can be fixed by changing:
Code:
<p style="margin-top:0; margin-bottom:0;" align="center"> <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://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/dog.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: "always",
togglerid: ""
})
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
dimensions: ['50%', 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/3.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow4toggler"
})
</script>
to:
Code:
<div id="fadeshow1"></div><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://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/dog.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: "always",
togglerid: ""
})
</script>
Now, notice the highlighted part in the fixed code. That's where you need to put your images. If these images were in the same folder as the page, you could write it like so:
Code:
<div id="fadeshow1"></div><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: [
["pool.jpg"],
["cave.jpg"],
["fruits.jpg"],
["dog.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: "always",
togglerid: ""
})
</script>
You can in fact download these images from Dynamic Drive and put them in your test folder and the slideshow in the most recent code will work there. That might even be the best thing to do, just to get it working. But I see you also have some images in that folder already. Let's try using those, I'm also changing the style you used that went with slideshow 4 to apply to the first slideshow and getting rid of the fourth one, and adjusting the first's dimensions to be at least workable - use this as your new test page (save as index3.html and put it in your test folder):
HTML Code:
<html>
<head>
<title>CBJ Home Page</title>
<meta name="generator" content="Namo WebEditor v5.0">
<meta name="author" content="Jeff Walters">
<meta name="classification" content="Home Page">
<meta name="description" content="Begining point for my site">
<meta name="keywords" content="Gifts, Birthdays, Wood, Wooden, Wood Turner, Pen, Bowls, Boxes, Artistic">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<style>
#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table align="center" cellpadding="0" cellspacing="0" width="1233">
<tr>
<td width="167" height="105">
<p> <img src="images/pens_030313/SL_Honduran_Rosewood_Gold%202%20(Small).jpg" width="156" height="86" border="0"></p>
</td>
<td width="1066" height="105" valign="middle"><p align="center"><span style="font-size:14pt;"><b><font color="maroon"> www.cbjeff.com <img src="images/buttons/cbj_html_smartbutton1.gif" namo_npi=":EmbededNPI1" align="middle" width="520" height="88" border="0"></font></b></span>
<span style="font-size:14pt;"><b><font color="maroon">www.jeffscottwalters.com</font></b></span></p>
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" width="1232">
<tr>
<td width="167" height="381" align="center" valign="top">
<p style="margin-top:0; margin-bottom:0;"><a href="index2.html"><img src="images/pictures/index_html_smartbutton1.gif" namo_npi=":EmbededNPI2" border="0"></a><a href="sale.html"><img src="images/pictures/index_html_smartbutton2.gif" namo_npi=":EmbededNPI3" border="0"></a></p>
<p style="margin-top:0; margin-bottom:0;"><a href="gallery.html"><img src="images/pictures/index_html_smartbutton3.gif" namo_npi=":EmbededNPI4" border="0"></a><a href="about.html"><img src="images/pictures/index_html_smartbutton4.gif" namo_npi=":EmbededNPI5" border="0"></a><a href="mailto:jeff@jeffscottwalters.com"><img src="images/pictures/index_html_smartbutton5.gif" namo_npi=":EmbededNPI6" border="0"></a> </p>
</td>
<td width="1065" height="381" valign="top"><p align="center"><span style="font-size:18pt;"><b><font color="maroon">Welcome
to my site and my world of Wood Turning</font></b></span></p>
<div id="fadeshow1"></div><script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["IMAG0119.jpg"],
["IMAG0247.jpg"],
["IMAG0304.jpg"],
["IMAG0389.jpg"],
["IMAG120.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: "always",
togglerid: ""
})
</script></p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p style="margin-top:0; margin-bottom:0;" align="center"> </p>
</body>
</html>
If there are still problems or questions, just let me know.
Need Help With Pixelating Slide Show
Reply With Quote
Bookmarks