Ajax LightBox for Blogger based blog
Image credit by Kengo @ Flickr.
This post is the English version of my previous post about using Ajax LightBox for a Blogger based blog. You will find how to put and use LightBox effect which is AJAX based as its backend. We can tweak some images to be displayed neatly cool and animated by using AJAX. So here I've a modified version of LightBox 2.04 so it can be used on Blogger based blog. Using this tool is absolutely easy as one tweo and three steps. You might click each image to test how this AJAXIAN script works.
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
1. Login to Blogger, head your browser to Layout > Edit HTML.
2. Then please insert code provided below right between <head></head> tag. Confused? Just locate the </head> tag and place the code exactly before the </head> tag. Now hit Save button.
<link rel='stylesheet' href='http://fariezna.googlepages.com/lightbox.css' type='text/css' media='screen' />
<script type='text/javascript' src='http://fariezna.googlepages.com/prototype.js'></script>
<script type='text/javascript' src='http://fariezna.googlepages.com/scriptaculous.js?load=effects,builder'></script>
<script type='text/javascript' src='http://fariezna.googlepages.com/lightbox.js'></script>
3. The Implementation. Write your post just like usual, then embed your images as usual too. Use ordinary tag instead, <img src"">. Then add code below between your <img> tag.
<a href="http://lokasigambar.com/anda-yang-ukuran-BESAR.jpg" rel="lightbox" title="Deskripsi"></a>
Its result will be like this one.
<a href="http://lokasigambar.com/anda-yang-ukuran-BESAR.jpg" rel="lightbox" title="Deskripsi"><img src="http://lokasigambar.com/anda-yang-ukuran-KECIL.jpg" border="0" alt="Photobucket"></a>
Or please see screenshoot below:
4. Now change the word Deskripsi at that code with images title or description (optional).
Short explanation:
You should enter your full sized image URL at this <a href=""></a> tag. Now insert URL to minimized size or thumbnail size of the image at <img src=""> tag.
I think this Blogger hack is very easy isn't it? Try this at your blog and give me your comment please. Siip. Enjoy this LightBox AJAX for Blogger By The Fachia : Make your blog post more beautiful using LightBox Ajax.
27 comments:
bro sekalian terjemahin postingan ku ya, satu postingan berapa nih, gw musti ngasih ongkos? :)
@ eko P, I'm sorry..what r u talking about (wakaka,..). Kowe koq ngece men toh mas eko,..hehe
bro aku coba search by goolge tapi larinya malah kesini
yup memang easy steps...
top tutorial pasti langsung coba....
oke om, make sure you tell me when you used it. Thanks for comment om.. :D
Bro... can you give me e-book about this (yapzz...more detail for tutorial me)... thnks lt bro...
my brother...tell me more to improve the blog....still give us interactive tutorials
Thank you very much for this!! I added it to my blog it works on some images but on others it dosen't it appears "loading" all the time... can you tell me why?
this is the link where they don't load LINK
Thank you!.
It seems that if you upload your iages to blogger the script would not work, so try uploading your images to other hosting image site
as Orisha mentions it that's why I the images don't work beacuase it has this "bp1" on the link I believe. Is there something you could do about it? and update?
Thank you.
i added to my site www.sirigandha.com
It used to work b4.
but it doesnt work now!!
any reason
i have the same prob.the loading icon is not disappearing.even i upload the pics form other host.it goes the same.
Thank you, I installed it on my blog and it works :-D Just one thing, it doesn't work if you use Blogger to host your images.
Thanks for this mate. It works perfectly and as I'm using my Flickr photos as source, I didn't have any issue with everlasting loading. So we are currently reworking our blog to use that also in older posts and are very happy with that. Much appreciated!
Any chance for other media support? Mean Quicktime & Flash ...
@ Lukas Mensik, for this version, I think it doesnt support flash and other animated media files (except gif).
@ kannadiga, yes I realize may be sometimes it doesn't work, it is caused by my bandwith limit at Googlepages server. If you want to make it always work, then you'll need to download the source code, edit it, and reupload it to other hosting server.
it's working in firefox but not in IE
IE will prompt Cannot load page error. do you know why? it's so strange..
dont work for me. I click in the image and nothing append!
blogger change the script code when a put in my html. that's normal?
test in:
http://tasarir.blogspot.com/
please say someting!
ps: Working! i need to upload my images in another host to work in blogger.
btw, Thanks
Hi, This is great thanks a lot.
The only issue Ive got is that my blog is looking at the scripts on your site.(I just pasted your links). Ive got the scripts on my webspace, but cant seem to find the proper path to point my blog to my lightbox scripts.
Sorry, Im new to this, any help would be appreciated, thanks. :)
Richard
Hi
Nice tutorial...
I have completed all the steps but i am not getting the end result right. i get two images instead. there is one large image and one thumbnail image. how to solve this problem pls reply
hi blog link is http://marathikavitablog.blogspot.com/
this post is useful :)
but..
why my pic is out of the alignment ??
it do load, but then the pic is out of the light box.. :( any idea?
Hey,
I have created an easy-to-integrate lightbox type effect for blogger. You just reference a javascript file and all the images you upload to blogger automatically have the lightbox-type effect. There is no need to "edit html" for each of the images. You can read more about it here: AiBloggerBox.
worked here
http://elbloghd.blogspot.com
Poskan Komentar