Image Gallery Room with 3D Rotation Effects
File Size: | 720 KB |
---|---|
Views Total: | 9972 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery Image Gallery that enables you to create a realistic environment for an image exposition using CSS 3D transforms. Images are “hanged” along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and we’ll be turned to the next wall whith more images.
How to use it:
1. Markup
<div id="gr-gallery" class="gr-gallery"> <div class="gr-main" style="display: none;"> <!-- --> </div> <div class="gr-room"> <div class="gr-wall-main"> <div class="gr-floor" style="width: 3382px;"></div> <figure></figure> <figure></figure> <!-- --> </div> </div> <nav> <span class="gr-prev">prev</span> <span class="gr-next">next</span> </nav> <div class="gr-caption"> <span class="gr-caption-close">x</span> </div> </div><!-- /gr-gallery -->
2. Include jQuery library and wallgallery.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/wallgallery.js"></script>
3. Call the plugin
<script> $(function() { Gallery.init( { layout : [3,2,3,2] } ); }); </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.