Creative Responsive Gallery

Instructions for CREATIVE GALLERY:

1

Link to the CSS library

<link href="../Creative Responsive Gallery/dist/css/gallery.css" rel="stylesheet">

2

Link to the JS library

You do not need to connect all libraries.
(Select only the ones you need)

jQuery version must be >= 1.8.0;

<script src="../Creative Responsive Gallery/js/picturefill.min.js"></script>

<script src="../Creative Responsive Gallery/js/gallery.js"></script>

<script src="../Creative Responsive Gallery/js/crg-pager.js"></script>

<script src="../Creative Responsive Gallery/js/crg-autoplay.js"></script>

<script src="../Creative Responsive Gallery/js/crg-fullscreen.js"></script>

<script src="../Creative Responsive Gallery/js/crg-zoom.js"></script>

<script src="../Creative Responsive Gallery/js/crg-hash.js"></script>

<script src="../Creative Responsive Gallery/js/crg-share.js"></script>

<script src="../Creative Responsive Gallery/js/crg-video.js"></script>

A jQuery plugin that adds cross-browser mouse wheel support. (Optional)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js">

4

The markup

<div class="demo-gallery">
<ul id="CreativeGallery" class="list-unstyled row">
  <li data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="<h4>Text</h4><p>Text</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
      <a href="">
        <img class="img-responsive" src="img/thumb-1.jpg" alt="Thumb-1">
      </a>
    </li>
  <li data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="<h4>Text</h4><p>Text</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
    <a href="">
        <img class="img-responsive" src="img/thumb-2.jpg" alt="Thumb-2">
      </a>
    </li>
</ul>
</div>

3

Call the plugin

<script>lightGallery(document.getElementById('CreativeGallery'));</script>

Instructions for SCROLL GALLERY:

1

Link to the CSS library

<link rel="stylesheet" href="../Scroll Gallery/Scroll_Gallery.css" type="text/css" media="all">

2

Link to the JS library

<script src="../Scroll Gallery/Scroll_Gallery.js"></script>

3

The markup

<section class="fs gallery" id="ScrollGallery">
    <a class="ScrollGallery-column" href='img/1-1600.jpg'>
        <img src="img/1-200.jpg" alt="Text" />
    </a>
    <a class="ScrollGallery-column" href="img/2-1600.jpg">
        <img src="img/2-200.jpg" alt="Text" />
    </a>
</section>

Instructions for FANCY GALLERY:

1

Link to the CSS library

<link href="../Creative Responsive Gallery/dist/css/gallery.css" rel="stylesheet">

2

Link to the JS library

<script src="../Fancy Gallery/fancy-gallery.js"></script>

3

The markup

<div class="fancy-gallery-row">
<div class="fancy-gallery-column">
<img src="img/1-600x400.jpg" style="width:100%" onclick="fg_openModal();fg_currentSlide(1)" class="fancy-gallery-hover-shadow fancy-gallery-cursor">
</div>
<div class="fancy-gallery-column">
<img src="img/2-600x400.jpg" style="width:100%" onclick="fg_openModal();fg_currentSlide(2)" class="fancy-gallery-hover-shadow fancy-gallery-cursor">
</div>
</div>

This part of the code should be written at the end of the file.

<div id="fancy-gallery-myModal" class="fancy-gallery-modal">
<span class="fancy-gallery-close fancy-gallery-cursor" onclick="fg_closeModal()">×</span>
  <div class="fancy-gallery-modal-content">

    <div class="fancy-gallery-mySlides">
      <div class="fancy-gallery-numbertext">1 / 8</div>
      <img src="img/1-1000.jpg" style="width:100%">
    </div>

    <div class="fancy-gallery-mySlides">
      <div class="fancy-gallery-numbertext">2 / 8</div>
      <img src="img/2-1000.jpg" style="width:100%">
    </div>

    <a class="fancy-gallery-prev" onclick="fg_plusSlides(-1)">❮</a>
    <a class="fancy-gallery-next" onclick="fg_plusSlides(1)">❯</a>

    <div class="fancy-gallery-caption-container">
      <p id="fancy-gallery-caption"></p>
    </div>
</div>

Instructions for FANCY Slider:

1

Link to the CSS library

<link rel="stylesheet" href="../Fancy Slider/fancy-slider.css" type="text/css" media="all">

2

Link to the JS library

<script src="../Fancy Slider/fancy-slider.js"></script>

3

The markup

  <div class="fs-slideshow-container">

  <div class="fs-mySlides">
    <div class="fs-numbertext">1 / 8</div>
    <img src="img/1-1000.jpg" style="width:100%">
    <div class="fs-text">Caption</div>
  </div>

  <div class="fs-mySlides">
    <div class="fs-numbertext">2 / 8</div>
    <img src="img/2-1000.jpg" style="width:100%">
    <div class="fs-text">Caption</div>
  </div>

  <a class="fs-prev" onclick="fs_plusSlides(-1)">❮</a>
  <a class="fs-next" onclick="fs_plusSlides(1)">❯</a>
  </div>