29 November 2012

Easy Image Zoom jQuery Plugin

The easiest image zoomer there is!

gambar aslinya 1000pixel yaitu afika.jpg kl gambar yg pas kecilnya jadi 250px = afika1.jpg

Roll over the image to view details.

Easy Zooom plugin is brought to you by Css Globe, Easy front-end framework and supported by Css Templates by Templatica

Easy Image Zoom jQuery Plugin

The easiest image zoomer there is!
<!--

Roll over the image to view details.
back to the article
Easy Zooom plugin is brought to you by Css Globe, Easy front-end framework and supported by Css Templates by Templatica

ini codingannya bikin easy zoom

<div dir="ltr" style="text-align: left;" trbidi="on">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Easy Zoom - easy image zoom</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script src="easyzoom.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(function($){

$('a.zoom').easyZoom();

});

</script>

<link href="default.css" media="all" rel="stylesheet" type="text/css"></link>

<style>

/*

Copy/paste this into your own stylesheet.

Edit width, height and placement of the dynamically created image zoom box.

*/

#easy_zoom{

width:600px;

height:400px;

border:5px solid #eee;

background:#fff;

color:#333;

position:absolute;

top:60px;

left:400px;

overflow:hidden;

-moz-box-shadow:0 0 10px #777;

-webkit-box-shadow:0 0 10px #777;

box-shadow:0 0 10px #777;

/* vertical and horizontal alignment used for preloader text */

line-height:400px;

text-align:center;

}

</style>

</head>

<body>

<div id="container">

<h1>

Easy Image Zoom jQuery Plugin</h1>

The easiest image zoomer there is!<br />

<!--<a class="zoom" href="http://www.blogger.com/large.jpg"><img alt="New York" src="small.jpg" /></a><br />

</div>

</body></html>