Изображения. Променяме размера с помощта на мишката
.jpg)
петък
Поздрави на всички приятели, читатели и гости на блога. В предишна моя публикация писах как да променим формата на изображенията с помощта на курсора. Днес ще се научим как да променим размера на изображенията, като използваме скрол бутона на мишката.
Какво ще постигнете. След зареждане на изображението на желаното от вас място в една публикация и запаметяване, отворете публикацията, която вече е на главната страница. Задръжте курсора над изображението в нея и превъртете скрола на мишката. В едната посока ще постигнете увеличение на изображението, а в другата посока - смаляване. Наистина е страхотно!
За да използвате такава функция в страниците на блога, трябва да поставите скрипт в кода на темата над затварящия таг </ head>.
Кодът е:
После, когато качвате снимка или изображение в редактора на блогър, отидете в HTML секцията му и поставете отрязъка id = "test" преди URL адреса на конкретното изображение. Ето така:
Сега можете да предложите на посетителите си интересни снимки или някои уникални и авторски изображения, за да ги видят в по-голям размер.
На всички въпроси ще отговоря в коментарите или използвайте формуляра на контактната форма.
Успех и доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Какво ще постигнете. След зареждане на изображението на желаното от вас място в една публикация и запаметяване, отворете публикацията, която вече е на главната страница. Задръжте курсора над изображението в нея и превъртете скрола на мишката. В едната посока ще постигнете увеличение на изображението, а в другата посока - смаляване. Наистина е страхотно!
За да използвате такава функция в страниците на блога, трябва да поставите скрипт в кода на темата над затварящия таг </ head>.
Кодът е:
<script type='text/javascript'>
(function(){
var zooming=function(e){
e=window.event ||e;
var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;
if(!+'\v1'){//IE
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom > zooming.min)
o.style.zoom = zoom + '%';
e.returnValue=false;
}else {
size=o.getAttribute("_zoomsize").split(",");
zoom=parseInt(o.getAttribute("_zoom")) ||100;
zoom+=data/12;
if(zoom>zooming.min){
o.setAttribute("_zoom",zoom);
o.style.width=size[0]*zoom/100+"px";
o.style.height=size[1]*zoom/100+"px";
}
e.preventDefault();
e.stopPropagation();//for firefox3.6
}
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
zooming.min=min || 50;
obj.onmousewheel=zooming;
if(/Firefox/.test(navigator.userAgent))//if Firefox
obj.addEventListener("DOMMouseScroll",zooming,false);
if(-[1,]){//if not IE
obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
}
};
window.onload=function(){//must be onload , in order to get the image size
zooming.add(document.getElementById("test"));
}
})()
</script>
После, когато качвате снимка или изображение в редактора на блогър, отидете в HTML секцията му и поставете отрязъка id = "test" преди URL адреса на конкретното изображение. Ето така:
<img border="0" height="279" id="test" src="url адрес на изображението" width="320" />
Сега можете да предложите на посетителите си интересни снимки или някои уникални и авторски изображения, за да ги видят в по-голям размер.
Скриптът работи във всички шаблони. В моят нестандартен шаблон, който посочих по-горе за пример, действа само на първото изображение в публикацията. Нямам обяснение за това.
На всички въпроси ще отговоря в коментарите или използвайте формуляра на контактната форма.
Успех и доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
