FullZoom Portfolio with jQuery - jmFullWall

File Size: 1.35 MB
Views Total: 6005
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
FullZoom Portfolio with jQuery - jmFullWall

jmFullWall is a jQuery Plugin that allows you to create an impressive portfolio.

How to use it:

1. Include necessary elements in your <head> section:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<link rel="stylesheet" type="text/css" href="res/css/jmFullWall.css" />
<script type="text/javascript" src="res/js/lib/jquery.imgpreload.js"></script>
<script type="text/javascript" src="res/js/lib/jquery.imagepanner.js"></script>
<script type="text/javascript" src="res/js/lib/jquery.jmFullWall.js"></script>

2. Call the function

<script type="text/javascript">
$(function(){
	$('#wall').jmFullWall();	
});
</script>

3. Markup

<div id="wall-container">
<div id="wall-loading"></div>
<div id="wall-detail"></div>
<div id="wall">
<div id="wall-items">
<div class="wall-item"> <span class="bg hide">res/img/slide/1.jpg</span> <span class="img_detail hide">res/img/slide/1.jpg</span> <span class="tooltip hide">Audi Locus</span> <a href="#"><span class="title">Audi Locus</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/2.jpg</span> <span class="img_detail hide">res/img/slide/2.jpg</span> <span class="tooltip hide">Porsche Supercar</span> <a href="#"><span class="title">Porsche Supercar</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/3.jpg</span> <span class="img_detail hide">res/img/slide/3.jpg</span> <span class="tooltip hide">Ford GT</span> <a href="#"><span class="title">Ford GT</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/4.jpg</span> <span class="img_detail hide">res/img/slide/4.jpg</span> <span class="tooltip hide">Lamborghini Murcielago</span> <a href="#"><span class="title">Lamborghini Murcielago</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/5.jpg</span> <span class="img_detail hide">res/img/slide/5.jpg</span> <span class="tooltip hide">Nissan R390 GT1</span> <a href="#"><span class="title">Nissan R390 GT1</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/6.jpg</span> <span class="img_detail hide">res/img/slide/6.jpg</span> <span class="tooltip hide">Porsche 911 GT3 RS</span> <a href="#"><span class="title">Porsche 911 GT3 RS</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/7.jpg</span> <span class="img_detail hide">res/img/slide/7.jpg</span> <span class="tooltip hide">Pagani Zonda F</span> <a href="#"><span class="title">Pagani Zonda F</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/8.jpg</span> <span class="img_detail hide">res/img/slide/8.jpg</span> <span class="tooltip hide">Maybach Exelero</span> <a href="#"><span class="title">Maybach Exelero</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/9.jpg</span> <span class="img_detail hide">res/img/slide/9.jpg</span> <span class="tooltip hide">Dodge Challenger</span> <a href="#"><span class="title">Dodge Challenger</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/10.jpg</span> <span class="img_detail hide">res/img/slide/10.jpg</span> <span class="tooltip hide">Porsche 918 Spyder</span> <a href="#"><span class="title">Porsche 918 Spyder</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/11.jpg</span> <span class="img_detail hide">res/img/slide/11.jpg</span> <span class="tooltip hide">Racer X Design Freccia</span> <a href="#"><span class="title">Racer X Design Freccia</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/12.jpg</span> <span class="img_detail hide">res/img/slide/12.jpg</span> <span class="tooltip hide">Lamborghini Diablo</span> <a href="#"><span class="title">Lamborghini Diablo</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/13.jpg</span> <span class="img_detail hide">res/img/slide/13.jpg</span> <span class="tooltip hide">Ferrari Enzo</span> <a href="#"><span class="title">Ferrari Enzo</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/14.jpg</span> <span class="img_detail hide">res/img/slide/14.jpg</span> <span class="tooltip hide">Lamborghini Concept S</span> <a href="#"><span class="title">Lamborghini Concept S</span></a> </div>
<div class="wall-item"> <span class="bg hide">res/img/slide/15.jpg</span> <span class="img_detail hide">res/img/slide/15.jpg</span> <span class="tooltip hide">Porsche Cayman S</span> <a href="#"><span class="title">Porsche Cayman S</span></a> </div>
</div>
</div>
</div>

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