Skip to content

Instantly share code, notes, and snippets.

@NoWorries
Created January 17, 2019 01:24
Show Gist options
  • Save NoWorries/d74898996531f02f0a51ba9ccc0b9d2c to your computer and use it in GitHub Desktop.
Save NoWorries/d74898996531f02f0a51ba9ccc0b9d2c to your computer and use it in GitHub Desktop.
ImgIx - Lightbox examples
<script id="mustacheTempalte_a" type="text/template">
<div class="item">
<h1>Upcoming Shows</h1>
{{#shows}}
<ul style="display:none">
<li><strong>Img:</strong> {{img}}</li>
<li><strong>Title:</strong> {{title}}</li>
<li><strong>Width:</strong> {{width}}</li>
<li><strong>Height:</strong> {{height}}</li>
<li><strong>Copyright:</strong> {{copyright}}</li>
</ul>
<img src="{{img}}?&w={{width}}&fm=pjpg&usm=20&h={{height}}&blend=https%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog-blends.pdf%3Ffm%3Dpng%26page%3D1&balph=100&bm=darken&fit=crop&mark=https%3A%2F%2Fassets.imgix.net%2F~text%3Fw%3D540%26txttrack%3D-1%26txtclr%3Dfff500%26txt%3D{{title}}%26w%3D400%26txtsize%3D45%26txtlead%3D0%26txtpad%3D15%26txtfont%3Davenir-black%26txtalign%3Dleft&crop=face&markalign=left%2Cbottom&txt={{copyright}}&txtalign=left&txtclr=fff&txtsize=8&txtpad=10&balpha=50&bs=inherit">
{{/shows}}
</div>
</script>
<script id="mustacheTempalte_b" type="text/template">
<div class="item">
<h1>Upcoming Shows</h1>
{{#shows}}
<ul>
<li><strong>Title:</strong> {{title}}</li>
<li><strong>Description:</strong> {{{description}}}</li>
<li><strong>Video:</strong> {{video}}</li>
<li><strong>Category:</strong> {{category}}</li>
</ul>
{{/shows}}
</div>
</script>
<div class="target-output" data-template-chosen="a"></div>
var targetContainer = $(".target-output"),
templateDefined = $(".target-output").data("template-chosen"),
template = $("#mustacheTempalte_"+templateDefined).html();
var shows = { "shows" : [
{ "img" : "https://lightbox-prod.imgix.net/images/assets/100190385-p15060898_i_h8_aa.jpg",
"width" : "600",
"height" : "338",
"title" : "Don't Worry, He Won't Get Far on Foot",
"copyright" : "© 2018 Sony Pictures Television Inc. All Rights Reserved."
},
{ "img" : "https://lightbox-prod.imgix.net/images/assets/100190374-p13937884_k_h8_aa.jpg",
"width" : "600",
"height" : "338",
"title" : "Venom",
"copyright" : "© 2018 Columbia Pictures Industries, Inc. and Tencent Pictures (USA) LLC. All Rights Reserved. | MARVEL and all related character names: © & ™ 2018 MARVEL."
},
{ "img" : "https://lightbox-prod.imgix.net/images/assets/100189124-p15158743_k_h8_aa.jpg",
"width" : "600",
"height" : "338",
"title" : "Juliet, Naked",
"copyright" : "© 2018 Roadside Attractions LLC. All Rights Reserved."
},
{ "img" : "https://lightbox-prod.imgix.net/images/assets/100191903-3723964-Charming_Promo.JPG",
"width" : "600",
"height" : "338",
"title" : "Charming",
"copyright" : "© MMXVII CHARMING ANIMATION LIMITED. All Rights Reserved"
}
] };
var html = Mustache.to_html(template, shows);
$(targetContainer).html(html);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment