2

I have a situation where I have BackboneJS (0.9.2) and RequireJS (2.1.3) and need to use Fancybox to open some inline hidden content (rendered from an underscore template):

<div id="inlineContent" style="display: none">
    <div class="brand-images">
        <img class="brand-image" src="/img/brandImage.png" alt="" />
        <img class="designer-image" src="/img/designer.jpg" alt="" />
        <div class="external button"><a href="<%= designer.get("link") %>" data-designer="<%= designerId.substr(2, designerId.length) %>">Shop the full collection</a><span></span></div>
    </div>
    <div class="details">
        <p><%= designer.get("bio") %></p>
        <p class="more-bio"><%= designer.get("bioMore") %></p>
    </div>
</div>

I've tried various way to attach the fancybox to elements, the simplest being at View.render (also used View.events):

$(this.el).html(  _.template( detailsDesignerTemplate, data )).appendTo(that.pageElement);
$('.read-more').fancybox({
    padding: 0,
    height: 'auto',
    width: 970,
    autoSize: false,
    title: '<h1>Title</h1>'
});

in all but IE7 (no IE6 support, yay!) it works. IE7 does nothing (though interestingly it does call "beforeLoad" callback);

Also, interestingly, it works with iFramed content.

Andrew Massey
  • 21
  • 1

1 Answers1

0

fancybox used container #fancybox-content just set into you View el:$('#fancybox-content') and call $.fancybox(this.$el.html(),{options})

AlexStr
  • 1