PDA

View Full Version : Need Help With Pixelating Slide Show



jswalters
08-24-2016, 06:18 PM
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

jscheuer1
08-24-2016, 07:39 PM
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):


<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 . . .

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.

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.

jswalters
08-24-2016, 08:24 PM
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

jscheuer1
08-25-2016, 12:54 AM
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/dynamicindex14/fadeinslideshow.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.

jswalters
08-26-2016, 04:13 PM
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

jscheuer1
08-26-2016, 07:21 PM
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:


<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;<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:


<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:


<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>

<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>&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
</body>
</html>

If there are still problems or questions, just let me know.

jswalters
08-27-2016, 05:52 PM
Hi John,
So do I then replace all the code with what you provided or just the code in blue.
Jeff

jscheuer1
08-27-2016, 07:14 PM
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:


<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>&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
</body>
</html>

jswalters
08-29-2016, 06:05 PM
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

jscheuer1
08-29-2016, 06:53 PM
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:


<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>

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:


<style>

#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
width: 100%;
height: auto;
}

</style>

Anything else, or more on this part of it that you want to know - just ask.

jswalters
08-29-2016, 08:50 PM
Hi John,
Well, I replace the [500, 800] with the image size I made them which is [480, 854] however now I get Error: DIV wit ID "fadeshow1" not found on page. Even if I change them back to [500, 800] it still give the error. I have included an example: www.cbjeff.com/test/index3.html
What did I miss or do wrong?
Jeff

jscheuer1
08-29-2016, 10:19 PM
Here:


to my site and my world of Wood Turning</font></b></span></p>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [480, 854], //width/he . . .

You removed the receiving div. Put it back (addition highlighted):


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: [480, 854], //width/he . . .

There could also be other issues, but that should get it working again. You probably should also remove from the head of the page (as I said before if you wanted to do it this way now):


<style>

#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
width: 100%;
height: auto;
}

</style>

Though that might not be important, it could be a factor in the exact rendering (how the images look, how much of each is visible).

In any case the browser may need to be refreshed and/or it's cache emptied to see the effect of changes.

And as always - let me know if you have any other problems or questions. Eventually we will have you being expert at this slideshow, though that might take some time. Much sooner - I think we can expect you being more than happy with the results.

jswalters
08-29-2016, 11:38 PM
Hi John,
I felling really bad about this. I feel so dumb. I added in <div id="fadeshow1"></div><script type="text/javascript"> as you said however it will not stay. As soon as I save the page it goes away. This is turning into something much more than I bargained for :)

Jeff

jscheuer1
08-30-2016, 12:03 AM
OK, let's start over. Delete the file and use the one we made before:


<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>&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
</body>
</html>

I see the uploaded images haven't really changed anyway, so let's get this back and work from there.

jswalters
08-30-2016, 12:33 AM
Hi John,

Well that fixed everything and the pictures are the right size (except for the one with the razor so I will replace it).

Thank you for your patience and help. So I assume that if I want to add in any images, I do so following the existing images in the code with a coma separator?

Jeff

jscheuer1
08-30-2016, 02:34 AM
Great!! And - Yes. that's how it works with the images. Just follow the template as established.

jswalters
08-31-2016, 07:16 PM
Hi John,
Well thought things were good however when I moved all the files into the main body and did a preview it will not run. It ask if I want to run the scripts and I say yes but nothing happens. I haven't moved it to my site yet because I don't want to mess it up. not sure of what to do at this point. I cannot get any screen shots to add to this message. Is there any email I can send them too:

Thanks,
Jeff

jscheuer1
08-31-2016, 09:06 PM
I'll send you a private message with my email. You can either send things there or post them as a response to the private message (either way, only I will see them). What would probably help the most would be a link to the problem page. You don't have to make it replace your current working page(s), you could just put a copy of it in the folder where it's meant to eventually go. Call it testindex.html or something like that. Let me know the address privately so I can check it out.

jswalters
09-08-2016, 01:25 PM
Hi John,
I have finally had a chance to get back to this. I moved everything over to my site as you requested. The URL is www.cbjeff.com/index3.html.
What I don't understand is how the simple act of moving the files from one folder to another or moving it to my site will cause it to quit working. That's all I did.
This has turned into something much more difficult than I was expect and my concern is if we do get it going and I have to add images into it, then we're back to square one with issues.
So I am interested in your thoughts.
Jeff

