Archivio mensile:settembre 2013

How to magnify an image

Ecco un semplice script (in standard javascript) per creare un effetto “lente da ingrandimento” sulle vostre immagini.

Quello che vi occorre prima di iniziare è:

  • un’immagine icona che vi servirà per dire che l’immagine ha l’effetto “lente da ingrandimento”
  • un’immagine pixel (1×1) che sarà la vostra lente d’ingrandimento (le dimensioni della lenta sono impostatili nella funzione javascript)
  • un’immagine piccola (quella che verrà mostrata nella pagina)
  • un’immagine grande (quella ad “alta definizione”)

Come primo passo, inserite nei vostri fogli di stile i seguenti valori (alternativa inseriteli come tag style dentro il tag head)

#imagePane {
display: block;
float: left;
margin-bottom: 12px;
margin-top: 10px;
position: relative;
width: 494px; // this parameter depends by image dimensions
}
#imageArea {
height: 370px; // this parameter depends by image dimensions
left: 0;
position: relative;
top: 0;
width: 494px; // this parameter depends by image dimensions
}
.imageAreaClass {
display: block;
height: 370px; // this parameter depends by image dimensions
width: 494px; // this parameter depends by image dimensions
}
#zoomImagePane {
border: 1px none black;
display: none;
height: 150px; // this parameter depends by image dimensions
overflow: hidden;
width: 150px; // this parameter depends by image dimensions
}
#bigImage {
height: 768px; // this parameter depends by image dimensions
position: absolute;
width: 1024px; // this parameter depends by image dimensions
}
#zoom {
left: 0;
position: absolute;
top: 0;
}
#zoomIcon {
bottom: 17px;
display: block;
float: right;
position: absolute;
right: 13px;
z-index: 10;
}

Come secondo passo, inserite le funzioni javascript nella vostra libreria js (alternativa inseriteli come tag script dentro il tag head)

var zoom_obj =null;
var ev = null;
var zoomImagePane =null;
var magnifierImage = null;
var zoomOffsetHeight=370;
var zoomOffsetWidth=494;
var magnifierWidth=150;
var magnifierHeight=150;
function zoomInit(zoom_object,evt,zoomDiv_id,zoomWidth,zoomHeight,zoomWidth){
zoom_object.style.opacity = 0;
zoom_object.style.filter = ‘alpha(opacity=0)’;
zoom_obj = zoom_object;
zoomImagePane = document.getElementById(zoomDiv_id);
magnifierImage = zoomImagePane.getElementsByTagName(“img”)[0];
zoomOffsetHeight = zoom_obj.offsetHeight;
zoomOffsetWidth=zoom_obj.offsetWidth;
magnifierHeight=zoomHeight;
magnifierWidth=zoomWidth;
if(window.addEventListener){ // Mozilla, Netscape, Firefox
zoom_obj.onmousemove=zoom;
} else { // IE
zoom_obj.attachEvent(‘onmousemove’, zoom);
}
}

function zoom(e){
ev = fixE(e);
if(zoomImagePane){
zoomImagePane.style.position =”absolute”;
zoomImagePane.style.display =”block”;
var lastLeft = (ev.layerX – zoomImagePane.offsetWidth*0.5);
var lastTop =(ev.layerY – zoomImagePane.offsetHeight*0.5);
var extraLeft=0;
var extraTop=0;
if(parseFloat(ev.layerX)<= magnifierWidth*0.5){
zoomImagePane.style.left =”0px”;
zoomImagePane.style.width = (ev.layerX+ magnifierWidth*0.5) + “px”;
extraLeft= magnifierWidth*0.5 – ev.layerX;
}else if(parseFloat(ev.layerX) >= (zoomOffsetWidth-magnifierWidth*0.5)){
zoomImagePane.style.left = ( ev.layerX – magnifierWidth*0.5 ) +”px”;
zoomImagePane.style.width = ( zoomOffsetWidth – ev.layerX + magnifierWidth*0.5 ) +”px”;
extraLeft=-(magnifierWidth*0.5 – zoomOffsetWidth + ev.layerX);
}else{
zoomImagePane.style.left=lastLeft +”px”;
zoomImagePane.style.width=magnifierWidth+”px”;
extraLeft=0;
}

if(parseFloat(ev.layerY)<=magnifierHeight*0.5){
zoomImagePane.style.top =”0px”;
zoomImagePane.style.height = (ev.layerY+magnifierHeight*0.5) + “px”;
extraTop=magnifierHeight*0.5-ev.layerY;
}else if(parseFloat(ev.layerY)>=(zoomOffsetHeight-magnifierHeight*0.5)){
zoomImagePane.style.top = ( ev.layerY – magnifierHeight*0.5 ) +”px”;
zoomImagePane.style.height = ( zoomOffsetHeight – ev.layerY + magnifierHeight*0.5 ) +”px”;
extraTop=-(magnifierHeight*0.5 – zoomOffsetHeight + ev.layerY );
}else{
zoomImagePane.style.top =lastTop +”px”;
zoomImagePane.style.height =magnifierHeight+”px”;
extraTop=0;
}

if(magnifierImage){
var ratioH = zoomOffsetHeight/magnifierImage.offsetHeight;
var ratioW = zoomOffsetWidth/magnifierImage.offsetWidth;
var lastLeftImg = ( -ev.layerX / ratioW + (zoomImagePane.offsetWidth – extraLeft)*0.5 );
var lastTopImg = ( -ev.layerY / ratioH + (zoomImagePane.offsetHeight – extraTop)*0.5 );
magnifierImage.style.left =lastLeftImg +”px”;
magnifierImage.style.top = lastTopImg+”px”;
}
}
}

