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	<script src="http://dl.dropbox.com/u/27675057/bumpbox/bumpbox-2.0.1-min.js" type="text/javascript">

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.

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox