Image Effects

You can check example here

Including files

These are all the files you need to import in your page so the plugin can work.

      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/magnific-popup.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/animate.min.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/imageTiles.css" media="all" />

       <!-- jQuery 1.8+ -->
       <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

       <script src="../plugin/assets/js/imagesloaded.pkgd.min.js"></script>
       <script src="../plugin/assets/js/anime.min.js"></script>
       <script src="../plugin/assets/js/classie.js"></script>
       <script src="../plugin/assets/js/modernizr-custom.js"></script>
       <script src='../plugin/assets/js/isotope.pkgd.min.js'></script>
       <script src="../plugin/assets/js/magnific-popup.min.js"></script>
       <script src="../plugin/assets/js/loadgo.min.js"></script>
       <script src="../plugin/assets/js/jquery.imageTiles.js"></script>

It’s not required, but I recommend placing the CSS files in <head> and the JavaScript files and initialization code in the footer of your site (before the closing </body> tag).

HTML Structure

        <div id="myGrd" class="tiles-grid">
            <div class="tiles-grid-item set1" data-size="1180x787" >
              <a class="tiles-grid-link" href="img/demo/original/6.jpg">
                <figure class="effect-lily">
                   <img class="tiles-grid-img" src="img/demo/6.jpg" alt="Some image" />
                   <div class="tiles-description tiles-description-grid">
                             Image name
                    </div>
                     <figcaption class="hover">
                       <div>
                          <h2>Nice effect 1</h2>
                          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
                       </div>
                     </figcaption>
                </figure>
              </a>
           </div>
        </div>

Initializing

Once you got the HTML markup in your site you need to initialize the plugin in Javascript. You need to take the id from the container of the boxes in the HTML (In the example above would be: id="myGrd") and use it for the initialization. You can use 4 image effects : grayscale | invert | sepia | blur. Example : imageEffect:'blur'

   $('#myGrd').imageTiles({
      loadingEffectName:'Isis',
      scrollEffectName:'bounce',
      horizontalSpace:3,
      verticalSpace:3,
      columns:4,
      imageEffect:'blur',
      galleryPreview:{
        enabled:true,
        openEffect:'slide'
      }
    });