JavaScript

Light Gallery

Here is the code you will need in order to create a light gallery. You will need a thumbnail of the image you wish to use as well as the image. Place this code where you would like you gallery to appear. Here is an example followed by the code.

Example

Click on one of the images below.

Code Section

<div id="lightgallery">
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage1.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail1.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage2.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail2.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/LightGalleryImage3.jpg"> 
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail3.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage4.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail4.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage5.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail5.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage6.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail6.jpg" /> 
</a>
</div>
<style type="text/css">#lightgallery img{
max-width: 175px;
padding: 5px;
}
</style>