Monitor Reply

Support

Whale slider evolution

Permalink Browser Info Environment November 26, 2018 at 11:37 AM

Hello, I need an extra option on the Whale Gallery.
I need a random display feature.
Can you give me a solution?
Thank you

Type:	Pre-Sale
Status:	Resolved

shahroq replied on Nov 26, 2018 at 1:04 pm Permalink Reply

Hi,
The js plugin used in the "Whale Slider" block does not have any option for random slides. Yet it should be possible to shuffle slides out of plugin's code domain. I wrote something like this and it seems working, though I didn't test it scrupulously. You can clone default "Whale Slider" template and append the code at the end of the template.

<script type="text/javascript">
$(document).ready(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]));

Viewing 15 lines of 21 lines. View entire code block.

<script type="text/javascript">
$(document).ready(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);
 
    };
    $('.swiper-wrapper .swiper-slide').shuffle();
 
});
</script>

Elstud replied on Nov 30, 2018 at 1:15 pm Permalink Reply

Great !
Thank you, I will try next week and I give you my feedback.

Elstud replied on Dec 4, 2018 at 5:01 pm Permalink Reply

Well, I test it, but nothing happen..

I put this script at the end of view.php in "whale_image_slider"

That's it ? no ?

shahroq replied on Dec 4, 2018 at 8:47 pm Permalink Reply

Could you send me the link where the code has been added?

shahroq replied on Dec 5, 2018 at 10:35 am Permalink Reply

Hi Jeff,
As I see, now that the code is added, the slider displays slides in random order. Open the page in multiple tabs and compare the order.

Elstud replied on Dec 5, 2018 at 1:24 pm Permalink Reply

unbelievable !!
I did not see him !!
I work too late ...
Thank you, it's just perfect!

Elstud replied on Dec 5, 2018 at 1:39 pm Permalink Reply

I did not see it because I had a cache problem. By purging the cache, it works much better !!

shahroq replied on Dec 5, 2018 at 3:20 pm Permalink Reply

Happy to hear it all worked out.
Cheers,

Pixel 2

Support

Whale slider evolution

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post