Escape Artists
The Lounge at the End of the Universe => Gallimaufry => Topic started by: BrandtPileggi on October 02, 2007, 03:27:42 AM
-
I'm building a website, and, among many other things, I was wondering how do you code for when you have a small picture that someone can click on and it links to page with just a larger view of the picture, to have the picture be fit to screen (in proportion) with the option of clicking on it to view at full size? Jesus, did that make any sense whatsoever? I'd edit for clarity but I'm so damn tired. You know what I mean.
-
Okay, if I think I understand what you're trying to get...
Make a thumbnail, which is usually either a compressed/fewer dpi version of the large picture or a cropped portion of the large picture.
Nest the image tag inside a link tag, the URL of which is just the large version of the picture in your directory.
When the user clicks on the linked picture, I think most browsers will automatically "fit on screen"ify the image, and the user can use the mouseover magnifying glass to increase the picture to actual pixel size.
Does that help / is that what you meant?
Example: {a href="http://yourdomain.com/img.gif"}{img src="http://yourdomain.com/img_sm.gif"}{/a} (only with <>s obviously)
With BBCode instead:
(http://s14.photobucket.com/albums/a340/TheDisreputableDog/Moon/th_100_7148.jpg) (http://i14.photobucket.com/albums/a340/TheDisreputableDog/Moon/100_7148.jpg)
-
Thanks for the help ddog. I'm actually thinking about after you click on the thumbnail and it directs you to the page with the larger version. The larger version of my picture is HUGE and I'd like it to fit to screen intitially. You know what I'm talking about? How the pictures are fit to screen and if you roll your mouse over it, it shows a magnifying lense for soom to real size.
-
http://www.htmlgoodies.com/primers/html/article.php/3478181 (http://www.htmlgoodies.com/primers/html/article.php/3478181)
To get an image to fit-to-screen initially is very difficult because everyone's browser is a different size. Better to do a thumbnail that links to the direct image.
-
Thanks for the help ddog. I'm actually thinking about after you click on the thumbnail and it directs you to the page with the larger version. The larger version of my picture is HUGE and I'd like it to fit to screen intitially. You know what I'm talking about? How the pictures are fit to screen and if you roll your mouse over it, it shows a magnifying lense for soom to real size.
Maybe I'm spoiled because I use Firefox, but shouldn't the browser do that automatically? You can test it on these large desktops (http://www.ibrium.se/backgrounds.html). You shouldn't have to use code of your own to get it to do this.
-
I do have a thumbnail that links to the picture. The problem is with the picture tha tis linked. It's very large. I've seen sites where the linked picture, when too large, fits to the screen and you can enlarge it by clicking on it. Yeah I thought it would be automatic but for some reason mine isn't doing it. When I click the link I only see about a quadrant of the larger pic and have to scroll around to see it all.
-
You might have to have nested thumbnails then. Have the small thumbnail link to a page that just has your image sized to appropriate dimensions (maybe with a blurb saying "Click for really full-size" or whatever), and that image can in turn link to the original image.
It's kind of bloating your interface but I can't think of anything else if your browser doesn't resize automatically and you want to make sure that everyone can have the same results. Others may have better input.
-
Thanks Ddog and Listener. I'll give it a go.
-
I do have a thumbnail that links to the picture. The problem is with the picture tha tis linked. It's very large. I've seen sites where the linked picture, when too large, fits to the screen and you can enlarge it by clicking on it. Yeah I thought it would be automatic but for some reason mine isn't doing it. When I click the link I only see about a quadrant of the larger pic and have to scroll around to see it all.
That's controlled by the browser, most of the time. I'm sure there's a script solution you can use as well.
-
My solution is to go to a site, that does what I want to do, and then I look at the source code. If it works for them, it will work for me.
-
Hey Russell. I tried that but 'view source' is always greyed out.
-
New question!!
What's the script to get your page to scroll down?
Eg. I have something near the top of a page that referes to something defined lower. What's the code that makes the word up top clickable to scroll the page (and hilight?) the clicked on word?
-
New question!!
What's the script to get your page to scroll down?
Eg. I have something near the top of a page that referes to something defined lower. What's the code that makes the word up top clickable to scroll the page (and hilight?) the clicked on word?
<a href="#downthere">Click here to go down there and look at something.[/url]
Then...
Lorem<a name="downthere"> [/url]ipsum dolor sit amet, consectetuer adipiscing elit. Donec id ipsum. Maecenas facilisis, ante sit amet tincidunt egestas, libero...
Note the first space as having the anchor tag (the <a>) in it -- the reason I do that is because sometimes some browsers will read the text inside the anchor with the link style instead of as nothing at all. If you're good at stylesheets you can surmount that problem.
(replace the slash-url-in-brackets with slash-a-in-angle-brackets)
-
AWESOME!!! thanks Listener!!
-
How would I do the same thing from another page? So that the link goes to the page AND scrolls down to the right part?
I've tried <a href="http://websitenamehere" a href="#downthere">
<a href="http://websitenamehere" "#downthere">
As is likely obvious to you, those didn't work. I have a few more things i'll try but thought in the mean time i'd throw this up here and see if it gets any bites as it's likely to be a rediculously simple answer.
Thanks again everyone
-
Smush them together. :) Sooo technical, I know. Like this: <a href="http://website.com/pagename.html#downthere"]
-
Ha! It doesn't do it for me but when you suggest it... Effing interweb. Thanks Ddog!
-
Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a "#" character followed by the anchor name (the fragment identifier). Here are some examples of such URIs:
* An absolute URI: http://www.mycompany.com/one.html#anchor-one
* A relative URI: ./one.html#anchor-one or one.html#anchor-one
* When the link is defined in the same document: #anchor-one
Thus, a link defined in the file "two.html" in the same directory as "one.html" would refer to the anchor as follows:
...text before the link...
For more information, please consult <A href="./one.html#anchor-one"> anchor one[/url].
...text after the link...
http://www.w3.org/TR/html401/struct/links.html#h-12.2