AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Предпросмотр картинки с открытием оригинала на javascript.

При создании фотогалереи или любой системы, содержащей картинки сталкиваешься с проблемой показа превьюшки, т.е. уменьшенной копии изображения с возможностью открыть орегинал. Как правило для этого используют PHP скрипт преобразования на сервере и храненения и загрузки двух изображений: большого и маленького. При этом сохраняется проблема, что нужно сохранять пропорции изображения.

Я попробовал пойти по другому пути:
На сервере всегда храниться исходное изображение, оно загружается в ограниченный с помощью overflow:hidden DIV, определяются исходные размеры изображения и оно вписывается в предназначенную для него область с сохранением пропорций. И все это делает малюсенький универсальный скрипт.



Исходный код этого примера:

<div style='overflow:hidden;width:100px;height:100px;cursor:pointer;display:inline-block;padding:0 5px'
	onclick="return !window.open('http://htmlweb.ru/java/ann.jpg')">
<img src='http://htmlweb.ru/java/ann.jpg' onload='fb_resize(this)' />
</div>

<script type="text/javascript">
function fb_resize(t){
if(!t.width&&!t.height){window.setTimeout(function() { fb_resize(t); }, 100 );return;}
w=t.width;
h=t.height;
if(w<=100&&h<=100){}
else if(w<h){w=Math.ceil(w*100/h);h=100;}
else {h=Math.ceil(h*100/w);w=100;}
t.setAttribute("width", w);
t.parentNode.style.width=w+'px';
t.setAttribute("height", h);
t.parentNode.style.height=h+'px';
}
</script>

Для тех, кто сходу не понял:
overflow:hidden - позволяет показать из изображения левый верхний угол размером 100x100, при этом все изображение загружается и доступно
display:inline-block - позволяет в строчку размеестить несколько превьюшек
padding:0 5px - задает растояние между превьюшками по ширине


.

© Copyright 2008-2016 by KDG