jQuery cartonbox Modal Examples

Single Image

Caption Text

<a href="image-1.jpg" class="cartonbox" data-cb-type="img">...</a> <a href="image-2.jpg" class="cartonbox" data-cb-type="img"     data-cb-caption="#caption" >...</a> <div style="display: none;">     <div id="caption">         ... Caption ...     </div> </div> <a href="image-3.jpg" class="cartonbox" data-cb-type="img">...</a> <a href="image-4.jpg" class="cartonbox" data-cb-type="img"     data-cb-caption="... Caption Text ..." >...</a>

К любой фотографии можно делать подпись, добавив параметр data-cb-caption, содержащий либо ID блока, который нужно загрузить, либо какой-то обычный текст, который будет просто отображён.

Image Gallery

<a href="image-1.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-2.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-3.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-4.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery"     data-cb-hash="picture"     data-cb-caption="Caption Text" >...</a>

Inline Content

Click Me.

<a href="#text" class="cartonbox" data-cb-type="inline" data-cb-hash="text">...</a> <a href="#article" class="cartonbox" data-cb-type="inline" data-cb-hash="article"     data-cb-design="earth" >...</a> <div style="display: none;">     <div id="text">         ... Content ...     </div>     <div id="article">         ... Content ...     </div> </div>

Modal Title

Another Modal

Another Modal

Modal Content

iFrame

iFrame.

<a href="https://apple.com/" class="cartonbox" data-cb-type="iframe">...</a>
<a href="https://apple.com/ #content" class="cartonbox" data-cb-type="iframe">...</a> // или <a href="https://apple.com/" class="cartonbox" data-cb-type="iframe"     data-cb-fragment="#content" >...</a>

Youtube/Vimeo Video

<a href="https://youtube.com/embed/yRuGhX791FQ?rel=0&showinfo=0&autoplay=1&wmode=transparent"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video16x9" >...</a> <a href="https://player.vimeo.com/video/79804777?autoplay=1&color=ffffff&title=0&byline=0&portrait=0"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video21x9" >...</a> <a href="https://vk.com/video_ext.php?oid=5713686&id=170265723&hash=5296394ecc50acbd&hd=2&autoplay=1"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video16x9"     data-cb-hash="video" data-cb-caption="John Butler — Ocean" >...</a>