Resolving conflicts with foundation orbit and interchange

This post is about a fix I found for the issues that arise when using zurb foundation’s orbit and interchange plugins at the same time.

When implementing a home page carousel using foundations orbit component, I found that when the page loaded, the whole thing was only showing as 26px high. This was due to using the interchange component at the same time to selectively load appropriate images depending on the screen size. I had implemented the following code which seemed to work fine…

$('#promo-banners-orbit')
.on('replace.fndtn.interchange', 'img', function(e, new_path, original_path) {
    var self = $(this);
    self.foundation('orbit').trigger('resize');
});

This code is added to the app.js file and basically says that whenever the ‘replace’ event is fired on images within the element with an id of promo-banners-orbit, trigger the resize event on any present orbit components.

However, later, when I tried to add another javascript component of my own, this event was conflicting with it, effectively stopping any ‘resize’ events from firing.
I tried a few solutions, including using the ‘one’ function, instead of the ‘on’ function, which fires an event only once then removes it. This worked intermittently but not always (especially when doing a hard refresh).

The final solution isn’t particularly revolutionary but seems to work fine and not cause any conflicts.

$('#promo-banners-orbit')
.on('replace.fndtn.interchange', 'img', function(e, new_path, original_path) {
    var self = $(this);
    self.foundation('orbit').trigger('resize');
    if(self.height() > 30){
        self.off(e);
    }
});

When the resize event has been triggered, a check is made to see if the element height has been updated. For the purposes of the site in question, the carousel image loaded should always be taller than 30px even at small screen sizes, so this conditional statement is ok. If the condition is met, the event handler is removed. This also removes any conflicts with other resize events that are triggered. Yay.

Comments, alternatives, better ideas always welcome.

Leave a Reply