Getting Started
1. Add the files to your project. To use GlassCase on a web page include the following files:
<!-- GlassCase stylesheet -->
<link rel="Stylesheet" type="text/css" href="../css/glasscase.min.css"/>
<!-- Modernizr a JavaScript library that detects HTML5 and CSS3 features in the user’s browser -->
<script src="../js/modernizr.custom.js" type="text/javascript"></script>
<!-- GlassCase plugin requires jQuery 1.7+ -->
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- GlassCase plugin's JS script file -->
<script src="../js/jquery.glasscase.min.js" type="text/javascript"></script>
Drop the script tags of Modernizr in the <head> of your HTML. For a better performance, you should have them follow after your stylesheet references.
2.
Once you've included the necessary files, you can add 1 or more GlassCases to your
page. The necessary HTML setup for the GlassCase consists of an unordered list of
images. The images will be resized to be shown as thumbs and also will be used as
display images.
Optionally, you can add captions to the Zoom Area. It is sufficient to add to the image tag the attribute data-gc-caption with the caption text.
It is very important that you add the class gc-start to the list
of images.
<ul id="glasscase" class="gc-start">
<li><img src="images/img1.jpg" alt="Text" data-gc-caption="Your caption text" /></li>
<li><img src="images/img2.jpg" alt="Text" /></li>
<li><img src="images/img3.jpg" alt="Text" /></li>
</ul>
3. After the HTML setup, you can call the plugin.
<!-- Calling the GlassCase plugin -->
<script type="text/javascript">
$(document).ready( function () {
//If your <ul> has the id "glasscase"
$('#glasscase').glassCase();
});
</script>
That's it!
The Demos you can see here.