Fullsize : A New IMG Tag Attribute

What is Fullsize all about?

Fullsize is an attempt to get a new <IMG> attribute called fullsize into the next version of HTML. Hopefully this site will get the attention of the W3C, and they will add fullsize to HTML and make it a standard. This is an attempt to bring something truely useful to all web developers and is by no means a completely polished idea, but rather a step in the right direction. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon.

Please vote for Fullsize at the bottom of this page and add your name to the list of those who support the Fullsize idea.

Update:

Many thanks to Ian Hickson for being kind enough to email back and forth with me about Fullsize being added into HTML 5. In the end he said he would not add it into HTML 5, but encouraged me to have the different browser vendors add native support for it in the actual browsers. So if any of you know anyone who works on Safari, Firefox, Opera, etc. Please let me know :)

Ads by Yoggrt

How would Fullsize work?

There are MANY fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. So many solutions in fact that it is rare to visit a website with a photo gallery that does not already utilize one of these solutions. So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? I propose adding a fullsize attribute to the <IMG> tag. By which you can references a larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a pop-up. Check out the video at the bottom of the page for more details.
Even More Details at the Google Group

Example of fullsize in action:
<img src="me.jpg" alt="Me" fullsize="me-big.jpg" />

Fullsize FAQs

Please watch the second video at the bottom of this page and visit the Fullsize Google Group for answers to your questions or concerns.

- Why do would you want to add a fullsize attribute, can't you just use Javascript?
The Fullsize attribute would be designed to make a common practice (image popups) a breeze to setup and use. Remember that Fullsize would only be active if the <IMG> tag has a fullsize attribute. If you do not add in the fullsize attribute, you can use your own custom javascript in it's place.

- If Javascript is turned off would fullsize be broken?
I am proposing that fullsize be supported natively by the browser. So if javascript is on or off... it is irrelevant.

- I would not want this kind of thing controlled by the browser, because then I would have no control over how it looks.
If fullsize is added to the next version of HTML, there could be CSS support for this (details here). However I do not see the NEED for the additional CSS support. If you don't like the way the browser displays it, use javascript. Though it would be nice to have the CSS support, I do not see it as necessary.

jQuery Fullsize Plug-in

Even though Fullsize is not currently in the next HTML spec (yet :), you can still get Fullsize for FREE! I created a jQuery Plug-In that does just what is described above and what you see in the video below. Since there is no fullsize attribute for the <IMG> tag yet, I am using the longdesc attribute instead. longdesc is a completely valid image attribute and is meant to contain a URL to a description of the image. The Fullsize jQuery plug-in is super easy to use, and provides a kick start to standardizing the way image pop-ups look and work.

Fullsize has been tested & works in: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6.
It works great in IE 6, but you will need to add your own transparent PNG support using your preferred method. I suggest DD BelatedPNG

Download Fullsize 1.1.1Downloaded 30854 times

See what's new

Only 12kb!

The minified version of Fullsize is just 12kb! The commented version is just 16kb!
After you download Fullsize, leave all the files inside the fullsize folder and reference the JS & CSS files like this and everything will work:

<link 
href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" 
type="text/css" />

<script type="text/javascript" 
src="your_path_here/fullsize/jquery.fullsize.js"></script>

To attach Fullsize to all the images on your page, all you need to do is:
$("img").fullsize();

Fullsize will only attach itself to images that have a longdesc attribute on the <IMG> tag. Example:

<img src="me.jpg" alt="me" 
longdesc="me-big.jpg" />

Fullsize can only be attached to images. Here is the list of options available to the plug-in:
shadow - true or false (true by default) : Puts a drop shadow around the image when it is clicked.
zoomInSpeed - number (200 by default) : Speed to zoom in the image on click.
zoomOutSpeed - number (200 by default) : Speed to zoom out the image on click.
fadeInSpeed - number (250 by default) : Speed to fade in the image on click.
fadeOutSpeed - number (250 by default) : Speed to fade out the image on click.
leftOffset - number (0 by default) : Offsets the Fullsize Popup Image to the left the number of pixels specified.
topOffset - number (0 by default) : Offsets the Fullsize Popup Image from the top the number of pixels specified.
iconOffset - number (8 by default) : Offsets the Fullsize Icon (top & left) by the number of pixels specified, relative to the current element.
forceTitleBar - true or false (false by default) : Forces the Title Bar to be present even when the Title attribute is empty.
extraTrigger - selector (null by default) : Selector of an extra Fullsize popup trigger. Adds an additional Fullsize Icon to the Selector Element. Requires parentSteps.
parentSteps - number (0 by default) : Climbs up the number of parents specified starting from the current element, then looks for extraTrigger. Requires extraTrigger.
destroy - true or false (false by default) : Unbinds all events to the selector, and removes all Fullsize elements from the page.
start - callback function : Custom function that is run when the Fullsize Icon is clicked.
stop - callback function : Custom function that is run when the Fullsize Popup is closed.

Here is an example of using Fullsize with options:

$(".wrapper 
img").fullsize({shadow: false, iconOffset: 2, extraTrigger: ".myClass", 
parentSteps: 2});

Here is how you would destroy the above Fullsize call:

$(".wrapper img").fullsize({destroy: 
true});

And of course, some examples. Here are some images with the title attribute on the <IMG> tag filled in:

Here are some images without the title attribute (notice the Title Bar is not present). The last image is wrapped in a link <a>.

jQuery Plug-in Updates

Version 1.1.1 - July 2nd, 2009

- Fixed display bug in all versions of IE related to the leftOffset & topOffset variables.

Version 1.1 - June 30th, 2009

- Added support for native drop shadows for the new Firefox 3.5
- Added start & stop callback functions.
- Added leftOffset & topOffset variables.
- Fixed very minor rendering issue.

Version 1.0 - March 30th, 2009

Initial Release

Fullsize Around The Web

- Fullsize Wordpress plugin by Stéphane Goetz

Fullsize Supporters: 6437 Total Supporters

Fullsize | A New IMG Attribute