In Page AJAX

How to Use

• Setting up AJAX Portfolio Wrapper:

  Copy

  <div id="portfolio-ajax-wrap">
  	<div id="portfolio-ajax-container"></div>
  </div>
  
  <div id="portfolio-ajax-loader">
  	<div class="css3-spinner">
  		<div class="css3-spinner-ball-scale-multiple">
  			<div></div>
  			<div></div>
  			<div></div>
  		</div>
  	</div>
  </div>

  Note: Place this code before the Portfolio Codes start.

• Setting up AJAX Portfolio Items

  Copy

  <!-- Portfolio Item: Start -->
  <article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
  	<!-- Grid Inner: Start -->
  	<div class="grid-inner">
  		<!-- Image: Start -->
  		<div class="portfolio-image">
  			<a href="portfolio-single.html">
  				<img decoding="async" src="images/portfolio/4/1.jpg" alt="Open Imagination">
  			</a>
  			<!-- Overlay: Start -->
  			<div class="bg-overlay">
  				<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
  					<a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
  					<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark portfolio-ajax-trigger" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-expand"></i></a>
  				</div>
  				<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
  			</div>
  			<!-- Overlay: End -->
  		</div>
  		<!-- Image: End -->
  		<!-- Description: Start -->
  		<div class="portfolio-desc">
  			<h3><a href="portfolio-single.html">Open Imagination</a></h3>
  			<span><a href="#">Media</a>, <a href="#">Icons</a></span>
  		</div>
  		<!-- Description: End -->
  	</div>
  	<!-- Grid Inner: End -->
  </article>
  <!-- Portfolio Item: End -->

  The codes for the AJAX Item Details can be found in the file: PACKAGE/HTML/include/ajax