Forum
Comments:
-
- on Wed 09 Sep 2009
- 02:47:02 AM UTC
onclick
You can use the onclick mouse event in an anchor tag for linking web sites, images, etc. You can request a new window / tab (user preference) or open within the current window ("_self") I prefer to open a new window. Also, you can fake the image size by using inline CSS and reduce it, in this example I use 25% for image height and width. You need to be careful, this percentage could be different than you expect if a containing DIV has width and/or height declared. This degrades nicely for those with javascript turned "off" and the link is opened in the current window / tab.
FYI ion this Forum if you use &_lt; for < and &_gt; for > (remove the underscores!) you can show proper tag syntax.example:
<a onclick="window.open(this.href,'_blank');return false;" title="1024 x 768 desktop wallpaper" href="http://i562.photobucket.com/albums/ss66/gate7wizard/bs/Bugs_WeSYP_1024x768.jpg"><img src="http://i562.photobucket.com/albums/ss66/gate7wizard/bs/Bugs_WeSYP_1024x768.jpg" style="width 25%; height:25%;" /></a>You can not use this in this Forum because Drupal sanitizes the HTML
For here, you can use 2 images, one smaller and link it to the larger one like so (live example, code to follow)
Code for above:
<a href="http://i562.photobucket.com/albums/ss66/gate7wizard/bs/Bugs_WeSYP_1024x768.jpg"><img src="http://i562.photobucket.com/albums/ss66/gate7wizard/bs/Bugs_WeSYP_133x100.jpg" /></a>Right-Click in a browser pulls up the context help menu, to add an item would require including a line to the existing menu or rewriting the menu altogether. If the user has javascript turned off... void everything you are trying to do. Never assume that all destinations (users) are the same, they are not. Some people leave everything turned "on" some turn "off" certain options, some turn "off" everything. Some browsers will auto resize a large image to fit the viewport with a "link" to view full size, others are set to just view full size and others may be set to alway resize to the current view. All you can do is offer the user the option and let them choose "their way."
w3schools has much infor for you.
Here is a page that demonstrates switching images by clicking, it uses a light bulb, click it and it "turns on" click it again and it "goes off"
http://www.w3schools.com/dhtml/tryit.asp?filename=...
More reading:
http://www.w3schools.com/dhtml/dhtml_events.asp
Hmmm...
A speech, sorry didn't mean to over explain a simple image link, LOL.
Hope this helps.
-------
Against Intuition - gives us safety through Web of Trust.
WOT Community - gives us security through unity.
Thank you all
- G7W -
- on Wed 09 Sep 2009
- 08:07:37 AM UTC
A simple example
<a href="http://i689.photobucket.com/albums/vv252/phantazm2/sun.jpg" alt="Example..."><img src="http://i689.photobucket.com/albums/vv252/phantazm2/sun.jpg" alt="A simple example..."></a>
This is not advanced at all, but simple: just click the image,
and you'll get the original, larger version... -
- on Wed 09 Sep 2009
- 07:48:57 AM UTC
More questions
@g7w,
Left clicking the image you displayed DOES indeed do what I wanted to do . . . so why do so many images on this forum have the "right click to enlarge" note? I guess that's what's confusing me the most.
So you make two images on photobucket (or whatever image store you chose), or you upload two different sized images?
Lemme' see if this works:
OK . . . it did in the preview.
For this one I created two different sized images in Photobucket (or whatever image store you use)?
-
- on Wed 09 Sep 2009
- 07:54:03 AM UTC
Keep it simple...
BobJam: So you create two different sized images in Photobucket (or whatever image store you use)?
Not necessary, in my simple example, here it's the same image both times.
Here it fits the column width, because of width=100%.
If you click it, you'll see the same image again;
but in natural size and in a new window.
No need for thumbnails... -
- on Thu 10 Sep 2009
- 01:40:00 AM UTC
so why do so many images on
so why do so many images on this forum have the "right click to enlarge" note?
IF those are my image title="right click, view image to enlarge" it's because I'm lazy.I spent enough time making the image to begin with I see no point in creating a thumbnail; a smaller immediate view that when clicked displays the original size.
So... the image is full size, WOT Forum / Drual re-sizes it via CSS so that it "fits" within the DIV container aka, content section of the board... we wouldn't want the layout to break from an overly large image. My suggestion is for those, like myself, who prefer to view the image in another tab / window at full size and to be able to switch from post comment to image for clarification, right-clicking allows for this option or to copy image location and manually paste into a new tab.
-------
Against Intuition - gives us safety through Web of Trust.
WOT Community - gives us security through unity.
Thank you all
- G7W -
- on Wed 09 Sep 2009
- 07:56:02 AM UTC
Different coding
@phantazm,
Your coding seems to be significantly different from g7w's. It looks like you used the same image both times, but the tags after the image are different. What am I missing?
-
- on Wed 09 Sep 2009
- 08:10:12 AM UTC
Different coding
There are many ways to display an image. And my version isn't the best, only the simplest. It's the same image both times; the only difference is between showing the image: <img src="source"> and linking to the image: <a href="source">
The only real difference is still width=100% to make the image fit the column...
EDIT: Just noticed that even "width=100%" can be omitted.
So this is the simplest way:<a href="source"> <img src="source"> <a>
-
- on Wed 09 Sep 2009
- 08:40:15 AM UTC
Giving that a try
Here goes:
OK, that seemed to work. Used the same image.
Edit: Well . . . the image here in the post is not as clear as the click image. Hmmmmm . . . I think I have enough info to mess around with this now anyway.
-
- on Thu 10 Sep 2009
- 01:58:07 AM UTC
not as clear
It looks the same to me and it should since it is the same image.
If you view the CSS you'll see this:
.comment img { max-width:100%; }max-width is a CSS property that allows the image to NOT be larger than the width of the comment section (containing element).
If you look in a thread, the content section for comments has a width of 506 pixels as controlled by:
#content { width:506px; }If you post an image that is... say 800x600 pixels it is redueced to max-width of 100% [of the container, not the image]. Since there is no link provided - remember, I'm lazy - just right-click and see the image, full size.
Here is a recent example.
The Antivirus Pro 2010 thread, the image displayed is reduced to 506px in width, the max-width that resizes it to fit the content comment area. Go there and right-click to view the image in it's actual size of 1024 x 768 pixels; easier to read the text that way. ;-)
-------
Against Intuition - gives us safety through Web of Trust.
WOT Community - gives us security through unity.
Thank you all
- G7W
Enlarging images
As I recall, there was a way to code image HTML to directly view enlarged images on right clicking.
Here's the code I'm using now (substitute "<" and ">" for brackets . . . and I'm using the code for a recently posted image):
You can right click these images, but then you have to go through browser specific image viewing.
For example, in FF you have to select the "View Image" item in the pop up menu, in Chrome it's "Open image in new tab", in Opera it's just "Open image", and I haven't been able to find any right click option in IE that doesn't go to the Photobucket page.
What I want to do, and what I seem to recall, is code these images so that right clicking will flat out go to an image enlargement alone, and not through a pop up window or through Photobucket.
I seem to remember that quite some time ago, phantazm told me how to do this.
And, g7w, you're a coding and an image kinda' guy . . . so what am I doing wrong?