In Page AJAX

Portfolio In Page Ajax

In page ajax expands a portfolio item inline, loading its full details below the grid without a page reload. It uses data-loader on each item and a .portfolio-ajax-trigger link, together with an ajax wrapper placed after the grid.

Structure

Mark the grid with .portfolio-ajax in addition to the usual portfolio classes. Each <article> needs a unique id and a data-loader pointing at the HTML fragment to fetch.

<div id="portfolio" class="portfolio portfolio-ajax row grid-container gutter-20" data-layout="fitRows">

    <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">
        <div class="grid-inner">
            <div class="portfolio-image">
                <a href="portfolio-single.html">
                    <img src="images/portfolio/4/1.jpg" alt="Open Imagination">
                </a>
                <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-lightbox="image" title="Image"><i class="uil uil-plus"></i></a>
                        <a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark portfolio-ajax-trigger"><i class="bi-front"></i></a>
                    </div>
                    <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                </div>
            </div>
            <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>
        </div>
    </article>

</div>

Ajax wrapper

Place the ajax wrapper and loader immediately after the grid. The fetched fragment is injected into #portfolio-ajax-container, and #portfolio-ajax-loader shows the spinner while loading.

<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-bounce1"></div>
        <div class="css3-spinner-bounce2"></div>
        <div class="css3-spinner-bounce3"></div>
    </div>
</div>

How it works

• Clicking a .portfolio-ajax-trigger reads the parent .portfolio-item id and its data-loader URL.
• The script fetches that URL and injects the returned HTML into #portfolio-ajax-container, then opens the panel by adding .portfolio-ajax-opened to the wrapper.
• The active item gets .portfolio-active, and the body gets .portfolio-ajax-loading during the fetch.
• Previous and next navigation is generated automatically from sibling items, using a #portfolio-navigation block with #prev-portfolio, #next-portfolio, and #close-portfolio.

Options

• .portfolio-ajax on the grid: enables the in page ajax behaviour.
• id on each <article>: unique identifier used to track the active item and build prev/next links.
• data-loader on each <article>: URL of the HTML fragment to load for that item.
• .portfolio-ajax-trigger: the clickable element that opens the item.
• #portfolio-ajax-wrap / #portfolio-ajax-container / #portfolio-ajax-loader: required output containers placed after the grid.

Tips

• Every ajax item needs both a unique id and a data-loader, otherwise it cannot be opened.
• Different items can point at different fragment types, for example an image loader, a video loader, or a slider loader.
• The container re initializes Canvas modules on the loaded fragment, so sliders and lightboxes inside the fetched HTML work automatically.
• Keep #portfolio-ajax-wrap and #portfolio-ajax-loader directly after the grid so the panel expands in the right place.