plays Youtube© & Vimeo© videos directly out of the
box!
- Class name for groups and galleries
- Fly-in and fly-out speed of the box
- Bumpbox boxed color
- Background color & opacity
- Border-radius, color, weight of bumpbox
- Box-shadow intensity & color
- Predefined icon sets to choose from
- Fx Transitions selectable ( Bump, linear, quad etc. )
After copying the files, open the website you wish to edit and add the following lines right before the closing body tag ( </body> ):
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox-2.0.1.js"></script>
If you intent to view FLV and SWF files, add the following line:
Now choose and apply a class name to all links that should trigger bumpbox. In the end, your links should look like this, here we use "bump" as the class name:
<a href="http://www.artviper.de" class="bump">SEO</a>
Note: Grouping can be achieved by using the same class name for those elements that should be grouped.
Each link can have a different size, matching the object size you wish to show. For that, we take the already used link from #3 and add the rel tag, which is used to determine the bumpbox size:
<a href="http://www.artviper.de" class="bump" rel="800-600">SEO</a>
As you can see, we added rel="800-600", so the resulting bumpbox will be 800 x 600 pixels wide.
Note: If you add a title to your <a> tag, it will be displayed right below the main content bumpbox.
To activate bumpbox, we need to add (at least) the following script call:
<script type="text/javascript"> doBump('.bump'); </script>
This enables bumpbox, and you are now ready to use it for the first time. Yet, there are a lot more options you can define to adjust the appearance of bumpbox to your liking.
Continued on the right side...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'
);
Note: If you wish to leave some of the parameters out ( i.e. the value for the background opacity, then write null instead a value ).
Adding a background image
By adding a nice background image you can enhance the impression bumpbox makes greatly. Set the image, position and repeat rules easily.
Closing a bumpbox
You can close an open bumpbox by either clicking the close icon, clicking into the background or by pressing the ESC key.
Editing icon sets
Of course you can add own icons for the close, previous and next buttons. Simply create a new folder under the "iconsets" folder, number it, and use it in your doBump() call ( using the iconset number ). Name the files according to the other icon sets ( prev.png next.png and closed.png ).
Only one element defined as bumpbox, no previous and next icons visible. All options on default values.
Here we show all types, bumpbox can handle.
FLV Video »
MP3 Audio »
SWF Video »
PDF File »
Image File »
HTML File »
Inline HTML »
Youtube Video »
Vimeo Video »
Multiple items added into one group, showing previous | next controls where applicable. Customized colors and effects.
Group item 1 »
Group item 2 »
Group item 3 »
Multiple groups with different option settings, different icon sets and a background image set.
Tested Browsers: Firefox 3.6+, IE7, IE8, IE9, Opera 10+, Google Chrome 8+ -
Please note: Due to IE CSS3 issues, no rounded corners or box shadows apply.
Drop us a line at info@artviper.net
or visit our blog »
all rights reserved ©2010 artViper designstudio
professional webdesign