/    Sign up×
Community /Pin to ProfileBookmark

Using JS for Thumbnail images

My photography website uses thumbnail with the option to click on for a larger image.
This requires one web page for each photo. EX: pop-photo1.htm.

With so many pop files now I wanted to make a folder named Pop and place them all inside so I don’t have so many regular pages to go through when performing an update. However the method I am using is not working although I have been told by several programers that it is suppose to.

The code I tried to use is as follows:

[code=html]
<font color=”#CCCCCC”>
<a href=”javascript:one(‘pop/pop-alabaster.htm’)”>
<Img HEIGHT=”144″ WIDTH=”190″ border=”0″ src=”images/alabaster-s.jpg” style=”border: 3px solid #CCCCCC”></a></font></a></font></td>
<td width=”50″>&nbsp;</td>
<td align=”center”>
[/code]

The second line of that code is here:

[code=html]
<font face=”Arial” color=”#CCCCCC” style=”font-size: 9pt”>
<a href=”javascript:one(‘pop/pop-alabaster.htm’)”>click for larger
image of “Alabaster</a></font></b></td>
<td width=”50″>&nbsp;</td>
<td align=”center”>
&nbsp;</td>
<td width=”50″>&nbsp;</td>
<td align=”center”>
[/code]

(If any of that looks strange, by the way, it isn’t my fault. I paid someone to design it for me. 😮 )

If I try to do that (of course having moved the pop.htm into the pop folder) when you click on the picture and the pop screen appears it is nothing but a dreaded x. So the pop htm can’t find the picture even though it hasn’t been renamed or moved.

Can someone help please?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@bathurst_guyApr 06.2005 — Eek.

Do you have to use JS? And do the large images need to be on a page, does this page contain extra info or just the image.

You could just do this:

<a href="images/hi_res_image.jpg" target="_blank"><img src="images/low_res_image.jpg" width="x" height="x" alt="pic" /></a>

And just add a note saying "You can click on an image to see it in a larger view, this will open in a new window."

Also the reason for the image not displaying could be that the images link has now chagned, rather than being in folder images in the same directory, images is now a directory below, so on the popup pages you need to change the src to "../images/image01.jpg"
Copy linkTweet thisAlerts:
@cathelleauthorApr 06.2005 — Regarding the information on adding the / before image...I only had time to try it with one image but it worked beautifully! I can't believe that never crossed my mind. I was trying all kinds of things.

I'll give your other suggestion a try, though I had warnings about letting the browser resize the image for me. The new window doesn't offer any more information on the photo, just a better view. So this would not require another entire page for each photo? Would I still have to have two sizes for each photo? Right now I have a small one for the thumbnail and another photo for the pop up. Sure is time consuming to update my work!
Copy linkTweet thisAlerts:
@bathurst_guyApr 07.2005 — Yeh it's recommended to have 2 photos, one thumbnail which is a smaller file size and the larger view. This enables the user to view the thumbnails quicker than if it were high resolution, and then if they want to see the full size image they are more likely to wait for the image to load because they're interested.

You don't have to have a page for the larger image, it'll save time if you don't. But yeh there are a few minor problems with letting the browser configure the image size, but it will mostly show it at 100% unless it's bigger than the browser size then it may shrink it, but not really anything to worry about.

And yeh using just an anchor and having it open in a new window "_blank" is alot better than the javascript, just incase their browser doesn't support javascript, then they wont be able to see the larger image... I think you should only use javascript in these cases if you wanted to give the new browser window a name, a size or a position.

So yeh, other than that the only other tips I can give you is try to use CSS rather than the font tags, have all of your code in lowercase, include the DOCTYPE if you don't have it already, and if you read up on CSS you should be able to lose the tables aswell. http://www.w3schools.com/css/default.asp

Any other questions don't hesitate to ask, I only started learning CSS 2 months ago - and it's really easy to pick up.

? bathurst_guy
×

Success!

Help @cathelle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...