PDA

View Full Version : Thumbnail Viewer question (non centred?)



TicTacWoe
10-09-2009, 07:24 PM
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
10-10-2009, 03:24 AM
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
10-10-2009, 10:15 AM
See:

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

TicTacWoe
10-10-2009, 10:55 AM
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
10-10-2009, 11:39 AM
http://www.dynamicdrive.com/forums/showthread.php?t=16694&highlight=thumbnail+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
10-10-2009, 12:05 PM
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
10-10-2009, 12:32 PM
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
10-10-2009, 04:18 PM
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
10-11-2009, 10:40 AM
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
10-11-2009, 02:17 PM
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.

TicTacWoe
10-11-2009, 04:25 PM
Hello again Mr Helpful!, I hadnt even noticed that loading issue as the images load so fast on my own laptop so thanks for spotting that and showing how to fix it.

As for the lightwindow, I had actually looked into this already but firstly didn't realise that it could be positioned anywhere I like on my page and secondly, I was put off by the dimmed backgrounds that lightbox gallerys seem to always create (don't know if this is optional). Finally, I actually found the instructions for how to use it quite difficult to understand for someone with little experience. So maybe I should take a closer look at the lightwindow.

The thing is, I could more easily achieve what I'm looking for simply by making seperate pages for each image so I would have the page with the thumnails and then another page for each image (there are not so many so this wouldnt take long). What, if any are the downsides of doing it this way? (although I must admit having learned how to use some of the DD scripts it would seem like a shame not to use one!).

In terms of using the thumbnail script I could perhaps settle if I could have the close button (X) and description within the image itself if that is possible. Otherwise I think I'd go for the lightbox option or even just the seperate pages option.

jscheuer1
10-11-2009, 05:39 PM
Lightwindow, or any other (as they are generically known) modal script can have its dimmed background altered or removed. It is usually just a matter of changing one line in the css, often there is even a configuration option in the script itself.

Yes Lightwindow is a bit complicated because it can do so many things, but skim over it at first to see what all it can do, not so much exactly how to do each thing, then focus in detail on what appears to suit your purposes. Any questions on it should be in a separate thread though - in our javascript section - Lightwindow is not a Dynamic Drive script.

Using separate pages is generally more tedious to setup and maintain, but has the advantage of at least potentially being able to give non-javascript users a better experience. Most modal scripts do allow the non-javascript user to see the larger image (generally in the full browser window, necessitating the use of the browser's back button to return to the gallery page) and title attributes on the link in the gallery will give the usual tool tip type info that they do in ordinary HTML.

TicTacWoe
10-15-2009, 06:32 PM
Hey, sorry to drag this thread back up but I didn't think this was worth a new thread on it's own.

Firstly, I spend a day or two with the Lightwindow and have now got it working quite well and have been able to customize it to my liking.

The thing is, after implementing it, I am starting to feel it is actually too sophisticated compared with the rest of my site which is very simple and sparse in it's design.

So I was just wondering if I have been missing a very simple method for the thumbnail gallery I was looking for. Couldn't I simply achieve this by giving the thumbnails an onclick behavior to show the hidden larger images? It seems like a very simple solution but I'm guessing there must be a down side to doing this? (or is it just not the 'done' thing).

The only downside I can think of is that all the hidden larger images (9 in total 458x320 approx) would increase the page's loading time (unless there's a way to stop the browser from loading hidden layers?).

Nonetheless I might go with the lightbox gallery I'm just weighing up my options at the moment.

jscheuer1
10-15-2009, 07:46 PM
I need to go over this a bit more to answer fully, but I believe that Lightwindow can be made to appear pretty sparse if need be via its configuration. I think animations may be eliminated along with just about any other feature that you feel is too sophisticated for the rest of your site. Believe me, I know just what you mean and have at times myself made a script's presentation less dramatic so that it would fit in with the tenor of a given site as a whole.

It would help if we could have a link to what you have so far:

Please post a link to the page on your site that contains the problematic code so we can check it out.