Improved Screenshot link tags (Javascript etc)

[botman]

I always enjoy looking at all your websites, but so often I middle-click a bunch of screenshots (I used Firefox, middle-click opens a link in a new tab), only to get a row of Untitled's with no content because the screenshots were actually intended to be popped with Javascript.

Now that probably doesn't happen to a lot of your audience, but I'm sure there must be the odd potential customer who has Javascript turned off, in which case they won't be able to open your screenshots at all.

A better method of doing your screenshots would be:



<a href="screenshot.jpg" target="_blank" onclick="yourPopUpFunction('screenshot.jpg'); return false;"><img src="screenshot.jpg"></a>


That way, if the user has Javascript on, when they click the screenshot, it's popped-up like normal, and the 'return false' stops the main window from going to the URL as well.

However, if the user doesn't have Javascript enabled, or tries to open the screenshot in a new tab (me), it will still work because the Javascript isn't run, so instead it acts as a normal link, opening the URL to the screenshot -- and the optional 'target="_blank"' will mean the screenshot still opens in a new window, you just can't control the size of the window like you could with Javascript.

Oh well, hope someone finds this useful.

[GBGames]

Actually, I also have that problem with some sites. I'll definitely keep this in mind if I ever decide to make use of Javascript. Thanks!

[Abscissa]

Hey, that's a really good idea, I like it.

One question though: If the user has JavaScript enabled, can they still "Right-Click -> Save Target As..."?

[Bad Sector]

I don't use popups or JavaScript. I prefer PHP. Example (http://www.slashstone.com/prod.php?id=1) :D

[Savant]

My site is primarily PHP but I use JavaScript for the screenshots. Changing the shots in place is a lot handier then opening up a new page/window for them.

Click the shots and see: Luxor (http://www.gamesavant.com/_games/showdetail.php?game=21)

[soniCron]

I don't use popups or JavaScript. I prefer PHP. Example (http://www.slashstone.com/prod.php?id=1) :D "I don't use popups, JavaScript, or PHP. I don't even use teh intahrweb!" So how is that relavent to this conversation? (Come to think of it, how is this relavent?)

[soniCron]

My site is primarily PHP but I use JavaScript for the screenshots. Changing the shots in place is a lot handier then opening up a new page/window for them. I think that works better than the whole popup thing. I come from the school of thought that "the user already knows how to use the back button and they probably know how to use the "open in new window" button". I say, leave it up to them to decide how to view the images. That said, I prefer this design to any other. It's clean. It's clear where the images are going to open. And it's right on the page. People are going to click the screenshots anyway, they may as well be a part of the page and not take the user away, or separate, from the rest of the page.

@Savant: A little suggestion: use the LOWSRC attribute of the IMG tag to display a simple "Loading..." image. Feedback is essential, especially for users on slow dial-up.

[Savant]

@Savant: A little suggestion: use the LOWSRC attribute of the IMG tag to display a simple "Loading..." image. Feedback is essential, especially for users on slow dial-up.
I'll look into that, thanks! I've always wanted to do a "loading" image but couldn't figure how. Nice!

[Bad Sector]

"I don't use popups, JavaScript, or PHP. I don't even use teh intahrweb!" So how is that relavent to this conversation? (Come to think of it, how is this relavent?)

I mean, there is no need to use popup and JavaScript, which at the end may be disabled by the user or not visible correct in every platform. I think just by linking to the page is the best option: middle click works (for opening link in new tab), no popups open (which can be blocked by some sort of plugin or configuration), no requirement for JavaScript (which can be disabled or misimplemented). If the user wants to open the image in a new window (s)he can simply rightclick and "Open Link in New Window" ;-).

Lastly, i truly hate popups (the person who thought about them must die, go to hell, etc...). Power to the user, not to the program :-). If i want to see something in a popup i can always rightclick and select that "open in new window" option... (although i prefer to middleclick in order to open links in new tabs).

[soniCron]

Lastly, i truly hate popups (the person who thought about them must die, go to hell, etc...). Power to the user, not to the program :-). If i want to see something in a popup i can always rightclick and select that "open in new window" option... (although i prefer to middleclick in order to open links in new tabs). I'm gonna have to agree with ya, there. Popups can be quite helpful for such things as web applications, but much else... nope.

@Savant: Let us know how that LOWSRC thing works!

[botman]

Happy to help.

And yes, I didn't bother to say it but as Savant said, from a usability point of view having your screenshots load inside the page rather than a pop-up is better. The reason being if the user wants the screenshot opened in a new window, they will do it themselves. Power to the user!

But I often wonder just how many Mums & Dads use Internet Explorer without knowing you can even do that.

