Portfolio

Each portfolio item should have following html structure:

<div class="grid-item [size] [category]">
    <div class="grid-box">     

      <figure class="portfolio-figure">
            <img src="http://image_url" alt=""/>
            <figcaption class="portfolio-caption">
                <div class="portfolio-caption-inner">
                    <h3 class="portfolio-title">Project Title</h3>
                    <h4 class="portfolio-cat">Project Category</h4>

                    <div class="btn-group">
                        <a class="btn-link" href="http://project_url" target="_blank"><i class="rsicon rsicon-link"></i></a>
                        <a class="portfolioFancybox btn-zoom" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline1"><i class="icon icon-eye"></i></a>
                        <a class="portfolioFancybox hidden" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline2"></a>
                        <a class="portfolioFancybox hidden" data-fancybox-group="portfolioFancybox[number]" href="#portfolio[number]-inline3"></a>
                    </div>
                </div>
            </figcaption>
        </figure>

        <!-- Start: Portfolio Inline Boxes -->
        <div id="portfolio[number]-inline1" class="fancybox-inline-box"> [popup content] </div>
        <div id="portfolio[number]-inline2" class="fancybox-inline-box"> [popup content] </div> 
        <div id="portfolio[number]-inline3" class="fancybox-inline-box"> [popup content] </div>
        <!-- End: Portfolio Inline Boxes -->

    </div>
</div><!-- .grid-item -->

[size] – we have two predefined sizes for portfolio items, large and small. For large items use size22 class, for small ones use size11 class.
[category] – portfolio category, used for filtering. You can provide more than one class for filtering, for example photography, nature …
[number] – each portfolio should have uniq number
[popup content] – in general can be any html content, we provide media + title + text. For media you can use image, custom video, iframe (youtube, vimeo, dailymotion …).

For ajax loading (when click ‘+’ button) add portfolio items  in /ajax/portfolio.html file.

Portfolio Content should have following html structure:

<div id="ID" class="fancybox-inline-box">
     <div class="inline-embed" ... >...</div>
     <div class="inline-cont">
          <h2 class="inline-title">Title</h2>
          <div class="inline-text">Content</div>
     </div>
</div>

We use <div class=”inline-embed”></div> element to insert different media (image, iframe, custom video) into popup

<!-- Image -->
<div class="inline-embed" data-embed-type="image" data-embed-url="image.jpg"></div>

<!-- Vimeo -->
<div class="inline-embed" data-embed-type="iframe" data-embed-url="https://player.vimeo.com/video/118244244"></div>

<!-- Dailymotion -->
<div class="inline-embed" data-embed-type="iframe" data-embed-url="https://www.dailymotion.com/embed/video/x314rdy"></div>

<!-- Youtube -->
<div class="inline-embed" data-embed-type="iframe" data-embed-url="https://www.youtube.com/embed/mZb_gat5YCY"></div>

<!-- Custom Video -->
<div class="inline-embed" data-embed-type="video">
    <video width="100%" height="100%" poster="img/uploads/media/echo-hereweare.jpg" controls="controls" preload="none">
        <source type="video/mp4" src="video_url.mp4" />
        <source type="video/webm" src="video_url.webm" />
        <source type="video/ogg" src="video_url.ogv" />
    </video>
</div>