Menu icon Foundation

Developer | Algeria

Hi, I’m MOULOUD Allache. I’m passionate about what I do, and I love to help people. Nothing is more fulfilling than being part of a team with similar interests, and an organization that values its employees.

My Posts

No Content

My Comments

MOULOUD Allache commented on Steve Trask's post over 3 years

Hi, 
I had the same issue recently, so after many tests this worked for me :

Added all sliders format in assets/partials ex: slide.html, large-slider.html etc..
Added the interchange plugin and a new data-orbit-interchange attribute
Watch for 'replaced-zf-interchange' event on [data-orbit-interchange]
Get an image from the slide freshly loaded and wait for image loading
Then init the plugins agains

a quick exemple :
html :
<div class="widget large-9 medium-8" data-orbit-interchange data-interchange="[assets/partials/sliders/home-slider.html, small],[assets/partials/sliders/home-slider-large.html, large]"></div>

javascript :
$('[data-orbit-interchange]').on('replaced.zf.interchange', function () {

    var element = $(this).find('.orbit').first();

    var img = $(element).find('.orbit-image').first();

    img.on('load', function() {

        element.foundation();

    });

});
this is not the best solution i guess , but it worked for me,
Hope this can help

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Steve Trask's post over 3 years

Hi, 
I had the same issue recently, so after many tests this worked for me :

Added all sliders format in assets/partials ex: slide.html, large-slider.html etc..
Added the interchange plugin and a new data-orbit-interchange attribute
Watch for 'replaced-zf-interchange' event on [data-orbit-interchange]
Get an image from the slide freshly loaded and wait for image loading
Then init the plugins agains

a quick exemple :
html :
<div class="widget large-9 medium-8" data-orbit-interchange data-interchange="[assets/partials/sliders/home-slider.html, small],[assets/partials/sliders/home-slider-large.html, large]"></div>

javascript :
$('[data-orbit-interchange]').on('replaced.zf.interchange', function () {

    var element = $(this).find('.orbit').first();

    var img = $(element).find('.orbit-image').first();

    img.on('load', function() {

        element.foundation();

    });

});
this is not the best solution i guess , but it worked for me,
Hope this can help

Posts Followed


Following

  • No Content

Followers

  • No Content