LightBox
Click to preview the LightBox demo. View demo
Single Image
Code:
html
<div class="row">
<div class="col-sm-4">
<div class="lightbox-photo">
<a href="/Portals/13/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="Default">
<img alt="" src="/portals/13/Features-Images/lightbox-img01.jpg" />
</a>
<div class="title">Default</div>
</div>
</div>
<div class="col-sm-4">
<div class="lightbox-photo">
<a href="/Portals/13/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="With Icon">
<span class="photo">
<img alt="" src="/portals/13/Features-Images/lightbox-img02.jpg" />
<em class="fa fa-search"></em>
</span>
</a>
<div class="title">With Icon</div>
</div>
</div>
<div class="col-sm-4">
<div class="lightbox-photo">
<div class="photo">
<img alt="" src="/portals/13/Features-Images/lightbox-img03.jpg" />
<span class="icon">
<a href="/Portals/13/Features-Images/lightbox-img01-big.jpg" class="LightBox_image" title="Hover Effect">
<em class="fa fa-search"></em>
</a>
<a href="#" title="Hover Effect">
<em class="fa fa-link"></em>
</a>
</span>
</div>
<div class="title">Hover Effect</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="lightbox-photo">
<a href="/Portals/13/Features-Images/lightbox-img04-big.jpg" class="LightBox_image_gallery1" title="image 01">
<img alt="" src="/portals/13/Features-Images/lightbox-img04.jpg" />
</a>
<div class="title">image 01</div>
</div>
</div>
<div class="col-sm-4">
<div class="lightbox-photo">
<a href="/Portals/13/Features-Images/lightbox-img05-big.jpg" class="LightBox_image_gallery1" title="image 02">
<img alt="" src="/portals/13/Features-Images/lightbox-img05.jpg" />
</a>
<div class="title">image 02</div>
</div>
</div>
<div class="col-sm-4">
<div class="lightbox-photo">
<a href="/Portals/13/Features-Images/lightbox-img06-big.jpg" class="LightBox_image_gallery1" title="image 03">
<img alt="" src="/portals/13/Features-Images/lightbox-img06.jpg" />
</a>
<div class="title">image 03</div>
</div>
</div>
</div>Album Group
Code:
html
<div class="lightbox-photo LightBox_image_group">
<a href="/Portals/13/Features-Images/lightbox-img07-big01.jpg" title="image 01">
<img alt="" src="/portals/13/Features-Images/lightbox-img07.jpg" />
</a>
<a href="/Portals/13/Features-Images/lightbox-img07-big02.jpg" title="image 02"></a>
<a href="/Portals/13/Features-Images/lightbox-img07-big02.jpg" title="image 03"></a>
<div class="title">Education(3)</div>
</div>Image Gallery
Code:
html
<div class="row">
<div class="col-sm-6">
<div class="lightbox-photo">
<a href="http://www.youtube.com/watch?v=AkcUoA2f-jU" class="LightBox_youtube" title="Video">
<img alt="" src="/portals/13/Features-Images/lightbox-img08.jpg" />
</a>
<div class="title">Video</div>
</div>
</div>
</div>Videos
Code:
html
<a href="http://www.youtube.com/watch?v=AkcUoA2f-jU" class="LightBox_youtube dg-btn-1 btn-accent radius-3px" title="Open Youtube Video">Open Youtube Video</a>
<a href="https://vimeo.com/181538531" class="LightBox_vimeo dg-btn-1 btn-accent radius-3px" title="Open Vimeo Video">Open Vimeo Video</a>
<a href="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d11934.681749425408!2d-102.84573179999998!3d41.59801185!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-CN!2sus!4v1487647956672" class="LightBox_gmaps dg-btn-1 btn-accent radius-3px" title="Open Google Map">Open Google Map</a>Videos & Maps
Code:
html
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-sm">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-lg">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-modal-xl">Large Modal</button>
<div class="modal fade dg-modal" id="bs-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Optional Sizes
Code:
html
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-header-default">Large Modal</button>
<div class="modal fade dg-modal" id="bs-header-default" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-primary radius-3px" data-toggle="modal" data-target="#bs-header-primary">Large Modal</button>
<div class="modal fade dg-modal header-primary" id="bs-header-primary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 btn-primary radius-3px" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-danger radius-3px" data-toggle="modal" data-target="#bs-header-danger">Large Modal</button>
<div class="modal fade dg-modal header-danger" id="bs-header-danger" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 btn-danger radius-3px" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-success radius-3px" data-toggle="modal" data-target="#bs-header-success">Large Modal</button>
<div class="modal fade dg-modal header-success" id="bs-header-success" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 btn-success radius-3px" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-info radius-3px" data-toggle="modal" data-target="#bs-header-info">Large Modal</button>
<div class="modal fade dg-modal header-info" id="bs-header-info" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-warning radius-3px" data-toggle="modal" data-target="#bs-header-warning">Large Modal</button>
<div class="modal fade dg-modal header-warning" id="bs-header-warning" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-denim radius-3px" data-toggle="modal" data-target="#bs-header-denim">Large Modal</button>
<div class="modal fade dg-modal header-denim" id="bs-header-denim" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-denim" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="dg-btn-1 btn-cadetblue radius-3px" data-toggle="modal" data-target="#bs-bg-cadetblue">Large Modal</button>
<div class="modal fade dg-modal bg-cadetblue" id="bs-bg-cadetblue" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Optional Color
Code:
html
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-up">Large Modal</button>
<div class="modal fade dg-modal modal-slide-up" id="bs-example-up" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-in">Large Modal</button>
<div class="modal fade dg-modal modal-slide-in" id="bs-example-in" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-out">Large Modal</button>
<div class="modal fade dg-modal modal-slide-out" id="bs-example-out" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-down">Large Modal</button>
<div class="modal fade dg-modal modal-slide-down" id="bs-example-down" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-right">Large Modal</button>
<div class="modal fade dg-modal modal-slide-right" id="bs-example-right" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-example-left">Large Modal</button>
<div class="modal fade dg-modal modal-slide-left" id="bs-example-left" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-rotate-left">Large Modal</button>
<div class="modal fade dg-modal modal-rotate-left" id="bs-rotate-left" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-rotate-right">Large Modal</button>
<div class="modal fade dg-modal modal-rotate-right" id="bs-rotate-right" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-horizontal">Large Modal</button>
<div class="modal fade dg-modal modal-3d-horizontal" id="bs-3d-horizontal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-vertical">Large Modal</button>
<div class="modal fade dg-modal modal-3d-vertical" id="bs-3d-vertical" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-slit">Large Modal</button>
<div class="modal fade dg-modal modal-3d-slit" id="bs-3d-slit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#bs-3d-newspaper ">Large Modal</button>
<div class="modal fade dg-modal modal-3d-newspaper " id="bs-3d-newspaper" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Default Modal Title</h4>
</div>
<div class="modal-body">
<p>Nam volutpat aliquam sem... </p>
</div>
<div class="modal-footer">
<button type="button" class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>