Image thumbnail viewer - image appears in another window

[Tommisauce]

1) Script Title:
Image thumbnail viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

Firstly may apoligise if this question has been asked before, I have taken a long look through previous questions but havent come across this one.

I have just implemented the code for the above image viewer after discovering DD only this week and I think it's kick @ss!! I'm surprised I had not heard of it before but I can see me spending a lot of time on the site - and I shall be spreading the word - so many thanks for all your hard work.

OK onto my question, I have installed/implemented the Image thumbnail viewer code however when clicking on the thumbnail instead of appearing in a 'pop up' the new image appears in a new screen. I have followed the instructions but something is obviously wrong. In organising my files I have placed the, thumbnailviewer.js and thumbnailviewer.css files in the 'Gallery' folder and the 'loading.gif' is in folder: images/graphics/

Can anyone steer me in the right direction? here's the 'problem page':
http://vipink.co.uk/Gallery/Gallery.html

Many thanks in advance.

[jscheuer1]

The copy of the script on your server is here:


http://vipink.co.uk/Gallery/thumbnailviewer.js

not here:


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

So, you could do:


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

Or, move the script to the folder indicated in your code. There could also be other problems.

[Tommisauce]

Genius!! That was absolutely spot on! Thanks so much for that. It worked straight away.

I do however getting that bit working has raised a couple more questions for you.

1. On clicking the thumbnail the 'loading.gif' (as per the demo version) doesn't appear. I have checked to make sure the .gif is in the right place within my server structure, however do I need to move it or 'meddle' with the code in the .js file?

2. As you can see from the gallery page http://www.vipink.co.uk/Gallery/Gallery.html
the design is made up of elongated box. I have played around with the CSS to get the 'pop up' box to appear to the very right hand side so I can place thumbnails on the left. However I have not managed to get it right - is there a way to get the 'pop up' window to appear to the side rather than centrally on screen?

Many thanks in advance - any advise would greatly be appreciated.

[jscheuer1]

According to FF's DOM Inspector, the page is expecting the loading.gif here:


http://www.vipink.co.uk/Gallery/loading.gif

That is also where it is indicated as being in the thumbnailviewer.js file:


defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div

which would require it to be in the same folder as the page that is using it, again - the Gallery folder. It is not in that location. I poked around a bit on your server, but wasn't as lucky this time in finding the out of place file. Put it in the Gallery folder and it should show up on the page. Or, you can change the red code in the above to indicates its current position, whatever that is.

About your other question, in thumbnailviewer.css this worked out well in FF at least (changes/additions red):


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 100%!important;
top: 0;
margin-left:-50%;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

I cannot be certain how this will work out in other browsers without further testing. Just try it and see.

Also, get rid of this:


<link rel="stylesheet" href="../Templates/thumbnailviewer.css" type="text/css" />

There is nothing there. The thumbnailviewer.css stylesheet is being linked from its actual location (once again, it's in the Gallery folder) a little farther down in your code where you already have this:


<link href="thumbnailviewer.css" rel="stylesheet" type="text/css" />

I'd suggest going over your code. If this is any indication, you probably have other items that aren't doing anything or worse, actually causing problems.

[Tommisauce]

Thanks very much for this. I tried the new code for the thumbnail viewer and it worked a treat, just had to 'tweak' it a bit! And it's working like a dream. Thanks again for taking the time to sort this - it's very much appreciated.