jscheuer1
09-08-2016, 03:02 PM
You (or your software or the host) must have done more than just copy. And there could also be other problems (tested it, looks like this is all). Anyway, there are two problems here in the source code of the page (around line #53):


<div id="fadeshow1"></div><script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: &quot;fadeshow1&quot;, //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: [
[&quot;IMAG0119.jpg&quot;],
[&quot;IMAG0247.jpg&quot;],
[&quot;IMAG0304.jpg&quot;],
[&quot;IMAG0389.jpg&quot;],
[&quot;IMAG120.jpg&quot;] //<--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>

Those (highlighted) are, as you may know, HTML entities that represent quote marks. But they're not quote marks, and they have to be in order for the code to work. Also, that stray > symbol at the end of the code doesn't belong there (remove it) Change to:


<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>

Whenever you edit something like this, you should use a plain text editor like NotePad. Web editors (WYSIWYG types and others) that generate HTML code can often do this and other strange things with javascript code unless you really know how to prevent them from doing so, sometimes even when you do. There are other ways this could have happened. And it's really no big deal. But you need to figure out if possible why it happened, or at least do your best to prevent it from happening again.

I think I see why some kind of auto-correct might have done this. It assumed it was HTML text up until:


<--no trailing comma after very last image element!

which it took to be the beginning of an HTML comment. In the part that it thought was text, it converted the "'s to entities as would be proper if it weren't code. It added the > close comment mark before the next thing that it saw to be a tag. This all points to a faulty auto-correct or invalid code (mismatched tags probably and possibly missing DOCTYPE in this case). You can fix the latter (validate the code), the former would require a different editor or if it was the host, that's real trouble.

jswalters
09-08-2016, 04:45 PM
It must be my Web editor, (Namo) doing it because all I did was copy the files to my website. I've never had this kind of problem inserting java script before though. I suspect that when I make the corrections, it will do the same.
Jeff

jscheuer1
09-08-2016, 06:27 PM
Use NotePad instead. But I think we can probably fix the code so that it doesn't do it again even in Namo. This type of commenting (though not technically required) can often work:


<div id="fadeshow1"></div><script type="text/javascript">

/* <![CDATA[ */
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>

Or possibly (note I've removed the <-- from within the code for this one, because that could be confusing to the editor when using this type of commenting):


<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>

But if you were to use the HTML 5 DOCTYPE and validate the HTML markup, it should be fine without any of that. And, even using those comments might not make up for not validating the HTML markup. But one or the other type comment might be a quick fix.

You do know what I mean when I say valid HTML markup, right?

jswalters
09-08-2016, 07:56 PM
HI John,
I really don't. As I said in my first post, I am not a coder. I use a WYSIWYG editor and have in the past inserted some Java with no problem. That's about it.
Jeff

jscheuer1
09-09-2016, 12:46 AM
OK, it just occurred to me that putting the init in the head (as the instructions for this script say) might also solve the problem. You had it originally in the body, and that can work too, so I left it like that so as not to confuse you. But putting it in the body gives more of a chance that invalid code can trip it up. Still, generally, whatever you do, it's a good idea to have valid HTML code. The basic idea of valid code (there are fine points that often don't matter, but sometimes can be crucial) is that for every opening tag - say <div> there is a corresponding closing tag </div> in that case. No more, no less. When that rule is violated, most browsers error correct for you if they can use their algorithms to guess what you mean. But an editor like Namo often will try to take matters into its own hands, misinterpreting what's meant and 'correcting' it, sometimes making matters worse. Also important are nesting rules. For example, you cannot put one <a> tag inside another <a> tag. Another key element in valid HTML is the DOCTYPE. There are many to choose from. The latest, most versatile, and simplest in many ways is the HTML 5 DOCTYPE. A DOCTYPE is a declaration at the top of the page telling the browser what standards you intend to use in the rest of the page. Without a DOCTYPE, all browsers are in what's called Quirks Mode, where each individual browser has it's own set of rules as to how to view the rest of the document. That's what you currently have on the page we have been working on.

Anyways, if none of the three suggestions I gave in my last post worked, they were:

1) Using NotePad instead of Namo
2) Using the CDATA comment scheme
3) Using the HTML comment scheme

then we can try putting the init in the head (I've also thrown in an HTML 5 DOCTYPE - all working here):


<!DOCTYPE html>
<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>
<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>
</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>&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;</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></p>
</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
</body>
</html>

One other thing we can try is to make the init an external script, but let's first see if any of these other suggestions work.

styxlawyer
09-09-2016, 07:02 AM
Using an editor with syntax highlighting would show up these problems immediately. I would recommend Editplus (https://www.editplus.com) and have been using it since it first appeared in 1998! A one-off licence for $35 for life can't be bad.