jQuery Olive

README

# Olive

A minimal image enlarger

[Demo](http://jsrun.it/rooofl/otwP)

jsdoit.css

.olive{
    position:relative;
    z-index:1;
}
.olive img{
	float:left;
}
.olive-large img{
	position:absolute;
    top:0;
    left:0;
    cursor:pointer;
    z-index:4;
}

/* For the demo only */

#box{
    width:370px;
    display:block;
    border:3px solid #131E2B;
    margin:100px;
    padding:5px 15px 15px 15px;
}
p{
    font-size:35px;
    line-height:45px;
    font-family:georgia, times new roman;
	margin:0px;
    letter-spacing:1px;
    color:#131E2B;
}
.olive img{
    padding:10px 10px 0 0;
}

jsdoit.html

<div id="box">
  <div class="olive">
    <a href="https://farm6.staticflickr.com/5054/5530570727_86560daeaf.jpg">
	    <img width="99px" height="100px" src="https://farm6.staticflickr.com/5054/5530570727_86560daeaf_t.jpg">
    </a>
  </div>
  <p>This simple script can load and display the big version of an image by clicking on its tumbnail.</p>
  <div class="olive">
    <a href="https://farm2.staticflickr.com/1051/1423328797_7310a8ecae_m.jpg">
	    <img width="100px" height="75px" src="https://farm2.staticflickr.com/1051/1423328797_7310a8ecae_t.jpg">
    </a>
  </div>
    <p>It is based on jQuery and can be useful for radical web design lovers.</p>
</div>

jsdoit.js

// Olive Images Expender
// Soon on my github account
// https://github.com/raphaelbastide/

var bigImg = $('<div class="olive-large" />'),
	imgFrame;

$('.olive a').click(function(e){
	e.preventDefault();
    $this = $(this);
	if (imgFrame) {
		imgFrame.css('z-index', '1');
	}
	imgFrame = $this.parent();
	imgFrame.css('z-index', '2');
	bigImg.appendTo(imgFrame);
	bigImg.html('<img width="auto" height="auto" src="'+ this.href +'" />');
	bigImg.show();
});
bigImg.click(function(){
	bigImg.hide();
});

Could be nice to use cursor:zoom-in and cursor:zoom-out.

Originally a Mozilla extension (-moz-zoom-in, -moz-zoom-out), added to a W3C draft spec in early 2012, there is a Webkit implementation (-webkit-zoom-in|out) as well, maybe others.