How to shuffle collage images using jquery-collagePlus?

Question

I am developing a site where I use the jquery-collagePlus plugin to create image collages. I want to make the image shuffle dynamically when I press the Shuffle button. does anyone have a solution for this (or any other way to do this) then kindly let me know?

Here is my demo Collage Test

here is my code:

$(window).load(function () { $('.Collage').collagePlus({ 'targetHeight' : 300, 'fadeSpeed' : "slow", 'effect' : 'default', 'direction' : 'vertical', 'allowPartialLastRow' : false }); $('.Collage').removeWhitespace().collagePlus(); }); 

// html

 <input name="shuffl" value="shuffle" type="button"> <section style="width:700px; " class="Collage effect-parent"> <img src="../support/images/ed-lea-dribbble-2.png"> <img src="../support/images/ed-lea-dribbble-3.png"> <img src="../support/images/ed-lea-dribbble-4.png"> <img src="../support/images/ed-lea-dribbble-6.png"> <img src="../support/images/ed-lea-dribbble-1.png"> </section> 

Answer 1

See this jsFiddle Demo

You can use this little pluggin to shuffle DOM elements:

 (function($){ $.fn.shuffle = function() { var allElems = this.get(), getRandom = function(max) { return Math.floor(Math.random() * max); }, shuffled = $.map(allElems, function(){ var random = getRandom(allElems.length), randEl = $(allElems[random]).clone(true)[0]; allElems.splice(random, 1); return randEl; }); this.each(function(i){ $(this).replaceWith($(shuffled[i])); }); return $(shuffled); }; })(jQuery); 

Then add the collagePlus code to the function:

 function refreshCollagePlus() { $('.Collage').collagePlus({ 'targetHeight' : 300, 'fadeSpeed' : "slow", 'effect' : 'default', 'direction' : 'vertical', 'allowPartialLastRow' : false }); } 

And just do it on the DOM:

 $(document).ready(function () { $('#shuffle').on('click', function(){ $('.Collage img').shuffle(); refreshCollagePlus(); }); refreshCollagePlus(); }); 

The idea here is to initialize the collagePlus plugin and then shuffle images and “update” the collagePlus plugin on the #shuffle click button.

EDIT: Prevent image from moving

The easiest and easiest way to achieve this is to give an image to a particular class:

 <img class="dontMove" src="http://placehold.it/800x600" /> 

And change this line:

 $('.Collage img').shuffle(); 

:

 $('.Collage img:not(.dontMove)').shuffle(); 

In this case, all images that have the dontMove class will always remain where they are, while others will randomly move around.