function zoomEnd(){
if(zoomImagePane){
zoomImagePane.style.display =”none”;
}
}

function fixE(e){
if (typeof e == ‘undefined’) e = window.event;
if (typeof e.layerX == ‘undefined’) e.layerX = e.offsetX;
if (typeof e.layerY == ‘undefined’) e.layerY = e.offsetY;
return e;
}

Infine inserite il codice html dentro il corpo della vostra pagina (in neretto le impostazioni da configurare)

<div id=”imagePane”>
<div id=”imageArea”>
<!– magnifier icon –>
<img id=”zoomIcon” src=”path_of_magnifier_image” alt=”this is the magnifier image” />
<!– small image –>
<img class=”imageAreaClass” src=”path_of_small_image” alt=”this is the small image” id=”smallImage”/>
<div id=”zoomImagePane”>
<!– big image –>
<img id=”bigImage” src=”path_of_big_image” alt=”this is the big image”/>
</div>
<!– this is the image used as zoomed area –>
<img id=”zoom” src=”path_of_pixel_image” class=”imageAreaClass”
onmouseover=”zoomInit(this,event,’zoomImagePane’,’bigImage’,150,150)” onmouseout=”zoomEnd()” />
</div>
</div>

Potete verificare la funzionalità dello script su

http://www.zupersite.com/sample/zoom.htm

Where is waldo?

Use my magnifier to identify where is Waldo

Annunci

How to disable history back browser navigation (english)

During my work experience, I have faced a problem overestimated by many developers, the entropic behavior of final users.

Here you are a simple example javascript code to prevent the use of history back on browser navigation.

Enter the following script in the HEAD tag and you’re done

<script type = “text/javascript”>
var changeHashOnLoadTimeout;
var changeHashAgainTimeout;
var = storedHash window.location.hash;
changeHashOnLoad function () {
var = poundIdx window.location.href.indexOf (“#”);
if (poundIdx == -1) {
window.location.href + = “#”;
}
/ / avoid loop ie
storedHash = window.location.hash;
changeHashOnLoadTimeout = setTimeout (changeHashAgain, 50);
}

changeHashAgain function () {
window.location.href + = “1”;
}

changeHashAgainTimeout window.setInterval = (function () {
if (window.location.hash! = storedHash) {
window.location.hash = storedHash;
}
}, 50);

if (window.attachEvent) {
window.attachEvent (‘onload’, changeHashOnLoad);
} else if (window.addEventListener) {
window.addEventListener (‘load’, changeHashOnLoad, false);
else {}
document.addEventListener (‘load’, changeHashOnLoad, false);
}
</ script>

You can test the example of

http://www.zupersite.com/sample/block-history.htm

The script works for Firefox, Google Chrome, Safari and Internet Explorer 8 and above

comparison between browsers

if browsers were guns then …

How to disable history back browser navigation

Durante la mia esperienza lavorativa mi è capitato di affrontare un problema sottovalutato da molti sviluppatori, ovvero il comportamento entropico dell’utente finale (il cosiddetto utonto).

Ecco un esempio semplice codice javascript per impedirgli di utilizzare il tasto back del browser

Inserite nel tag HEAD il seguente script ed il gioco è fatto

<script type = “text/javascript”>
var changeHashOnLoadTimeout;
var changeHashAgainTimeout;
var storedHash = window.location.hash;
function changeHashOnLoad() {
var poundIdx = window.location.href.indexOf(“#”);
if(poundIdx==-1){
window.location.href += “#”;
}
//avoid loop ie
storedHash = window.location.hash;
changeHashOnLoadTimeout = setTimeout(changeHashAgain, 50);
}

function changeHashAgain() {
window.location.href += “1”;
}

changeHashAgainTimeout = window.setInterval(function(){
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);

if (window.attachEvent) {
window.attachEvent(‘onload’, changeHashOnLoad);
}else if (window.addEventListener) {
window.addEventListener(‘load’, changeHashOnLoad, false);
}else {
document.addEventListener(‘load’, changeHashOnLoad, false);
}
</script>

Potete testare l’esempio su

http://www.zupersite.com/sample/block-history.htm (seguite le istruzioni)

Lo script funziona per Firefox, Google Chrome, Safari ed Internet Explorer 8 e versioni superiori.

comparison between browsers

if browsers were guns then …