Image Gallery Room with 3D Rotation Effects

Image Gallery Room with 3D Rotation Effects
File Size: 720 KB
Views Total:
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.