• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

My first Javascript page: ImageNav

ArmchairAthlete

ArmchairAthlete

Diamond Member
I was fooling around with Javascript for the first time today.

I had a little pet peeve about browsing through a series of screenshots or other numbered pictures. I'd have one loaded up in my browser, be done looking at it, and want to advance to the next one. Now, I can manually alter the URL and hit enter for the next shot or close the window and then try to find the next picture in the gallery or list in a post. Either of these take a lot more work than say... easily clicking a "next" button once?

Some sites already have it set up so it's easy to navigate pictures like this. However, often they've got a lot of bloat (like ads) built into their nav pages.

So I made a special page using javascript that lets you navigate easily through a series of shots. You merely copy the URL of the first picture you want to look at, paste it into the text box, and click the "New Series" button. If you've followed a link that includes what the variable for what an image's URL should be the script will automatically load up that first image without needing any additional input from the user. I've got it bookmarked for easy access whenever I want to browse through a series of pictures.

Here's a few picture URLs to test it out on (copy one of these of WoW screenshots first, or any other you'd like to ;-) ):
http://www.blizzard.com/wow/images/screens/all/ss154.jpg
http://wowcentral.com/images/wowc/screenshots/ss493.jpg
http://image.com.com/gamespot/images/2004/screen0/534914_20040415_screen008.jpg
http://war3.com/wow/screenshots/images/3941.jpg

And here's my Javascript page:
http://members.cox.net/armchair-athlete/imgnavmain.html

Maybe next year when I go to college I can learn to do this a bit better...

Anyone have any suggestions/saw any bugs? I don't think it'll work if your picture is something like www.blah.com/images/image01a.jpg. I also know that the page does not look right at 800x600 resolution (should be fine at 1024+, I use 1024x768 myself for my desktop).

EDIT: Tips for big images: Press F11 to toggle full-screen browsing and/or temporarily set a higher desktop resolution.

UPDATE 4-24-04: I've worked on it some more and added new features. Rainypickles's suggestion and Czar's suggestion are both implemented and working. You can change the image series without refreshing the page now. I've added an info page that it loads if it isn't passed a variable for an image and a page to display if a user attempts to use an invalid URL. Fixed a handful of bugs.

Try this link to see Czar's suggestion in action:
http://members.cox.net/armchair-athlete/imgnavmain.html?url=http://www.blizzard.com/wow/images/screens/all/ss146.jpg

Put whatever numbered picture you want after the "?url=" and anybody can browse through the pics easy. No telling them what to do/how to work it.

And of course you can see the page now spits out the URL of the current picture into the text box up there.

Bug The page doesn't look right at all at 800x600. I'm looking into this.
 
A link to the current picture... so you want it to write a hyperlink to the currently displayed picture, right?

Might not be easy but I can probably do it. It's late now so It'll have to wait till later, sorry.

EDIT: I wonder if that would require cookies. Instead of just building a new URL it would have to do that and build a new page with the image and the link in the bottom frame. Maybe there are other ways...
 
There is a plugin for Mozilla which will do this... although i forget the name 🙁

Most people use it to download all images on a page, but it also has the ability to do the same thing your script does with a key combination.

 
There is a plugin for Mozilla which will do this... although i forget the name

Most people use it to download all images on a page, but it also has the ability to do the same thing your script does with a key combination.
Click to expand...

I had a plugin for IE that downloaded all images on a page. I never really used that though.

I want to make my script work via a hotkey. It would be even better if it was a plugin like the thing for Mozilla you described. That way we IE people can do the same thing too.

I like Czar's request. I can see how it would be nice. For example, you could've uploaded a series of pictures that you want people to be able to browse through easily. You just make a link on forums with that syntax telling it what the url variable should be. I think that'll take cookies to accomplish, I'm going to look into it.

I'm a newb so I have no idea what an "internal counter" is.

Anyone know if IE plugins can be made with Javascript? (Or Java? That's gotta be similar, right?).

If I can make one with Java I can easily borrow code straight out of this script.
 
I think java script can work like php, I only know php so im not sure

if you have a .html?var1=something&var2=somethingelse you ought to be able to access those varibles with the javascript

internal counter, not sure if thats possible with javascript, but if you already have the complete url with the image name in it like http://something.net/img01.jpg, you have that as a varible you should be able to have a <input> field with just basic text where you use javascript to change the content of and that way you can just include the varible in that box, not sure how but I have seen this done before
 
internal counter, not sure if thats possible with javascript, but if you already have the complete url with the image name in it like http://something.net/img01.jpg, you have that as a varible you should be able to have a <input> field with just basic text where you use javascript to change the content of and that way you can just include the varible in that box, not sure how but I have seen this done before
Click to expand...

Oh, yea that was an idea I had. Just didn't know it was called that.

Every time you change the picture the URL in the text box should be updated as well. That might work for rainypickles.

EDIT: I've fixed bugs relating to not entering a URL in the prompt box and then clicking "cancel" or the buttons. I want to get rid of the prompt box, but I'm working on it. Also fixed a potential bug where picture urls like "http://www.blah.com/images/88/04.jpg" would probably not load right. "88/04" would get parsed for the image number I think.
 
yes, cool, especially with the url=bla in the address. never knew javascript could do that, nifty! one suggestion: indent your code =)
 
Yea the other option was cookies which isn't such a great idea. Some have them turned off, and many are suspicious of cookies in general.

You're right, the code does look pretty ugly. Maybe cause i did it in wordpad, but I could still make it look neater on my own. Maybe there's a good/free program that's good to write javascript in.
 
Originally posted by: Sid59
very nice. couldn't get it to work with firefox. prolly something wrong on my side.
Click to expand...

Well it works in IE for me without generating errors. I haven't tried other browsers (I just use IE6 with a few choice plugins right now).

Maybe Firefox has problems with some part of Javascript. I'm not sure how to fix it for that browser if it's working without errors in IE.

EDIT: Is it very rare for a page to not work in Firefox or has this happened with some other pages that use a lot of Javascript?
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top