How to add Fullsize to Blogger

fullsize-a-new-img-tag-attribute

Hello guys, in this article i will show you how to add ‘fullsize’ in blogger.

What is Fullsize 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.

Placing the code:

!Before changing your template, don’t forget to backup your template and your widgets!

Follow these steps → Login → Layout → Edit HTML → and add the following code before </head> :


<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.js' type='text/javascript'/><link href='http://www.wallheaven.com/fullsize/fullsize.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://www.wallheaven.com/fullsize/jquery.fullsize.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function(){jQuery("img").fullsize([]);});
</script>

Example of image tag:

<img src="URL_SHORT_IMAGE.jpg" alt="Me" longdesc="URL_FULLSIZE_IMAGE.jpg" />

This image tag is used in the post, longdesc represents the full image that will open.

Demo:

Take a look @ it in action!

24 thoughts on “How to add Fullsize to Blogger

  1. Okay, so the reason for the question was that I don’t understand how I would host the images on blogger without them being separate posts. I wish you had a more descriptive explanation of the actual process involved.

  2. This really nice 😀
    @Kelly Patterson this donot mean that you have to host two images on two different posts, see this is what you do, upload a small image, and then upload a larger image, either to picasa or to a image hosting site, and then try this feature, hope this helps 🙂

  3. Pingback: DesignUnder
  4. Pingback: Photoplus – Premium Blogger Template « Free High Quality Blogger Templates
  5. Pingback: Blogger İçin Portfolyo Teması | Eray USTA
  6. Pingback: Blogspot Portfolyo Teması Ve Kullanımı | Eray USTA
  7. I found the bug:

    1. This won’t work with image hosted by blogger unless you remove ‘-h’ from the big img.
    2. The image seems to fit to windows size which defeat the purpose of viewer wanting to c the original size. Can you add an option to expand?

    Looking forwards to your improved version.
    .-= gofree´s last blog ..2012 R5.LINE.XviD-MDMA =-.

  8. Pingback: PhotoGallery Blogger Template - Photo Gallery Blogger Templates - aBlogz Template | aBlogz
  9. I have included a title bar into the images that pop up, and Id like to be able to include a clickable link. Any ideas how I can add a link into the IMG SRC code?

    Here’s the code Im using at the moment:
    (img alt=”A_DESCRIPTION_FOR_YOUR_IMAGE_GOES_HERE” title=”TYPE_YOUR TITLE_HERE_FOR_THE_TITLE_BAR” longdesc=”LINK_TO_THE_FULLSIZE_IMAGE” src=”LINK_TO_THE_THUMBNAIL” /)

    Make sure to replace the ( and ) with …
    .-= Kazam Media´s last blog ..Richard Horsfield – Photographer =-.

  10. I find your site very useful.
    .-= Hannah Montana´s last blog ..Hannah Montana Forever Last Episode Recording Finished =-.

  11. dear all,
    after so much tries i didnot get any google adsense account ,google is refusing my request over and again ,u r showing google ads on test page is there any tricks……………..if yes, plz,suggest me to get one………….

    thanks

  12. Hola…

    Increible el demo de esta galería. Pero tengo un problema muy básico y lamento hacer estas preguntas!

    Dejo mi blog test que estoy haciendo para probar esta plantilla:

    http://testerblogger-coptom.blogspot.com/

    Puse unas fotos de cars la película, pero no se como hacer que me salga la foto siguiente al lado de la que ya está y conformar la galería con todos los thumbnails visualizados.

    Si me pueden ayudar seria perfecto, pueden ver mi código fuente, que debe estar con algo malo.

    Gracias

  13. I’m sorry, but no, you don’t 🙂 I use the same url in both cases
    please take a look at my code – it works just like watch:

    (img border=”0″ width=”187″ height=”” title=”” alt=”” longdesc=”URL_IMAGE.jpg” src=”URL_IMAGE.jpg”)

    this one’s for vertical orientation; for horizontal I add the height number.

Leave a Reply