Image Gallery With In-place Zoom Functionality
File Size: | 4.92 KB |
---|---|
Views Total: | 1089 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery-powered image gallery that comes with an in-place zoom functionality using CSS3 transforms.
How to use it:
1. Create the HTML for the image gallery.
<div class="container"> <div class="row"> <!-- Image 1 --> <div class="pic-container"> <div class="parent"> <div class="wrapper thumb-1"> <div class="content"> <div class="img"></div> <div class="text"> <div class="line title"></div> <div class="line subtitle"></div> </div> </div> </div> </div> </div> <!-- Image 2 --> <div class="pic-container"> <div class="parent"> <div class="wrapper thumb-2"> <div class="content"> <div class="img"></div> <div class="text"> <div class="line title"></div> <div class="line subtitle"></div> </div> </div> </div> </div> </div> <!-- Image 3 --> <div class="pic-container"> <div class="parent"> <div class="wrapper thumb-3"> <div class="content"> <div class="img"></div> <div class="text"> <div class="line title"></div> <div class="line subtitle"></div> </div> </div> </div> </div> </div> <!-- More Images Here --> </div> </div>
2. Insert the following CSS snippets into the page.
.container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 327px; } .pic-container { float: left; } .parent { position: relative; width: 109px; height: 109px; margin: 0 auto; } .wrapper { width: 109px; height: 109px; cursor: pointer; position: absolute; overflow: hidden; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 375ms, width 275ms 100ms, height 375ms; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .wrapper.open { width: 330px; height: 330px; translate transition: transform 375ms, width 375ms, height 275ms 100ms; } .wrapper div.content { position: absolute; margin: auto; left: -9999px; right: -9999px; transform-origin: top; width: 330px; transform: scale(0.62); height: 330px; border-radius: 3px; background: #fff; overflow: hidden; transition: transform 375ms cubic-bezier(0.4, 0.0, 0.2, 1); } .wrapper.open .content { transform: scale(1); } .wrapper .img { height: 180px; background-size: cover; background-position: center; }
3. Add images as backgrounds to the gallery.
.thumb-1 .img { background-image: url(1.jpg); } .thumb-2 .img { background-image: url(2.jpg); } .thumb-3 .img { background-image: url(3.jpg); }
4. Load the latest jQuery library in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
5. Enable the zoom functionality.
$(function() { $('.wrapper').click(function() { $('.wrapper').each(function() { $(this).css('z-index', 0); }); $(this).css('z-index', 10); $(this).toggleClass('open'); }) })
This awesome jQuery plugin is developed by Vandan27. For more Advanced Usages, please check the demo page or visit the official website.