Printable View
Hi All,
I am note a coder however I have worked with Java Scripts in the past. I am trying to add this script to my home page to display images of some of my work however I am running into issues.
I copies the script into the head and the body as instructed however there are no instruction s on how to get the script to show or reference the images. Do I put the file name of the images into the script or do i reference their location somewhere in the script. I am totally confused.
Thanks,
Jeff
This is an old slideshow that only works (shows special pixelation transitions between images) in IE 9 and less. Other browsers will see a simple slideshow. The complete instructions for installing it are on the demo page:
http://www.dynamicdrive.com/dynamicindex14/pixelate.htm
The images are entered in the array in Step 1 (the part of the code that goes in the head of the page):
Replace the red images with your own. Put the code of Step 2 in the body of the page where you want the slideshow to appear.Code:<script language="JavaScript1.1">
<!--
//Pixelating Image slideshow
//Copyright Dynamic Drive 2001
//Visit http://www.dynamicdrive.com for this script
//specify interval between slide (in mili seconds)
var slidespeed=3000
//specify images
var slideimages=new Array("photo1.jpg","photo2.jpg","photo3.jpg")
//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://wsabstract.com","http://www.geocities.com")
var imageholder=new Ar . . .
If you want more help with it please post a link to the page on your site where you've put the code for it.
That said, due to the limitations involved with this old script, I'd recommend almost any other slideshow.
Hi John,
Thank you for getting back to me. I do not have it on my live page but rather a test page however, since this is so old, can you recommend a more recent script that will offer the same function. Preferably with .jpg images.
Jeff
It's a little trickier, but very versatile, and still pretty easy to setup, and can look really good with its fade transition in all browsers. It handles any kind of image that the web can, so that includes .jpg:
http://www.dynamicdrive.com/dynamici...nslideshow.htm
It's the Ultimate Fade-In Slideshow. Let me know if you have trouble. But first of course try following the step by step directions. If you run into problems, try putting up a test page on your site and posting a link to it. I can fix almost anything involved with this script, even take a failed attempt and make a working demo with your images that you can then copy. It also has additional features available other than what's included with the script, but let's not worry about that part just yet.
Hi John,
Well I am completely lost and confused. As I said, I am not a coder and because of that I am very confused by the directions. I have created a test folder with everything in it including the images I will to have show up on the from page. Can you take a look at it and see what I am doing or not doing? It is www.cbjeff.com/test/index2.html. The folder is, of course, called test and it has everything in it. I would also like to be able to add images to it once the issues are resolved. Any help you can provide would be greatly appreciated.
Thanks,
Jeff Walters
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:
to: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>
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: [
["http://www.dynamicdrive.com/dynamicindex4/pool.jpg"],//<--no trailing comma after very last image element!
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/dog.jpg"]
],
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):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>
If there are still problems or questions, just let me know.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>
Hi John,
So do I then replace all the code with what you provided or just the code in blue.
Jeff
The whole thing, it's an entire page, sorry - I used the HTML code feature (which incidentally has syntax highlighting - I guess that's what's confusing) for the last block because it was an entire HTML page. To restate - save this in a plain text editor like NotePad. Save it as index3.html and place it in your test folder:
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>
Hi John,
Works great. I just have to figure out how to get it to show the whole image. I tried resizing the images however it did not seem to work.
You're the best :)
Jeff
Oh, you can resize the images in an image editing program like Photoshop, The Gimp, Paint Shop, etc. But the trick would be to resize them all to a size that's about the size you want them. Then, if they're all the same size, just set those dimensions in the slideshow init here:
If they're not all the same dimensions, use the width of the widest, and the height of the tallest, the slideshow will automatically center them. And of course, at that point, one would get rid of this:Code:<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>
Anything else, or more on this part of it that you want to know - just ask.Code:<style>
#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
width: 100%;
height: auto;
}
</style>