Explode images by using jQuery
The jquery.imgexplode explodes the image with a variety of options available in that jQuery plug-in. The plug-in is quite simple to use. Just specify the image with an id or class in the image tag and refer this in the jQuery code with different options.
You may use a button for triggering the explosion or use mouse over event etc. See the demo and usage below.
A demo of using jQuery image explode plug-in
In this demo, the specified image will explode as the demo page loads. If you click the button “Explode image”, the image will explode again with the given options.
The following options are used for exploding the image:
The radius parameter specifies the radius of the explosion. The minRadius specify the minimum radius of the explosion in pixels.
The fadeTime parameter tells the time releasing rag fade. If gravity parameter is set as 0, the image will halt in “air”. See the second demo with that value:
See online demo and code
The simple markup for this demo:
<img id="img-explosion-demo" src="images/banana.jpg" height="300" width="300"/> <button style="position:fixed;right:0;top:0;width:100px;height:50px;" onclick="explodeImage()">Explode image</button>
The script:
<script>
var $target = $("#img-explosion-demo");
function explodeImage() {
$target.explodeRestore();
setTimeout(function () {
$target.explode({
maxWidth: 15,
minWidth: 5,
radius: 231,
release: false,
recycle: false,
explodeTime: 320,
canvas: true,
round: false,
maxAngle: 360,
gravity: 10,
groundDistance: 150,
});
}, 300)
}
explodeImage();
</script>
You need to include the dependency files like jQuery and plug-in JS file. The plug-in page can be downloaded here or you may get the JS file by view source the demo page.
A demo with zero gravity
If you want to keep showing the burst image then you may use the zero gravity value. It is like zero gravity in space; have an idea by looking at this demo:
See online demo and code
You may check this cool plug-in by setting different parameter values on the fly by visiting the developer’s page.