Make Images Grow and Shrink (Live Thumbnails)

Bloglang kembali membawa artikel gaya lagi :D Setelah memosting lightbox with simple code, kali ini membawa artikel mirip macam itu tapi gaya punya lah ;)) :-bd Ternyata ini dasarnya sama dengan trik lightbox (kata pembuatnya mah) :P Heres for demo and details in english version :D Diverged. Karena ini bagus masukin enggak yah ke blog ;)) makin berat makin edan lah =)) Mari kita lanjut ke acara ramuannya yg berupa CSS, HTML, dan juga javascriptnya yah sob ;))

Kode CSS

.images{
text-align:center;
cursor:crosshair
}
Sobat bisa memvariasikan sendiri, mau bagaimana CSS-nya ;)

Javascript

<script type="text/javascript">
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++)

if (links[i].className == 'livethumbnail')
{
var img = links[i].getElementsByTagName('img')[0];
img.state = 'small';
img.smallSrc = img.getAttribute('src');
img.smallWidth = parseInt(img.getAttribute('width'));
img.smallHeight = parseInt(img.getAttribute('height'));
img.largeSrc = links[i].getAttribute('href');
img.largeWidth = parseInt(img.getAttribute('largewidth'));
img.largeHeight = parseInt(img.getAttribute('largeheight'));
img.ratio = img.smallHeight / img.smallWidth;
links[i].onclick = scale;
}
function scale()
{
var img = this.getElementsByTagName('img')[0];
img.src = img.smallSrc;
if (! img.preloaded)
{
img.preloaded = new Image();
img.preloaded.src = img.largeSrc;
}
var interval = window.setInterval(scaleStep, 10);
return false;
function scaleStep()
{
var step = 10;
var width = parseInt(img.getAttribute('width'));
var height = parseInt(img.getAttribute('height'));
if (img.state == 'small')
{
width += step;
height += Math.floor(step * img.ratio);
img.setAttribute('width', width);
img.setAttribute('height', height);
if (width > img.largeWidth - step)
{
img.setAttribute('width', img.largeWidth);
img.setAttribute('height', img.largeHeight);
img.setAttribute('src', img.largeSrc);
window.clearInterval(interval);
img.state = 'large';
}
}
else
{
width -= step;
height -= Math.floor(step * img.ratio);
img.setAttribute('width', width);
img.setAttribute('height', height);
if (width < img.smallWidth + step)
{
img.setAttribute('width', img.smallWidth);
img.setAttribute('height', img.smallHeight);
img.src = img.smallSrc;
window.clearInterval(interval);
img.state = 'small';
}
}
}
}
</script>

Letakan script dibawah sebelum/diatas kode </body>

Kode HTML

Bila akan dipakai misalkan dalam berposting gambar maka syntax akan seperti berikut...

<div class="images">
<a href="http://gambar-yg-akan-tampak-jika-cursor-diarahkan.jpg" class="livethumbnail">
<img src="gambar-yg-tampak-pada-postingan.jpg" width="160" height="120" largewidth="480" largeheight="360" />
</a>
</div>

Kalau size (ukuran) tinggal diatur-atur saja ;) Live demo on the blog Ben-Tools. Semua trik itu Beben si bloglang dapatkan dari web yg artikelnya wajib sobat baca. Rugiii kalau tidak dibaca mah \m/
Visit: Webmonkey
See you :-h