Main HTML markup:
|
1 2 3 4 |
<div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-magnificPortfolioPopupGroup"> ... ... </div> |
Required scripts:
|
1 2 3 4 |
<script src="../assets/plugins/isotope/jquery.isotope.min.js"></script> <script src="../assets/plugins/isotope/imagesloaded.js"></script> <script src="../assets/plugins/isotope/infinitescroll.min.js"></script> <script src="../assets/plugins/isotope/init.js"></script> |
Single gallery item HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<a class="ct-js-magnificPopupImage" href="../assets/images/demo-content/boats/gallery-17-big.jpg" title="Ahoy There Matey"> <figure class="ct-gallery-item events"> <img src="../assets/images/demo-content/boats/gallery-17.jpg" alt=""> <figcaption> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <span class="ct-iconButton ct-iconButton--larger ct-u-marginBottom20"><i class="fa fa-search"></i></span> <h6 class="ct-u-hr ct-u-hr--center text-uppercase ct-fw-bold ct-u-marginBottom15">Ahoy There Matey</h6> <p>speed boat</p> </div> </div> </figcaption> </figure> </a> |
Gallery product filtering
|
1 2 3 4 5 |
<select class="ct-select ct-js-selectize ct-js-selectDriver" title="Driver"> <option value="*">with or without crew</option> <option value=".withDriver">with crew</option> <option value=".withoutDriver">without crew</option> </select> |
|
1 2 3 4 5 |
<div id="data-price" class="ct-u-paddingBottom10 ct-sliderAmount"> <input type="text" value="$100" required class="form-control slider_min" placeholder=""> <input type="text" value="$990" required class="form-control slider_max" placeholder=""> <input type="text" data-currency="$" class="slider sliderAmount" value="" data-slider-tooltip="hide" data-slider-handle="round" data-slider-min="100" data-slider-max="990" data-slider-step="10" data-slider-value="[100,990]" title="Slider Amount"> </div> |
data-currency – value of this attribute will be displayed next to the value of slider’s min and max inputs;
ID of an element containing a slider should have the same ID as the product’s attribute, in this example it would be data-price.