Firstly Download these two scripts to your computer FancyZoom.js and FancyZoomHTML.js
Upload these files to your server which you use to upload js files or check from here.
Login To Blogger Now Goto LAYOUT > Edit Html and Find </head> tag
Place the below codes before it.
<script src='http://Your_upload_url/FancyZoom.js' type='text/javascript'></script>
<script src='http://Your_upload_url/FancyZoomHTML.js' type='text/javascript'></script>
Change the scripts url above in red to yours where you uploaded these js files.
Now find this code <body> in your template codes.
And replace it with the below code:
<body onload="setupZoom()">
Now Click SAVE TEMPLATE
Now whenever you embed image in your post use cods like this below-
<a href="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif"><img height="200" src="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif" width="300" border="0" /></a>
Width="300" and height="200" are the size of images that are shown in the post,so that the shown images are smaller that the original images.Means whats the actual size of the image make it small in post so that when someone click it will zoom up to its original size.
When you click theses images they will be zoomed on your same screen and click zoomed image again to make it small again.
For Demo check the image on this blogger and click it, to zoom it and then click again zoomed image to make it small.
I hope you would like this hack for sure. Best Of Luck !!
19 comments:
nice blog
Is this hack good or bad for SEO ?
It doesn't affect seo Friend.....you can use it..
Thanks for the given me the information about the Zoom our images in blogger posts. This a quite nice information which i will use in my upcoming project.
i've done everything the author said but i have some problems...
when the image is clicked four or five icons of empty images appeared in the right. when i click the image for the second time the script works but the mentioned empty images icons appeared at the corners of the zoomed image. the links are supposed to be shadow6.png, close.png at /images-global/zoom/ folder of my blog.
any help???
ya i can just say that there is one problem in bloggers,when sometimes we use too many javascripts hacks in our design,some scripts stop working ,that is the problem...are you using many hacks with diff javascripts..i would say you first try yourself on dmo blog...and hack is working fine as its working in my demo blog
please give step by step of creating zoom in post
:|
@doom Ok I have made some modifications in post hope will help you now.
Hi,
You have a very nice site with great information.
for more check out................
A.S.
www.allyouneedzone.blogspot.com
This is a fun and useful hack :-)
However, what I really need is to apply the zoom in only the posts I decide - not all posts.
Is there a way to modify this hack so that it can be applied on a per post basis?
@ Wr Just apply link to images you want to zoom and dont apply to others as i told
Sorry I wasn't clear.
I want to link to all images
as in
**a href="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif">** **img height="200" src="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif" width="300" border="0" /**
but only Zoom *some*.
Is there a way to call the js files in an individual post?
Excellent Blog :-)
@ Wr Ok Then Try this by css reflex It might be helpful for you and it works better than mine.
Full Size Image Blogger
Thanks for that.
Yikes! that's link goes to a lot long script stuff (in dedicated places over which I have no control).
OK it does what I want it to do but I wouldn't call it in any way "better" than the one you published. Yours is far more elegant.
I guess I'm going to have to find a way to expand yours or vastly reduce the other :-)
Case Solved.
For every image that is not required to zoom, just begin the embed image code like this
a rel="nozoom" href="http://...
.
I also had some trouble with host the .js file at "Hotlinkfiles(dot)com" - the zoom would not consistently work, so I changed the .js extension to .txt and hosted them at "Fileden(dot)com". Works just fine.
The results can be seen here
http://wolvenrevelation.blogspot.com/2009/07/blog-post.html
Its ok but image is taking a long time to zoomm..
That seems only to happen the first time the zoom image is clicked and then not always.
Possibly it's slowness at image host but I'm not certain.
Thanks.
Also doesn't work in side bar
Working on it.
awesome.. thanks
Post a Comment