Need Help With Pixelating Slide Show

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

Code:

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

Code:

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

Code:

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

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

Code:

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

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

Code:

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