Need help with an image problem please.

[BrandonE2X]

Thank you for reading my thread. I havent tried building much since highschool. And things have changed and I am so lost.

I am trying to put small thumbnails on the left hand side of the page, and when someone would click on them it will open the other larger version of the image in the center. Sort of like a thumbnail viewer. Problem is the hosting I currently have does not let me upload .js files to point script to. Is there any way at all to do this using internal script or html?

Thank you.

[djr33]

Any .js file's contents can just be placed within the <script> tags instead.

Before:
<script ... src="my.js">
</script>

After:
<script ...>
//paste everything here
</script>


This, of course, assumes that your host allows javascript on the pages themselves, and that it isn't against their TOS.


Basically, the reasons for an external .js file are:
1. simplicity of the page, keeping it basic, with just a link to all the text of the .js file
2. Allowing the .js file to be used in multiple pages, like a .css style sheet, or an image*, rather than embedding it, so you can save bandwidth and space/clutter on the server.
(*though I don't mean to say you can embed an image)

[Twey]

(*though I don't mean to say you can embed an image)

You can, in everything except IE... data: URIs have been a standard since 1998.

[djr33]

Hmm?
You can embed an image as raw bytes into an html file like you could a script?
Didn't know that...

[BrandonE2X]

Thank you much for the reply. That brings more light to me =). I am currently trying to use the code found on link below.

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

I got the Javascript to work! woo hoo. But its not opening it up in the center. It opens it up on the top left hand of the screen, and pushes my thumbnail down below the opned image. I guess that the .css file Is what positions the opening image in the center and overtop of the thumbnails. I put the .css code into my page, and was able to adjust the background colors, and other minor things that i needed, But it is not opening up my thumbs into the center of the screen. Any suggestions?

[djr33]

To help specifically on that, we would need a link to your page to see what the problem is.

It sounds like you did use the .css, but just to be clear-- realize that you can do the same as above with the CSS in the html file instead of as a .css file. Just copy/paste that into the style tags:
<style ...>
///paste here
</style>

[Twey]

You can embed an image as raw bytes into an html file like you could a script?

Usually, it's base64-encoded.

[antho84]

Hello,

Thanks for the advice. I could not get this script to work properly no matter what I tried. Then, I followed your advice above and inserted the .css and .js file into the html versus having them as external files. It seems to have worked.

However, the issue I'm having now is that the comments in the script, "/*********************************************** * Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/", is somehow embedded in my html. In other words while the script now works just fine that legal use statement now appears on my web page. I have tried to delete it to no avail. Let me say honestly, I have no issue with the legal use statement, I just don't want it to appear on my html page.

Any suggestions on how to remove it from my web page. The URL to page is http://photographybyelena.net/vintage.htm.

Thanks,
Anthony

[nwalton]

A quick fix would be to put it in HTML comment brackets:

<!-- /***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/ -->

I'm not sure why it's being read as text instead of code, but that should fix it.

[djr33]

Those are html comment tags.
the notice is intended for use in javascript.
The javascript tags are already present (/*.......*/)

Just place that within the script tags on the page and it won't appear anywhere but in the source.