Stampa
Categoria: Javascript
Visite: 13434
Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

Ecco una serie di piccoli pezzi di codice in javascript.

 

This javascript code resize all thumbnails within the div box named vlightbox to adapt them to the div width

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- Resize the thumbnails in order to adapt to the div box width  -->
<script type="text/javascript">
// pGap=Space between the images
// pFrame=padding left+right+border
function setimagesize(pGap, pFrame) {    
    //var DivWidth=document.getElementById("vlightbox").offsetWidth;
    var DivWidth=document.getElementById("vlightbox").clientWidth;
    var fracPart = DivWidth % 150;
 
    // Calc
    var intPart = Math.floor(DivWidth / 150);
    var ImgWidth = Math.floor( DivWidth / intPart ) - (pGap + pFrame)     ; 
    var Delta=DivWidth - (ImgWidth * intPart) - ((pGap + pFrame) * intPart);   // scarto
    //alert(Delta);
    document.getElementById("vlightbox").style.paddingLeft=Delta/2 +'px';
    i=1;
    while  ( document.getElementById('myimg' + i) !=null )  {
        // alert('myimg' + i);
        if (document.getElementById('myimg' + i) !=null )  {
            document.getElementById('myimg' + i).style.width  = ImgWidth + 'px';
            document.getElementById('mylinks' + i).style.width = ImgWidth + pFrame + 'px';
            // document.getElementById("myli").style.backgroundSize="50px 50px";
        }
        i++;  
    }
}
 
</script>
 

 

When the window of the Browser is resized...

1
2
3
4
5
6
7
8
9
<!-- When the browser window is resized or loaded... --> 
 
<script type="text/javascript"> 
 
    window.onload = function() {setimagesize(8,14);}
 
    window.onresize = function(){setimagesize(8,14);}
 
</script>

 

This button can call the setimagesize function

1
2
<!-- Button to call the resizeimage function -->
<input type="button" value="Resize Images" onclick="setimagesize(8, 14)" />

- have fun -