@Abscissa -- Yup you can still right-click and go Save Image As... The onclick event is triggered by left-clicking.

@Bad Sector -- Your method is nice, but how about Forward and Back buttons to navigate through the rest of the screenies when you open them up rather than always going back to the main page.

[Bad Sector]

@Bad Sector -- Your method is nice, but how about Forward and Back buttons to navigate through the rest of the screenies when you open them up rather than always going back to the main page.

It's done :-)

[botman]

Nice one. ;) *Goes on a clickfest*

[oNyx]

What's weird with that example... the thumbnail and the fullsize screenshot are the same file. ;)

Instead of <img src="screenshot.jpg"> there should be <img src="screenshot_small.jpg"> (and the alt tag is missing... therefore it wont validate and xhtml requires a '/' at the end of single-tag tags. So, it should be <img src="screenshot_small.jpg" alt="level 1 screenshot"/> actually).

And target="_blank"... that's a bit annoying imo (in case you have js turned off). That stuff was thrown out of the spec for a good reason. Hitting back is really easier than clicking on the 'x' (especially with a 4button mouse). Well, *I* would "mmb" the links anyways (and mmb it again for closing it).

Well, I like this approach. All three¹ user groups get what they expect.

[¹ Tab user, usual click and usual click with js disabled]

[Sledge]

and the optional 'target="_blank"' will mean the screenshot still opens in a new window

This is horrendous nitpicking, obviously, but "target" has been depreciated for HTML 4.01 strict and, ironically, its behaviour seems to be increasingly emulated with... you guessed it, javascript (http://wadny.com/news/during/2004/1/29/1707/)! Depending on how anal you are about HTML validation, therefore, you're only going to be replacing one piece of javascript with another so it's a matter of how you want the link to fail rather than whether it actually does fail or not.

"Rel" replacement (the linked technique) will, at least, still deliver the screenshot if javascript has been switched off and validate strict to boot, so is probably worth adding to your armoury along with the other approaches already discussed here.



Hitting back is really easier than clicking on the 'x'

As all good little surfers use Firefox, they can middle-click on the tab to close... certainly not as fiddly as clicking the 'x'. Instinctively, though, I would say that it is best to manage one site in one frame (or frameset) - I dislike multiple windows and/or popups too.

[oNyx]

[...]
As all good little surfers use Firefox, they can middle-click on the tab to close... certainly not as fiddly as clicking the 'x'. Instinctively, though, I would say that it is best to manage one site in one frame (or frameset) - I dislike multiple windows and/or popups too.

I use FF, but the important thing is that I want to be able to choose how to open a link. Eg screenshots mmb (usually) and for browsing the page just lmb.

With target="_blank" + lmb it gets either opened in a new tab or in a new window (depends on the settings). However, both things are annoying if you didn't wanted that.

And frames/framesets are really outdated. They are bad for users coming from a search engine (no navigation) and its annoying to reference em... eg instead of giving away a single link you have to explain what to do... like go to something.tld... click on that... then on that... blabla. Most people just can't be arsed to do that, which means less exposure for you (irc/forums/email/im - basically all important "word of mouth" things).

The overhead for the navigation is really tiny these days. A js menu for example can be external and the alternate js-free menu is rather tiny anyways. I mean its just some plain markup (a list with links) and all fancy stuff is done via css... so basically no overhead at all. Thus the tiny advantage of frames (bandwidth savings) isn't really there anymore. In real world numbers the overhead is 1,163 Bytes for a navigation block (js and js-free) with 15 links. Or in other words its about the size of a smilie.

Do yourself a favour and don't use frames ever again. All you need is some php (or whatever) and import. And even if you host doesnt support php you can do it this way by using a local server (xampp), enable parsing for htm files and then just use a tool for mirroring the whole thing as static pages (eg with httrack [disable that "mirrored by blabla" comment]).

[lmb=left mouse button, mmb=middle mouse button, rmb=right mouse button]

[Bad Sector]

And frames/framesets are really outdated. They are bad for users coming from a search engine (no navigation) and its annoying to reference em... eg instead of giving away a single link you have to explain what to do... like go to something.tld... click on that... then on that... blabla. Most people just can't be arsed to do that, which means less exposure for you (irc/forums/email/im - basically all important "word of mouth" things).

With the help of some JS and PHP scripting, you can "put frames around a page" :-). A forum i'm writing is frame-based (topics in one frame, views in another). The reason for doing that is that people will be able to see both topics and content in the same window without having to go back/forward. Also it means less bandwidth usage for me :-).


