CODEWITHSUNDEEP
jquerycssimageimage-processingplugins
amit gupta
amit gupta

Reputation: 1330

How to shuffle collage images using jquery-collagePlus?

I am developing a website in which i am using jquery-collagePlus plugin to make image collages . I want to make shuffling images dynamically when click on shuffle button. any one have solution for this (or any other method 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>

Upvotes: 6

Views: 2258

Answers (1)

Brewal
Brewal

Reputation: 8189

See this Demo jsFiddle

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 put your collagePluscode into a function :

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

And just do this on DOM ready :

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

The idea here is to init once the collagePlus plugin, and then shuffle the images and "refresh" the collagePlus plugin on the #shuffle button click event.

EDIT : Prevent an image to move

The cleanest and easiest way to achieve that is to give an image a specific class : 

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

And change this line : 

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

to this :

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

In this case, all the images having the class dontMove will always stay where they are, meanwhile others will randomly move.

Upvotes: 3

Related Questions