Hello guys, in this article i will show you how to add ‘fullsize’ in blogger.
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.
!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>
<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.
Hello I'm Naeem, I'm a Self taught Web/Graphics Designer from Pakistan. I am also a regular Blogger, Tutorial Writer, Theme Designer and owner of CSS Reflex. You can follow me on Twitter.
So, in order to use this feature, would I have to host two versions of each pick (small and fullsize) outside of blogger?
ofcourse you have to host two images (small and fullsize) inside or outside blogger.
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.
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
Yeah I liked this..
but i need more tutorials..
Chethan T’s last blog post..Is it true that Senegal has found wreckage from Air France. Confirm, please!
This is so cool! Thanks so much I love it! I wish I found this sooner!
Lauren´s last blog ..10 Cool Font Sites
very very interesting, thanks a lot ..
you are welcome, brother.
Just wondering, i’m still new to html, java, and the whole lot, but isn’t this similar to lightbox? http://www.huddletogether.com/projects/lightbox2/
and highslide? http://highslide.com/
I’m just wondering, are these similar things or different concepts altogether?
Sameh Khan´s last blog ..ME♥YOU – Rotational Ambigram
This is really handy, looks and works great when it’s installed to blogger!
Great to find this hack. Anyway, can this be improved to not add ‘longdesc’, but whenever there is a link to big img it should trigger this zoom like lightbox affect?
gofree´s last blog ..2012 R5.LINE.XviD-MDMA
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
hello
Thank for your tutorial
http://www.ablogz.com/blogger/photogallery-template/
aBlogz´s last blog ..Món quà giáng sinh – Christmas Gift
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