Basic Snippets

HTML content snippets available for inserting into print.php documents inside of the LC template based only lessons. These internal building blocks for LC template based lessons.

Requires: jQuery, jQuery UI, Bootstrap, and Latest Core scripts.

Panels

---

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse000-1">Collapsible Panel Heading<span class="glyphicon glyphicon-plus-sign pull-right"></span></a>
    </h4>
  </div>
  <div id="collapse000-1" class="panel-collapse collapse">
    <div class="panel-body">
      Content here...
    </div>
  </div>
</div>

Tabs

---

<div class="tabs-container">
  <ul id="tab-set-0001" class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#tab0001-1" data-toggle="tab" class="tab-switch">Tab 1</a></li>
  <li><a href="#tab0001-2" data-toggle="tab" class="tab-switch">Tab 2</a></li>
  <li><a href="#tab0001-3" data-toggle="tab" class="tab-switch">Tab 3</a></li>
  <li><a href="#tab0001-4" data-toggle="tab" class="tab-switch">Tab 4</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tab0001-1">
      <h3>TAB1TITLE</h3>
      Content here...
    </div>
    <!-- end tab pane -->
    <div class="tab-pane fade" id="tab0001-2">
      <h3>TAB2TITLE</h3>
      Content here...
    </div>
    <!-- end tab pane -->
    <div class="tab-pane fade" id="tab0001-3">
      <h3>TAB3TITLE</h3>
      Content here...
    </div>
    <!-- end tab pane -->
    <div class="tab-pane fade" id="tab0001-4">
      <h3>TAB4TITLE</h3>
      Content here...
    </div>
    <!-- end tab pane -->
  </div>
</div>

Image Comaprison Slider

---

Image Sweeper / Before-After Comparison Tool

<div class="image-sweep center-block" style="max-width:700px;">
  <img class="img-responsive center-block" src="media/graphics/BEFORE.jpg" alt="CAPTION_TEXT">
  <img class="img-responsive center-block" src="media/graphics/AFTER.jpg" alt="CAPTION_TEXT">
</div>

Radio Select Tool

---

<div class="radio-image-selector">
  <ul class="rs-list">
    <li><input type="radio" id="FIRST_IMAGE" name="SET_NAME" checked> <label for="FIRST_IMAGE">LABEL1</label></li>
    <li><input type="radio" id="SECOND_IMAGE" name="SET_NAME"> <label for="SECOND_IMAGE">LABEL2</label></li>
    <li><input type="radio" id="THIRD_IMAGE" name="SET_NAME"> <label for="THIRD_IMAGE">LABEL3</label></li>
  </ul>
  <div class="rs-content">
    <img src="media/graphics/SAMPLE.jpg" class="img-responsive center-block" alt="ITEM_1">
    <img src="media/graphics/SAMPLE2.jpg" class="img-responsive center-block" alt="ITEM_2">
    <?php echo $mm->getPrintMediaItemWrapper(MSDB_ID); ?>
  </div>
</div>

Magnifier Tool

---

<div class="center">
  <img src="media/graphics/SAMPLE_IMG.jpg" alt="CAPTION_TEXT" class="zoom-hover img-responsive center-block" data-zoom-image="media/graphics/SAMPLE_IMG_LG.jpg">  
</div>