The overhead for the navigation is really tiny these days. A js menu for example can be external and the alternate js-free menu is rather tiny anyways. I mean its just some plain markup (a list with links) and all fancy stuff is done via css... so basically no overhead at all. Thus the tiny advantage of frames (bandwidth savings) isn't really there anymore. In real world numbers the overhead is 1,163 Bytes for a navigation block (js and js-free) with 15 links. Or in other words its about the size of a smilie.

I've yet to see a CSS-based menu that works with IE...

[Sledge]

And frames/framesets are really outdated...Do yourself a favour and don't use frames ever again.


I don't use frames (plural... ie a frameset), I use a one frame (singular... ie a regular page). Framesets might be out of date but frames sure aren't... your page has to at least inhabit the _top frame, after all.

I don't mind framesets when I encounter them, though... they're a legitimate way of very broadly laying out content in my book ('n' I'm pretty sure I saw it mentioned that "target" is included in the XHTML 2.0 specs so I don't think I'm alone) and probably handy for a few things when your ISP has no PHP support.

What gets my goat is having control taken away - for external links to open in a new window is, I think, logical, but anything belonging to the site should really stay put unless the user tells it not to.



A js menu for example can be external and the alternate js-free menu is rather tiny anyways.


At the moment I'm going with an external js menu (not drop-down... don't need it) - I agree, it's a small, clean and fast way of doing things. My NO SCRIPT support will probably amount to a message saying "Turn Javascript on, you idiot!", but then I'm not selling anything. ;)

[Olivier]

To display my screenshots I'm using a dependent popup opening a simple php slide show. I think this is pretty efficient.


<a href='slideshow.php?id=1' onClick="var win_shots=window.open(this.href,'shots','width=735 ,height=610,resizable,scrollbars,status,dependent' ); win_shots.focus(); return false;"><img src="image.gif"></a>

Game page with screenshot thumbs (http://oliverpearl.com/en/games/minutematch.php) (works with mid-button too).
Slide Show directly (http://oliverpearl.com/all/screenshots.php?id=1).

[soniCron]

To display my screenshots I'm using a dependent popup opening a simple php slide show. I think this is pretty efficient. Hmmm, clean, elegant, and very nice! (And I'm not one to enjoy popups!)

[Olivier]

Thanks soniCron. :)

[oNyx]

@Sledge

No one uses the term frames if he doesn't use framesets. This confusion was totally your fault :P


[...]
I've yet to see a CSS-based menu that works with IE...

