DhoniShow
12 January 2010 TuesdayDhoniShow
´´ Ever wanted an easy inline gallery on your website? Then DhoniShow is for you. Just throw some images into your HTML source and let Javascript do the rest! ´´
View the DEMO
How to use
After installing prototype 1.5+ (necessary) and Script.aculo.us (optional) you must embed "dhonishow.js" in the header of your HTML page. It should then look similar to this:
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="dhonishow.js" type="text/javascript"></script>For styling the gallery it’s important to embed the customizable DhoniShow CSS file as well:
<link rel="stylesheet" href="dhonishow.css" type="text/css"
media="screen" />All that’s left to do now is wrapping a block element around any number of <img> elements and class-name it "dhonishow". Congratulations, you’re done!
<div class="dhonishow">
<img src="img/cute_cat.jpg" alt="My cute cat." />
<img src="img/cute_dog.jpg" alt="My cute dog." />
<img src="img/cute_hamster.jpg" alt="My cute hamster." />
</div>DhoniShow will now turn this HTML construct into a nice clickable image gallery with transtion effects and sublines.
Kind of magic, huh?
Advanced
If the default status of Dhonishow is not enough, you can manipulate the most important parameters. First of all, the CSS file is of course free for editing. Make use of this! But you can also define some behavioural parameters. Let’s take a look:
Transition style new feature
<div class="dhonishow effect_appear">
<!-- Choose between effect_appear, effect_blind,
effect_slide, effect_horizontal -->Transition duration
<div class="dhonishow duration_0dot6">
<!-- For 0.6 seconds -->Autoplay new feature
<div class="dhonishow autoplay_5">
<!-- For 5 seconds -->Hide things
<div class="dhonishow hide_paging">
<!-- Choose between hide_paging, hide_alt (Sublines),
hide_navigation -->Of course you can combine all parameters to take perfect control over your image gallery.
