ImgIx - Lightbox examples

imgix-lightbox-examples.markdown

ImgIx - Lightbox examples

A Pen by No Worries on CodePen.

License.

index.html

<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>

script.js

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);

scripts

<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>