General 'getting started' questions

[Gitane]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: This script seems to be exactly what I am looking for but am uncertain on a few steps in the process. Towards the end of 'Step 1' just below the script to be pasted into the header it says: "The code references an external .js file and an image, which you should download below:". Would that be the "thumbnailviewer2.js" (if so, where is it supposed to be saved to?) if not, what is it refering to?

I understand that the script which i will be writing/revising needs to be copied to the body of my web page and that i need to create an html window to do this. What I don't see any info on is . . . do I need to create an html window for each thumbnail and one for the main (enlarged) image frame also? Is there a more complete set of step-by-step instructions which I can access. I am not seeing enough information to actually get started here.

Where is to proper location for my image files to be saved to in order for this script to be able to access them?

Thanks to anyone who may have some advise for me,

[djr33]

Those directions are clear, if you are familiar with the terminology and the ways that HTML/Javascript/etc work.

I suggest using some introductory tutorials to HTML, and I think you will be able to work with this script better.

If you would prefer to see the source code and work from there (rather than directions) you can see this page:
http://www.dynamicdrive.com/dynamici...bnail2_dev.htm

As you build your page, you are welcome to post a link here if you have trouble so that others can look at it and help you fix any problems.


Yes, thumbnailviewer2.js is the file mentioned. You will save this somewhere on your web server so that you can refer to it in the <script src="...."> tag. You will need to know its location in order to add it to the page. In the example, it is saved locally-- that is to say that it is saved in the same directory (folder) as the HTML file in which it is used.

The same is true of the images, and you may need to change their paths to fit your organization strategy.

You can look at this code (copied from the "developer's view") for an idea:

<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />
<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com">The Moon #1</a><br />


<div id="loadarea" style="width: 600px"></div>

Note that you specify your desired image as the HREF of the <a> (link) tag.

For the example on the page that has both small and large images, those use the exact same code, except that the link, instead of text, has an <img> tag in it with the small image displayed.


I recommend starting with the standard version (maybe some trial and error will help get it setup) then after that working with the additional parameters to get it exactly how you'd like.


Also, an alternative approach that you might (or might not) find to be easier would be saving a copy of the demo page and uploading that to your website. Then you could deconstruct it, keeping the important parts, and you can then customize it as you'd like. This might be a good way for you to play with the code so that you can understand it better.

[Gitane]

Thank you for the help. I have reviewed some tutorials and am getting a better understanding. I think that one of the problems is that the thumbnailviewer2.js download is not working when I open it. I get a Windows Script Host error which says "JQuery is undefined". Additionally, the instuctions state: "The code references an external .js file and an image, which you should download below:" I don't see any image to download on this (http://www.dynamicdrive.com/dynamici...thumbnail2.htm) page. Seems like this is a simple process and I understand most everything else such as modifying the scipt, simply even get to that point.

[traq]

as for jQuery, did you include this line in your page?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

and, is it before this line?

<script type="text/javascript" src="thumbnailviewer2.js">

[Gitane]

I am getting things set up with the Image Thumbnail Viewer II script but am still having some organizational issues. I want 3 thumbnails located below the enlarged image and upon mouseover the thumbnail should appear in the large image area. First off, should all of the script for this be located in one single html window? I currently have the script for each individual image in an individual html window and am getting mixed results. Have seen on another thread that using rows and columns might work but am unsure how to get started with that. Does anyone have any script which might illustrate how to do this? or any advise in general?

Thanks to whomever might be able to help

[djr33]

As I said earlier, if you need help with your page as you build it, please post a link to the page so we have something to work with.

[Gitane]

right, I can definitely see how that would be very helpfull but my web page is not published on the web as of yet. Would it be helpfull for me to paste the script that I have so far? If so:


<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td width="20%" valign="top">

<a href="Coban-buffet-Dtl-1.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Nothing better than relaxing on the sofa sometimes">

<img border="0" src="Coban-buffet-Dtl-1.jpg" width="100" height="100"></a><br>

<br>

<a href="Coban-buffet-Dtl-2.jpg" rel="enlargeimage" rev="targetdiv:loadarea">

<img border="0" src="Coban-buffet-Dtl-2.jpg" width="100" height="100"></a><br>

<br>

<a href="Coban-buffet-Dtl-3.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="I never did quite master the game of pool">

<img border="0" src="Coban-buffet-Dtl-3.jpg" width="100" height="100"></a></td>

<td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="loadarea" style="width:600px; height: 400px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="11986" --></td>

</tr>

</table>


I have simply copied this script from the Image Thumbnail Viewer 2 (source code) page. I saw that the actual sample thumbnails on that page (with girl on couch, red leaves, and billard images) worked well so I copied the script, pasted into my window and switched out the .jpg's. At this point the enlarged image isn't even showing up.