Simple jQuery Photo Gallery Plugin with Auto Image Resizing - Relocator.js

File Size: 2.46MB
Views Total: 5804
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Photo Gallery Plugin with Auto Image Resizing - Relocator.js

Relocator.js is a lightweight and smart jQuery plugin for creating a photo gallery that auto resizes the images and fit within the given canvas without stretched or shrinked. The gallery also has the ability to display image' title and description on hover over, using data-* attributes.

Basic usage:

1. Load the jQuery library and Relocator.js in the head section of your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.relocator.1.0.0.js"></script>

2. Create the html for the gallery. Using data-title and data-desc for image's title and description.

<div class="relocator" id="relocator">
<ul>
<li><a href=""><img src="gallery/1.jpg" data-title="White Clouds" data-desc="White Clouds"></a></li>
<li><a href=""><img src="gallery/2.jpg" data-title="Bug" data-desc="Bug"></a></li>
<li><a href=""><img src="gallery/3.jpg" data-title="Flight Landing" data-desc="Flight Landing"></a></li>
<li><a href=""><img src="gallery/4.jpg" data-title="Angry Child" data-desc="Angry Child"></a></li>
<li><a href=""><img src="gallery/5.jpg" data-title="Sunset" data-desc="Sunset"></a></li>
<li><a href=""><img src="gallery/6.jpg" data-title="Old Toy" data-desc="Old Toy"></a></li>
...
</ul>
</div>

3. The CSS for the gallery

.relocator {
width: 720px;
margin-top: 10px;
height: auto;
display: inline-block;
}
.relocator ul {
list-style: none;
margin: 0px;
padding: 0px;
height: auto;
}
.relocator ul li {
width: 200px;
height: 150px;
overflow: hidden;
position: relative;
float: left;
margin-left: 20px;
margin-bottom: 15px;
padding: 10px;
background: #ffffff;
}
.relocator ul li a {
width: 200px;
height: 150px;
overflow: hidden;
display: block;
position: relative;
}
.title_bg {
background: rgba(255,255,255,.7);
padding: 5px;
width: 190px;
}
#highlighter {
background: rgba(255,255,255,.7);
}
.title_txt {
color: #ff6c00;
text-decoration: none;
}
.hig_content {
text-decoration: none;
color: #ff6c00;
overflow: hidden;
padding: 5px;
}
a {
text-decoration: none;
color: #000;
}

4. Call the plugin with options

<script>
$(document).ready(function(){
$('#relocator').relocate({
title: false,
highlight: true,
direction: "bottom",
speed: 250,
});
});
</script>

This awesome jQuery plugin is developed by dineshhv. For more Advanced Usages, please check the demo page or visit the official website.