Modal AJAX

You can load Portfolio Details in a Modal using AJAX Technique which makes the User Experience more Interactive.

How to Use

  • Setting up Modal AJAX Portfolio Items
    <!-- Portfolio Item: Start -->
    <article 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="include/ajax/portfolio-single-image.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="ajax"><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 Modal AJAX Item Details can be found in the file: PACKAGE/HTML/include/ajax

Last Modified: June 8, 2020