WebAppers

/ best free open source web resources /

Shopify

Fullsize jQuery Plugin & A New <IMG> Attribute Proposal

Posted · Category: Gallery, GPL License, MIT License

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. 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? Drew Wilson proposed 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. You can vote for Fullsize and add your name to the list of those who support this Fullsize idea.

Even though Fullsize is not currently in the next HTML spec yet, you can still get Fullsize jQuery plugin now. Since there is no fullsize attribute for the <IMG> tag yet, he is 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 IMG Tag Attribute

Requirements: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6
Demo: http://www.addfullsize.com/
License: MIT, GPL License

10 Comments
  • http://blog.capsule.org Thibaut Allender

    First I thought it was an April Fool, but then I’ve seen the actual website behind this project… Well, the idea is not bad but does it make sense with today’s connection speeds? I mean, tomorrow we can use the big pictures directly and resize them using width/height attributes or some CSS to show them as thumbnails.

  • harrald

    so when javascript is turned off people are left with only a thumbnail? why not add an anchor and solve multiple problems at once?

    really this MUST be an april fool.

  • http://www.drewwilson.com Drew Wilson

    The Fullsize attribute would be designed to make a common practice (image popups) a breeze to setup and use.

    You will still always be able to use your own javascript method if you choose. But if you would like to quickly provide this functionality, that is what Fullsize would be for.

    Thanks!
    Drew Wilson

  • http://www.drewwilson.com Drew Wilson

    harrald,

    You can add an anchor if you want. That will still work. Most these types of questions are answered in the videos or on the Google Group.

    I am proposing that Fullsize be supported natively by the browser. So if javascript is on or off… it is irrelevant.

    If you are referring to my jQuery plugin, then if javascript is turned off none of jquery would work at all anyway.

    Let’s be realistic here, only 5% of users browse with javascript turned off, so it is not an issue in most all cases. http://www.w3schools.com/browsers/browsers_stats.asp

    If you are worried about your users having javascript turned off then don’t use javascript. But I am proposing that Fullsize be supported natively, and not rely on javascript.

    Thanks!
    Drew Wilson

  • http://blog.capsule.org Thibaut Allender

    To me this is reinventing the wheel.

    If you have javascript, you don’t need an extra attribute to tell your big picture has the same name + “-big” at the end of its name (excepted if your big picture name doesn’t start with the same, which would be an bad pratice but who knows…).

    It would be easy to parse the src, get the filename and add “-big” at the end. It’s just a naming convention you have to stick to.

  • http://www.drewwilson.com Drew Wilson

    Thibaut Allender,
    I agree with you that the wheel has already been invented. But anytime you want to do this effect you must “build” the wheel. Even though it has been invented, as you said you must use javascript to build the wheel.
    I am suggesting the wheel be built for you already, so you can quickly and easily use it.

    Of course you could always build your own wheel via javascript if you would like.

    But this effect is sooo common that myself and others think it should become a standard on the web.

    Thanks!
    Drew Wilson

  • http://blog.capsule.org Thibaut Allender

    I understand your position but hey, HTML specs have never been established to solve JS problems! As pointed out by Harrald, the wheel is the anchor tag, for now. Add this attribute you want, add an “overlayer” capability to any browser and you don’t need JS developers anymore. That’s cutting branch your sitting on.

    Do you really want this? NO, that’s the same as creating a history.go(-1) link, your reinvent the wheel, it’s the back button + it doesn’t work when javascript is disable OR there’s no referer.

    Fullsize attribute? Come on… The img tag is refering to itself, the src attribute IS the full size of the img tag. What would be the “full” size then if the src attribute is already the full size? This is an ugly patch to HTML standards to achieve something that is already possible.

    Sorry again but I’m more concerned by IE6 than this fullsize attribute :-)

    If you really want to add some granularity to HTML, patch the OBJECT tag… an object could be an image, and it could have a fullsize parameter.

  • http://www.steinhaug.com/ Kim Steinhaug

    Great idea! Using a new attribute, fullsize, is a great idea. I do not like the _big idea, since this means I am required to use same naming convention on the image! Why would I want to be locked down to this? What if the image is hosted somewhere else?

    Using this attribute also adds more functionality, since the acnhor around the image could lead to something else – a page! Today the anchor would lead to the big image, I would very much like to both show the large image size and be able to link to another destination.

    The fullsize attribute with solve both theese scenarious, and give me the power I need to feel confortable with the sollution.

    Example:

    I could now enable the user to zoom the image for maximum pleasure, and you could still click the thumbnail to retrieve the real destination of the image!

    Naturally we could just add the attribute to the SRC and don’t give a crap about the specification, alter the imagepopup scripts and do it ourselves as I explained. However – we do love the standards, :D

  • Ollie

    Or bring back lowsrc and use that as your thumbnail image.

  • http://www.rendered-dreams.com/blog Adam Bellas

    Thank you, Ollie, I was thinking the same thing. As a matter of fact, I suddenly wondered where the ‘ole boy had gone to (lowsrc). I never use it anymore, but didn’t realize he’d left the party.

    It is present in this paper on DOM Level 1 near the bottom under HTMLImageElement:
    http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html

    However it’s not in the HTML 4.01 spec:
    http://www.w3.org/TR/html401/

    It’s not put back in the HTML 5 working draft either. Upon reading there, I also noticed that the longdesc attribute has so far been struck from the spec.
    http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
    (so much for that longdesc hack)

    I vote for the return of lowsrc. I think it’s relevant again.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons