What's wrong w/ my site system?

One page being loaded too many times

[geekay]

An important page of my site consists of a descriptive list of images, several hundreds of them. Thumbnails are not used. In addition there are some graphics on the page. Actually that list is made up of ordinary hyperlinks, one for each image.

As I did not want to use Target Blank in all those links the result is that every time someone decides he wants to look at a certain picture the jpeg opens in the same window. If he wants to see more he clicks Back and selects a new link. The list page with its graphics was loaded again.

Most people are not interested in seeing all or most the pictures, but occasionally someone is. And some visitors have disabled their browser's cache function, so that poor page and its graphics are being loaded by the same person hundreds of times with a 200 response.

This is not a serious problem (so far), but is there some cleverer way? Log statistics are distorted. With Target Blank code added to every link more overall bandwidth would probably be used up than the present system does. I would not like to split the list.

[grandpa]

One possibility - open the image in a popup page. I do that on a commercial site, providing a larger view than on the page. It's easy enough to code "Close this Window" links too. You still have to load the original page once, but after that any image can be viewed without re-loading the page every time.

Here's how:
In the HEAD section of your main document add some javascript:
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=435,height=550,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

Then, on your links, call the js function popup:
<a href="http://www.mydomain.com/ImageName.php" onClick="return popup(this, 'pop')"><img border="0" src="http://www.mydomain.com/images/ImageName.jpg" width="120" height="130" alt="Image Description"></a>

This example is linking the image on the original page, and will display a larger/close up image. It would work as well for a text link.

In the ImageName.php document, there are 2 pieces of js. Both are placed in the BODY.
<script type="text/javascript">
<!--
window.focus();
//-->
</script>

and

<a href="javascript:window.close();">Close This Window</a>

These bring the popup into focus (on top) and close the popup, respectively.

This document also contains the link to the larger image:
<img border="0" src="http://www.mydomain.com/images/MyBigImage.gif" alt="Image Description">

My popup page is called ImageName.php. You can use html, php, asp.. whatever you like.

[geekay]

There will be a lot of code and coding, but it is a Professional solution. I am grateful for this information and will be making experiments. Maybe there is no very simple solution to my problem.

[grandpa]

It's similar to using Target Blank, except that the window you open can be controlled a bit more, and I think it's a bit friendlier, and more intuitave for the user. They don't get sent off to another window, per se.. the popup rest atop the original and it's pretty easy to see where you are and what just happened when you clicked the link.

Depending on the number of images, yes it can be a lot of coding. I only had 30 or so images to work out.

Professional solution

... haven't heard that in 5 or 6 years... :)

There might be a simpler method forthcoming. This is, after all, WebmasterWorld.

There is one caveat. I did more than show the larger image on my popup pages. The pages were optimized with content and had a shopping cart link included. As good SE's will do, they began listing my popup pages. Unfortunately, I didn't create a link back to my site, and when I finally did it opened my site in the popup. Very un-cool.

A half-dozen solutions later, I settled on checking the referrer on the popup, and if it wasn't home (my site) then I opened the relevant page instead of the popup. And if you regularly block the referrer in your browser, you can't view those popup image pages. So yes, it got more complicated. A meta NOINDEX directive would have prevented all that, but I really do create pages to get indexed.

[andye]

I would have thought that the extra bandwidth used by repeating the text 'target="_blank"' a couple of hundred times would be insignificant compared to the unthumbnailed images themselves.

Just my $0.02. HTH.

Andy.

[geekay]

To Andy. There are neither thumbnails, NOR autoloading images on my page (except for a few graphics for layout). You have to manually click on each and every link text in that picture list in order to get the pictures you want to see. It will then be served in the same window as where the list was, as opposed to opening a new browser window for that picture. The latter method is considered bad web design by some internet users.

[MatthewHSE]

Have you looked into an image gallery script? These often have options to load thumbnail images (or text links to images) in a popup window. Since it typically works off templates, pulling data from a database, the coding for such a system is pretty negligible.

[rocknbil]

.....
href=mylink.href;
window.open(href, windowname, 'width=435,height=550,scrollbars=yes');
....

There is one thing wrong with this solution. gekay states

Target Blank in all those links the result is that every time someone decides he wants to look at a certain picture the jpeg opens in the same window.

The parmeters of the window.open method are url, windowname, and sizing parameters, with windowname being the ID of the window. In your example, this will always be 'pop', and the pics will ALSO open in the same window if the user does not close it.

Add the following to your code and a semi-unique ID (unique enough :0) ) will be generated with each click that will guarantee an actual new window with every click. Also it eliminates one more parameter you'd have to pass to the function. I prefer to pass image size and a title instead, but that's just preference:

var day = new Date(); //Since time marches forward,this
var id = day.getTime(); // id changes with each second.
href=mylink.href;
window.open(href, id, 'width=435,height=550,scrollbars=yes');