Huh? Guess you mean a css popup menu (with a tree-ish structure like this (http://www.meyerweb.com/eric/css/edge/menus/demo.html)), right?

Well, yea those don't work with IE, but other things work rather well.

Eg the menu here (http://wellstyled.com/files/css-nopreload-rollovers/example2.html) or there (http://alistapart.com/) or even there (http://gaertner-baumarkt.de/). The last one has a tree structure, which is opened and closed via js or just completely expanded (term?) if js is disabled (its then displayed in a more compact fashion).

IMO there are enough options to make a slick js/flash-free navigation, which works in about any browser (after some IE specific fiddling of course).

@OliverPearl

Me likes. Good work. :)

[Bad Sector]

Yes that's what i meant :-)

[Savant]

Well, I put the LOWSRC thing into my screenshot code but it doesn't appear to be doing anything. Does anyone see a loading image when clicking on the thumbnails on my site at this point? I tried FireFox, IE and Opera ... I don't see anything.

The low res image is in the right place and if I ask for it directly, it loads.

Cactus Bruce (http://www.gamesavant.com/_games/showdetail.php?game=94)

You may have to clear your cache to make sure it spends time downloading...

[soniCron]

Well, I put the LOWSRC thing into my screenshot code but it doesn't appear to be doing anything. Does anyone see a loading image when clicking on the thumbnails on my site at this point? I tried FireFox, IE and Opera ... I don't see anything. Hmm... if you're on a really fast connection, that may thwart your attempts to see it. That said, I just thought of something that would work about 20x better in your case! (Sorry to put you through all that trouble...) Just put the large image in a table and use that loading image as the table's background. It'll show when there's no image!

[Savant]

That works when you first come into the page but once there, the image is filled in and it won't show anymore after that. Once it loads a screenshot, that div is filled with an image. Clicking on new shots won't remove the old one before loading the new so you don't get the "Loading Image..." message anymore. I need to work out how to do that next I guess...

[soniCron]

That works when you first come into the page but once there, the image is filled in and it won't show anymore after that. Once it loads a screenshot, that div is filled with an image. Clicking on new shots won't remove the old one before loading the new so you don't get the "Loading Image..." message anymore. I need to work out how to do that next I guess...
Load the "loading..." image first, then load the screenshot. It'll display "Loading..."

[Savant]

Have you actually tried that? It doesn't work. If I set the "Loading" image into the screenshot element and then immediately shove the new screenshot URL in there, it doesn't paint until the screenshot is loaded. I've tried everything obvious, believe me.

I need to read up more on Javascript to make this go I think...

[botman]

Savant, I think you could do this better with Javascript, but here is an easy trick I've used at work before:

Create a DIV and inside it put your 'Loading' text (so it's fast) or an image.

Using CSS, position another DIV the same size right over the top of it, and then load your screenshot as the background image of that top div.

This works because background images arn't displayed until they have been completely loaded. So while it's loading, you'll be able to see the div below it, which just says 'Loading', or whatever.

[Savant]

I've done that and it does indeed work for the first screenshot. But for every shot after that, it doesn't clear the div so you can see the loading message again - it just downloads the next screenshot and you wait while it does so.

There's some solution, I'm sure, but I don't have the time to look into the required Javascript at the moment unfortunately. :-/ I'll get back to it and try it again some day...

[botman]

Sorry, you are right just thinking about it, I was working in a slightly different condition. But try adding one more step:

When you go to load a new screenshot and want to see the loading text, set the top div's background to none.

Eg/ style.background = 'none';

Then change the background to the new screenshot, and it shouldn't appear till loaded.

[walkal]

In JavaScript, you can get a semblance of multithreading using setTimeout. Something like this might help:


function showpic2() {
picElem.src = "mainpic.jpg";
}
function showpix() {
picElem.src = "loading.jpg";
setTimeout("showpic2()", 1);
}


Calling showpix() should display loading.jpg until mainpic.jpg is ready to display... I think.

[botman]

The issue with that walkal is that you are stating how long you want the Loading picture to be displayed for -- regardless of if or not the screenshot has actually loaded yet.

You would need to add some sort of conditional statement to check if the screenshot was ready to display, and if not, sleep before checking again, etc.

[Bad Sector]

in the onClick handler type:



document.getElementById('image_s_id').style.displa y = "none";


then in the image's <img> tag, add:



onLoad="this.style.display='block';"

[walkal]

The issue with that walkal is that you are stating how long you want the Loading picture to be displayed for -- regardless of if or not the screenshot has actually loaded yet.
Actually, it's saying to start loading the second picture after 1 millisecond. The point of using setTimeout is just to get the first function to return (allowing the background image to be displayed) without waiting for the second image to load.

[botman]

Oh I see. That method works really nice (I didn't know the browser would wait for the image to load before swapping it over, and thought it would swap out instantly, hense my incorrect reply before).

One thing, you just have to bump up the delay a bit it seems.

When I ran it with a 1ms delay, the loading pic didn't show, but put it to 100ms or so and it works nice.

Good one.

Edit: Duh, of course the delay needs to be set higher. If the src is swapped before the loading image itself is fully loaded, you will never see it. It will start loading the screenshot instead.

Still, you will only need to load the loading image once and then it'll be cached.

[oNyx]

Since he's using jpg anyways... why not just progressive jpegs? The image builds up there (low to hi res) and its even smaller (or looks better with the same file size).

With pngs its unfortunately the other way around... progressive pngs are a tad bigger.

Waiting for it till its completely loaded without showing anything (of the screenshot I mean) is imo quite annoying. Say... its a menu screenie and I'm absolutly not interested in seeing the that, but ended up there anyways maybe because I accidently missed the link or maybe because its the next image in the gallery... either way I don't want to see it and the sooner I'm able to do something the better.

People really like seeing progress. That's the reason why there are progress bars and the like.

[soniCron]

Since he's using jpg anyways... why not just progressive jpegs? Doesn't work that way. It won't display until it's fully loaded.

[Savant]

walkal

Thanks! The time out method worked after I tweaked it somewhat. Here's the final code for those who might want to do this themselves:



<script language="JavaScript" type="text/javascript">
function ChangeScreenShot( InShot )
{
document['bigscreenshot'].src = "/images/loading.gif";
setTimeout(ChangeScreenShot2(InShot), 100);
}
function ChangeScreenShot2( InShot )
{
document['bigscreenshot'].src = InShot;
}
</script>

[walkal]

Thanks! The time out method worked after I tweaked it somewhat.
Glad to hear it.

It's amazing what you can do with JavaScript. I'm currently working on a browser-based puzzle using JS and the asynchronous server interaction techniques sometimes labelled Ajax. It's looking quite impressive I think, and I'll be looking for feedback from Indiegamer members before too long.