scribble

Scribble

About Blog GitHub
‹
›

10 Jun 2011
Implementing Bumpbox in Blogger

Bumpbox is a lightbox clone script which also supports HTML files, FLV videos, SWF files and PDF’s as well as common images.Bumpbox is a lightbox clone script which also supports HTML files, FLV videos, SWF files and PDF’s as well as common images.

Bumpbox requires flowplayer media player to show FLV video files. The script requires Mootools JavaScript library of version 1.2.




             

Steps to Add it to Blogger:



1.Login to the Blogger account.





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

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


1
<script src="http://dl.dropbox.com/u/27675057/bumpbox/mootools.js" type="text/javascript">
2
</script>
3

4
5
</script>
6

7
<script src="http://dl.dropbox.com/u/27675057/bumpbox/flowplayer.min.js" type="text/javascript">
8
</script> 


For using this Multiple times copy the Above code Before the </head> tag in the Design > Edit HTML Tab

4.Now for adding the images into BumpBox, Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTMLwindow it would be something like this



<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>



Make it like this


<a href=" " class="bump" ><img src=" " /></a>

As you can see we added only a class="bump".Then you also have to add this piece of code 

1
<script type="text/javascript">
2

3
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius, borderWeight,borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
4

5
doBump('.bump');
6

7
</script>


'.bump' can be replaced by the name you of your choice but then the call should also be made by that name

For adding bumpbox with effects you can see the code below 

1
<script type="text/javascript">
2

3
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius, borderWeight,borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
4

5
doBump('.bump',1200, 500, '34373c', '34373c', 0.7, 3, 1 ,'333', 9,'000', 1, Fx.Transitions.Bounce.easeOut, Fx.Transitions.Bounce.easeOut);
6

7
</script>

Here is a complete list of options

Options available
name
Class name for bumpbox objects, note the dot in front of the class name itself
inSpeed
Effect speed to show bumpbox ( in ms )
outSpeed
Effect speed to remove bumpbox ( in ms )
boxColor
Hex color of bumpbox itself, omit #
backColor
Hex color of the background overlay, omit #
bgOpacity
Opacity of the background overlay, values 0 - 1
bRadius
Border radius of the bumpbox client window in px
borderWeight
Border weight of the bumpbox client window
borderColor
Hex color of the bumpbox client window, omit #
boxShadowSize
Shadow spread size in px
boxShadowColor
Hex color of bumpbox shadow, omit #
iconSet
Choose from 4 predefined icon sets
effectsIn
Transition used for appearing see Transitions
effectsOut
Transition used for disappearing - see Transitions
bgImage
Background image to be used
bgPosition
Background position
bgRepeat
Background repeat

Using a fully customized bumpbox:
doBump( '.bump',750, 500, '111', '900', '0.8', 5, 1 ,'333', 15,'000', 4,
                 Fx.Transitions.Bounce.EaseOut,
                 Fx.Transitions.Bounce.EaseOut,
                 'images/demo_bg_bumpbox.png',
                 'top left',
                 'repeat-x' );

Some Example Code:


01
Single Image
02
<a class="bump1" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg"><img alt="First"src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" title="The first image" /></a>
03

04
Gallery
05
<a class="bump" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg"><img alt="First"src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" title="The first image" /></a>&nbsp;&nbsp;<a class="bump" href="http://dl.dropbox.com/u/27675057/2.png"><img alt="First"src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" title="The SECOND image" /></a>
06

07
<a href="http://www.artviper.net/test/artvipermedia.flv" class="bx2" rel="800-452" title="Playing now...">FLV Video</a>
08

09
<pre><a href="http://www.artviper.net/index.mp3" class="bx2" rel="400-93">MP3 Audio</a>
10

11

12
<a href="http://www.artviper.net/pc.swf" class="bx2" rel="480-480">SWF Video</a>
13

14

15
<a href="http://www.artviper.net/test.pdf" class="bx2" rel="800-350">PDF File</a>
16

17

18
<a href="http://www.artviper.net/website-tools/abc.jpg" class="bx2" rel="357-500">Image File </a>
19

20

21
<a href="http://www.artviper.net/" class="bx2" rel="1040-600">HTML File</a>
22

23

24

25
<a href="http://www.youtube.com/embed/XpF32DRBPh0" class="bx2" rel="640-390">Youtube Video</a>
26

27

28
<a href="http://player.vimeo.com/video/12939579" class="bx2" rel="400-300">Vimeo Video</a>
29

30
</pre>
31

32
<script type="text/javascript">
33
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius,borderWeight, borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
34
doBump('.bump1');
35
doBump('.bump',1200, 500, '34373c', '34373c', 0.7, 3, 1 ,'333', 9,'000', 1, Fx.Transitions.Bounce.easeOut, Fx.Transitions.Bounce.easeOut);
36
doBump('.bx2',850, 500, '000', '6b7477', 0.7, 7, 2 ,'333', 15,'000', 2, Fx.Transitions.Back.easeOut, Fx.Transitions.linear);
37
</script>


5.Now save the Post/Page and see the magic.

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

Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.


             

Til next time,
Prayag Verma at 05:28

scribble

About Blog GitHub