CaptionBox demo

Live demo of jquery CaptionBox image viewer. CaptionBox was originally created with an aim to provide alternative to fancybox that will give more appealing solution for photographic websites. When presenting images there is often need for rich textual caption to make the story of the image go. Still, the most important part remains to provide as large image as possible. CaptionBox offers solution with custom and rich captions both for large screens and mobile devices.

Main benefits

Click on any thumbnail to see CaptionBox in action:

Incoming night

Sun was already down but reflected remaining light prepared best out of contrast on icy contours. Finding right foreground was hard though. Some areas were too scattered while others were unreachable or simply trampled. I found the best place just above Luční hut with a view to incoming dark night and Sněžka mountain. 7 stitched shots.

Night in the wilderness

When the skies are clear and the Moon is below the horizon it is still possible to experience really dark nights even in the middle of Europe. On those nights the Milky Way is not just noticeable but all its details clearly visible by the naked eye. Accompanied by the sounds of the forest (squirels, deer, owls) it is pure magic.

Dominants

I usually do not like cliché locations where everyone takes the same shot over and over again but then there is this view of the Prague castle - the most classical one. One of those views where everything is just right in terms of composition to the point when you just can not resist to take the shot again... this time with Sigma 60mm which is absolute beast of a lens! This shot is quite cropped but the sharpness is exceptional and the stars around lights are quite nicely resolved too.

Download

You can download CaptionBox from official gitHub repository.

Usage

Load jquery and css files in head (make sure you put captionbox.js after jquery library and that you have exif.js loaded):

            <link rel="stylesheet" href="/css/captionbox.css">
            <script src="/js/captionbox.js"></script>

Put CaptionBox basic tag and plugin initialization inside body tag:

            <div id="captionBox"></div>
            <script>
              $(document).ready(function(){
                  $('#captionBox').CaptionBox();
              });    
            </script>

By default CaptionBox processes anchor elements with class="captionBoxImage". Make your href point to original image. Optionally provide custom caption:

            <a class="captionBoxImage" href="/path_to_your_image.jpg">
              <img src="/path_to_your_thumnail.jpg"/>
              <div class="customCaption">
                Any elements you desire.
              </div>
            </a>

Of course you can make it work in html5 way:

            <figure>
              <a class="captionBoxImage" href="/path_to_your_image.jpg">
                <img src="/path_to_your_thumnail.jpg"/>
                <figcaption class="customCaption">
                  Any elements you desire.
                </figcaption>
              </a>
            </figure>

Notes

CaptionBox makes use of jquery mobile to allow swipe navigation between images. Swiping is not necessary for plugin to work properly even on mobile devices and can be turned off by parameter swipeNav (see below).

Options

You can initialize plugin with these options:

imageSelector

Default value: '.captionBoxImage'

Selector of anchor tag wrapping thumbnails.

showExif

Default value: true

If true exif information of images will be extracted and put into caption.

mobileWidth

Default value: 900

On screen wider than this value (in px) desktop version will be used, otherwise mobile version is used. Set it to 0 to disable mobile version.

alterUrlFlag

Default value: true

Enables URL alteration so that link to each captionBox image exists. It may be necessary to alter .htaccess file in your web folder to allow "fake" URLs. Eg.:

RewriteRule /img([0-9]+)/? / 

alterUrlString

Default value: 'img'

String added to your URL if URL alteration is enabled. Use letters and URL safe characters, do not use numbers as it will add a numeric identifier of each image automatically. URL of each image will than look like 'img1', 'img2' and so on.

swipeNav

Default value: true

Allows swipe navigation between images. If true, swiping is allowed (jquery mobile loaded).

disableRightClick

Default value: false

Makes basic protection against downloading images by disabling right-click context menu on images. Anyone with a little technical knowledge will be still able to get the image, though.

scrollBack

Default value: true

If true, makes your window scroll to thumbnail of the last image viewed after closing CaptionBox window.