View the DEMO
How to use
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?
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 -->
<div class="dhonishow duration_0dot6"> <!-- For 0.6 seconds -->
Autoplay new feature
<div class="dhonishow autoplay_5"> <!-- For 5 seconds -->
<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.