LightBox

Single Image Lightbox

Girl 1

<a title="Girl 1" class="colorbox" href="img/demo/lightbox/girl-1-lg.jpg">
                    <img alt="Girl 1" src="img/demo/lightbox/girl-1.jpg">
                </a>
                    

Girl 2

<a title="Girl 2" class="colorbox" href="img/demo/lightbox/girl-2-lg.jpg">
                    <img alt="Girl 2" src="img/demo/lightbox/girl-2.jpg">
                </a>
                    

Girl 3

<a title="Girl 3" class="colorbox" href="img/demo/lightbox/girl-3-lg.jpg">
                    <img alt="Girl 3" src="img/demo/lightbox/girl-3.jpg">
                </a>
                    

Gallery Lightbox

<a title="Girl 1" class="colorbox-gallery" href="img/demo/lightbox/girl-1-lg.jpg"><img alt="Girl 1" src="img/demo/lightbox/girl-1.jpg"></a>

<a title="Girl 2" class="colorbox-gallery" href="img/demo/lightbox/girl-2-lg.jpg"><img alt="Girl 2" src="img/demo/lightbox/girl-2.jpg"></a>

<a title="Girl 3" class="colorbox-gallery" href="img/demo/lightbox/girl-3-lg.jpg"><img alt="Girl 3" src="img/demo/lightbox/girl-3.jpg"></a>

<a title="Girl 4" class="colorbox-gallery" href="img/demo/lightbox/girl-4-lg.jpg"><img alt="Girl 4" src="img/demo/lightbox/girl-4.jpg"></a>
                    
<script type="text/javascript">
    jQuery(document).ready(function () {
        $.colorbox.settings.opacity = 0.75;
        $.colorbox.settings.maxWidth = "90%";
        $.colorbox.settings.maxHeight = "90%";
        jQuery('.colorbox').colorbox({rel: 'nofollow'});
        jQuery('.colorbox-gallery').colorbox({
            rel: 'colorbox-gallery'
        });
    });
</script>