Thumbnail Viewer question (non centred?)

[TicTacWoe]

1) Script Title: Thumbnail viewer

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

3) Describe problem: Hello, I've been tyring out the thumbnail viewer and really like it so far and I've been able to successfully edit some of it's features.

However, I was wondering if it is possible to alter the script so that the larger image does not appear centred on the page, I'd like it to appear at a specific location within a large div on my page.

thanks in advance for any help

[TicTacWoe]

I did a search on the forum and found a similar thread to the one I started here earlier which showed ways of editing the thumbnail viewer so that it does not always centre the larger image. However, it seems the code for the script has been altered since that post so the advice in it is no longer relevent.

Anyone got a suggestion, I know it must be possible now so I just need someone to point me in the right direction.

Thanks in advance

[jscheuer1]

See:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

[TicTacWoe]

Hi John and thanks for the reply, but I don't think that script does what I want. I need the thumbnails to open up into a larger image on top of where the thumnails are located, with a little x to close the larger image as in the other thumbnail viewer that I want to edit. Perhaps this is possible with the script you linked me to?

[TicTacWoe]

http://www.dynamicdrive.com/forums/s...bnail+centered

this is the thread I was referring to, you seem to be advising this guy how to do exactly what I'm looking for but the parts that you tell him to edit no longer seem to exist in this script when I look for them.

[jscheuer1]

That was for an older version of the script. You are right, it will not work with the current version. To make matters worse, that older version of the script didn't have the type of display I think you say you want, and it had other issues. So reverting to it would not be a solution.

The script I suggested in my previous post can probably be more easily adapted to get what you want. It already puts the enlarged image in a specific division which you can put wherever you like on your page. I think it then becomes just a question of getting that division to look like you want it to and to have a working close button.

But I'm not exactly clear what you are going for there, could you be more specific? Like where exactly should this division go? Would it be in the flow of the page, or would it be over the existing content when visible?

[TicTacWoe]

Hello again John, thanks very much for the help. I have 9 thumbnails arranged in 3 rows of three contained within a div so when clicked I want the thumbnails to load the larger image over all 9 thumbnails in a frame equal to the size of all the thumbnails combined. So to do this using the second thumbnail script I suppose all I need is a working close button. How would I add this to the script you linked me to?

thanks again

[jscheuer1]

Looking at this more closely, I think you were right at first in your choice of scripts. Sorry to put you through all that.

The thumbBox (as it is called by id in the script) can be positioned anywhere you like using overriding style in the thumbnailviewer.css file, ex:

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

Notice the use of the !important keyword, this tells the browser to ignore what the script is telling it about centering the box on the page. If the rest of your layout is fixed enough, this will be all you need. However, for example if the layout is centered, the left dimension would vary depending upon how wide the browser window is. If that's the case, we would need to have the script append the the thumbBox division to a division in your layout that is in the right spot and which has position:relative set for it. Then the top and left properties of the thumbBox would be in reference to it. Even if you think your layout is fixed enough to skip this step, it may be a good idea anyway. To have this happen add this code as shown to the thumbnailviewer.js file:

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
document.getElementById('thumbBoxContainer').appendChild(document.body.removeChild(document.getElementById('thumbBox')));
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnai . . .

This will allow you to place a division:

<div id="thumbBoxContainer" style="position: relative;"></div>

anywhere on the page that you like in order to position the thumbBox in relation to it.

[TicTacWoe]

Thanks so much John, I tried that out and it worked very well indeed. I've been trying out some customization of the script but I'm now getting more ideas about what I'd like to do with the script.

I was wondering if using further editing it would be possible to do the following-
A) Add left and right arrows to the larger images (when loaded) so that when clicked the next image
B) Add a title caption to the larger images where the 'Close X' is by default
C) Move the position of the 'Close X' function so that is over the image or even better so that it's actually within the larger image in the top corner

Sorry about all the extra questions! Just looking for some pointers in the right direction or someone to tell me whether this is even possible!

Thanks again

[jscheuer1]

Well let's see, where to begin. I think I'll start by saying that I hadn't tested this out when I posted. Since then I have and there is a slight problem. If the loading image appears, which only happens when the larger image takes some time to load and is not cached, it still is centered on the page, not in this new thumbBoxContainer division. To change that we add another line to the init function:

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
document.getElementById('thumbBoxContainer').appendChild(document.body.removeChild(document.getElementById('thumbBox')));
document.getElementById('thumbBoxContainer').appendChild(document.body.removeChild(document.getElementById('thumbLoading')));
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnai . . .

And we must then adjust the thumbLoading position in the css file to suit. This will only work out well if all of our larger images are of the same size, but from what you describe as your layout, it sounds like they probably are:

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
left: 200px!important;
top: 175px!important;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}

Adjust those numbers as desired. If all of the larger images are not of the same size, it might be better not to make any modification to either the script or the css for thumbLoading. That way at least the thumbLoading will be uniformly centered on the page each time.

Now, as to the requests, it sounds like you are trying to turn this into something more akin to Lightwindow, which has many options and can be configured to do all those things, as well as be positioned wherever one wants on the page, at least in a fixed manner, perhaps even be forced into a container as we have done here for this script. Have a look:

http://www.stickmanlabs.com/lightwindow/

But if you are willing to settle for just moving the close button and description (yes this script already has a description capability) that can probably be done via minor script and css changes, or perhaps by css changes alone, so I'll look into that.