Conditionally load
a slider in
responsive designs.

Thanks @dmolsen, I need this for a project…
Pascal (@eQRoeil)

This demo uses :

Content is included in the original mark-up but is commented out. Based on user action or media queries, the content can then be uncommented and injected into the DOM by lazyBlock.


I only used the user action in this demo, you can see @dmolsen lazyBlock demo for media queries example (using matchmedia)

<div id="hidden-images-panel" style="display:none;">
      <li style="display:none;">
        <img src="img/2.jpg" alt="">
      <li style="display:none;">
        <img src="img/3.jpg" alt="">
      <li style="display:none;">
        <img src="img/4.jpg" alt="">
      <li style="display:none;">
        <img src="img/5.jpg" alt="">
      <li style="display:block;">
        <img src="img/1.jpg" alt="">
<div id="slider-nav">
    <a id="prev" ><span>←</span></a>
    <a id="next" ><span>→</span></a>

I use lazyBlock custom events (onLBComplete) to create the slider (thanks to Swipe.js) :

lB.getById("hidden-images-link").onclick = function() { lB.toggle(this) };
lB.bind("hidden-images-link","onLBShow",function() {
    lB.getById("hidden-images-status").innerHTML = "Hide "; 
lB.bind("hidden-images-link","onLBHide",function() {
    lB.getById("hidden-images-status").innerHTML = "Show "; 
lB.bind("hidden-images-link","onLBComplete",function() {
    var slider = new Swipe(document.getElementById("hidden-images-panel"));
    document.getElementById("slider-nav").style.display = "block"; 
    document.getElementById("prev").onclick = function(){slider.prev(); return false;};
    document.getElementById("next").onclick = function(){; return false;};

and voilà :

Show images