Implementing EnlargeIt! in Blogger

EnlargeIt! is a little Javascript. It enlarges thumbnail images beautifully with a mouse click. You can use different animations if you like.

Features:
>works for pictures, flash files, FLV videos, YouTube videos, DivX videos and iframes
>enlarge several files at the same time
>grouping of and navigation between files

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a folder options.



             

Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/enlargeitdemo.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/enlargeit.js" type="text/javascript">
</script>
In Enlargeit.js you will have to change the path of the "enl_gifpath" to the "files" directory of the EnlargeIt! folder hosted on a Free Host





2.Go to the Post/Page you want to add EnlargeIt! and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<link href="http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/enlargeitdemo.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/enlargeit.js" type="text/javascript">
</script>
In Enlargeit.js you will have to change the path of the "enl_gifpath" to the "files" directory of the EnlargeIt! folder hosted on a Free Host


4.Now for adding the images into EnlargeIt! ,is a little different ,just see the following code:




<img longdesc="normal_hor1.jpg" onclick="enlarge(this);" src="thumb_hor1.jpg" />


As you see we added a longdesc attribute which contains the larger version of the image and a onclick attribute to link it the JavaScript.



It includes all the images into a gallery if not specified ,to add a specific image in a gallery ,just add a class="YourGalleryName" to those images.


This JavaScript can function even without using a Snippet. But there are many customized snippet possible for this JavaScript.Here are some of them


As Used in the Demo
<script type="text/javascript">
enl_ani = 1;
enl_brdcolor = '#FFFFFF';
enl_titletxtcol = '#444444';
enl_ajaxcolor = '#d0d0d0';
enl_brdsize = 20;
enl_maxstep = 15;
enl_speed = 12;
enl_shadow = 1;
enl_shadowintens = 20;
enl_shadowsize = 1;
enl_center = 1;
enl_dark = 1;
enl_darkprct = 20;
enl_preload = 1;
enl_drgdrop = 0;
enl_darksteps = 20;
enl_keynav = 1;
enl_wheelnav = 1;
enl_opaglide = 0;
enl_minuscur='minuscur.cur';
enl_brdround = 1;
enl_brdbck = '';
enl_buttonurl[0] = 'prev';
enl_buttontxt[0] = 'Previous picture [left arrow key]';
enl_buttonoff[0] = -180;
enl_buttonurl[1] = 'next';
enl_buttontxt[1] = 'Next picture [right arrow key]';
enl_buttonoff[1] = -198;
enl_buttonurl[2] = 'close';
enl_buttontxt[2] = 'Close [Esc key]';
enl_buttonoff[2] = -126;
enl_gifpath = 'http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/';
enl_btnact='bact.png';
enl_btninact='binact.png';
</script>


Another one
<script type="text/javascript"> 
enl_ani = 2;
enl_brdcolor = '#111133';
enl_titletxtcol = '#ffffaa';
enl_ajaxcolor = '#d0d0d0';
enl_brdsize = 6;
enl_maxstep = 22;
enl_speed = 12;
enl_shadow = 1;
enl_shadowintens = 35;
enl_shadowcolor = 'yellow';
enl_shadowsize = 0;
enl_center = 0;
enl_dark = 0;
enl_darkprct = 20;
enl_preload = 1;
enl_drgdrop = 1;
enl_darksteps = 20;
enl_keynav = 1;
enl_wheelnav = 1;
enl_opaglide = 1;
enl_minuscur='minuscur.cur';
enl_brdround = 1;
enl_brdbck = '';
enl_buttonurl[0] = 'prev';
enl_buttontxt[0] = 'Previous picture [left arrow key]';
enl_buttonoff[0] = -180;
enl_buttonurl[1] = 'next';
enl_buttontxt[1] = 'Next picture [right arrow key]';
enl_buttonoff[1] = -198;
enl_buttonurl[2] = 'close';
enl_buttontxt[2] = 'Close [Esc key]';
enl_buttonoff[2] = -126;
enl_gifpath = 'http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/';
enl_btnact='bact.png';
enl_btninact='binact.png';
</script>


Another One
<script type="text/javascript"> 
enl_ani = 0;
enl_brdcolor = '#ffffff';
enl_titletxtcol = '#000000';
enl_ajaxcolor = '#d0d0d0';
enl_brdsize = 25;
enl_maxstep = 22;
enl_speed = 12;
enl_shadow = 1;
enl_shadowintens = 20;
enl_shadowsize = 1;
enl_center = 1;
enl_dark = 2;
enl_darkprct = 50;
enl_preload = 1;
enl_drgdrop = 0;
enl_darksteps = 1;
enl_keynav = 1;
enl_wheelnav = 1;
enl_opaglide = 0;
enl_minuscur='minuscur.cur';
enl_brdround = 1;
enl_brdbck = 'b_marble.png';
enl_buttonurl[0] = 'prev';
enl_buttontxt[0] = 'Previous picture [left arrow key]';
enl_buttonoff[0] = -144;
enl_buttonurl[1] = 'next';
enl_buttontxt[1] = 'Next picture [right arrow key]';
enl_buttonoff[1] = -162;
enl_buttonurl[2] = 'close';
enl_buttontxt[2] = 'Close [Esc key]';
enl_buttonoff[2] = -270;
enl_gifpath = 'http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/';
enl_btnact='bact.png';
enl_btninact='binact.png';
</script>


Another One
<script type="text/javascript"> 
enl_ani = 3;
enl_brdcolor = '#FFFFFF';
enl_titletxtcol = '#444444';
enl_ajaxcolor = '#d0d0d0';
enl_brdsize = 20;
enl_maxstep = 30;
enl_speed = 12;
enl_shadow = 1;
enl_shadowintens = 20;
enl_shadowsize = 1;
enl_center = 0;
enl_dark = 1;
enl_darkprct = 20;
enl_preload = 1;
enl_drgdrop = 0;
enl_darksteps = 5;
enl_keynav = 1;
enl_wheelnav = 1;
enl_opaglide = 0;
enl_minuscur='minuscur.cur';
enl_brdround = 1;
enl_brdbck = '';
enl_buttonurl[0] = 'prev';
enl_buttontxt[0] = 'Previous picture [left arrow key]';
enl_buttonoff[0] = -216;
enl_buttonurl[1] = 'next';
enl_buttontxt[1] = 'Next picture [right arrow key]';
enl_buttonoff[1] = -234;
enl_buttonurl[2] = 'close';
enl_buttontxt[2] = 'Close [Esc key]';
enl_buttonoff[2] = -0;
enl_gifpath = 'http://dl.dropbox.com/u/27675057/EnlargeIt_1.1_20081219/Examples/files/';
enl_btnact='bact.png';
enl_btninact='binact.png';
</script>



You can also add YouTube Videos and iFrame to EnlargeIt!:


<a href="http://www.youtube.com/v/xGbnua2kSa8&amp;fs=1&amp;rel=0" onclick="return false;" target="imgwindow"><img alt="That's What Friends Are For" class="group3" id="pic4fl" longdesc="swf::http://www.youtube.com/v/xGbnua2kSa8&amp;fs=1&amp;rel=0::480::385" onclick="enlarge(this);" src="http://enlargeit.timos-welt.de/english/img/thumb_thatswhatfriends.jpg" title="" /></a>

<a href="http://www.google.com/" onclick="return false;" target="imgwindow"><img alt="Google" class="group3" id="pic5fal" longdesc="ifr::http://www.google.com::650::400" onclick="enlarge(this);" src="http://enlargeit.timos-welt.de/english/img/thumb_google.jpg" title="" /></a>




5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!



             

0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger