images resize

**pyxis** · 30-11-2006, 22:54

Sto cercando di fare una gallery di immagini che faccia
le thumb in automatico e che cliccando su di esse faccia
l'ingrandimento. Sia le thumb che l'ingrandimento dovranno avere
una dimensione massima di larghezza e/o altezza.

Sono riuscito a far fare allo script le thumb.
Non riesco a vedere le immagini ingrandite,
per intenderci quelle che dovrebbero risultare dalla funzione
change_picture(x)

Ho fatto un po di prove e ottengo solo 2 errori diversi:
1) riesco a vedere l'immagine ingrandita ma senza ridimensionamento (dimensioni originali della foto).
2) riesco a ridimensionare l'immagine solo al primo click ma i successivi click
non avranno effetto sulle dimensioni della nuova immagine.

Questo lo script:

Codice PHP:


<head>

<script language="javascript">

function change_picture(x) {

    immagine.src = "/images/" + x + ".jpg'";

    xi = immagine.width;

    yi = immagine.height;

    if (xi > yi) {

        yi = (350/xi) * yi;

        xi = 350;

    } else {

        xi = (550/yi) * xi;

        yi = 550;

    }



}

</script>

</head>



<body>





[img]/images/1.jpg[/img]







<script language="javascript">

 <!--

    img1 = new Image();

    img1.src = "/images/1.jpg";

    x1 = img1.width;

    y1 = img1.height;

    if (x1 > y1) {

        y1 = (100/x1) * y1;

        x1 = 100;

    } else {

        x1 = (100/y1) * x1;

        y1 = 100;

    }



    document.write("[url='javascript:change_picture(1);'][img]" + img1.src + "[/img][/url]");

 //-->

</script>







<script language="javascript">

 <!--

    img2 = new Image();

    img2.src = "/images/2.jpg";

    x2 = img2.width;

    y2 = img2.height;

    if (x2 > y2) {

        y2 = (100/x2) * y2;

        x2 = 100;

    } else {

        x2 = (100/y2) * x2;

        y2 = 100;

    }



    document.write("[url='javascript:change_picture(2);'][img]" + img2.src + "[/img][/url]");

 //-->

</script>



</body>

Sto utilizzando firefox 2.0 ed epiphany 1.4.8.
Se possibile, qualche aiuto?

**cavicchiandrea** · 01-12-2006, 00:58

cosi funziona con ff 2.0 e ie 6 funziona:

codice:

<html>
<head>
<script language="javascript">
function change_picture(x) {
    var immagine = document.getElementById("immagine").src =  x ;
    xi = immagine.width;
    yi = immagine.height;
    if (xi > yi) {
        yi = (350/xi) * yi;
        xi = 350;
    } else {
        xi = (550/yi) * xi;
        yi = 550;
    }

}
</script>
</head>

<body>


[img]images/bariera_negativo.png[/img]



<script language="javascript">
<!--
    img1 = new Image();
    img1.src = "images/bariera.png";
    x1 = img1.width;
    y1 = img1.height;
    if (x1 > y1) {
        y1 = (100/x1) * y1;
        x1 = 100;
    } else {
        x1 = (100/y1) * x1;
        y1 = 100;
    }

    document.write("<a href=\"javascript:change_picture('" + img1.src + "');\">[img]" + img1.src + "[/img]</a>");
//-->
</script>



<script language="javascript">
<!--
    img2 = new Image();
    img2.src = "images/bariera_negativo.png";
    x2 = img2.width;
    y2 = img2.height;
    if (x2 > y2) {
        y2 = (100/x2) * y2;
        x2 = 100;
    } else {
        x2 = (100/y2) * x2;
        y2 = 100;
    }

    document.write("<a href=\"javascript:change_picture('" + img2.src + "');\">[img]" + img2.src + "[/img]</a>");
//-->
</script>

</body>
</html>

**pyxis** · 01-12-2006, 15:26

il tuo codice è ok, ma ho però modificato ancora il codice per avere anche
il ridimensionamento automatico dell'immagine ingrandita.
il codice non è molto bello perchè ho dovuto caricare l'immagine 2 volte altrimenti non mi assegnava le nuove dimensioni all'immagine. ho cercato tanto uno script simile senza trovarlo, magari qualcun'altro
ripartirà da questo.

il codice:

Codice PHP:


<html>

<head>

<script language="javascript">

<!--

  function init() {



// carico la prima immagine adattata per un box con dimensioni massime h=550 e w=350 

    tmp = new Image();

    tmp.src =  "images/prima_immagine.jpg";

    xt = tmp.width;

    yt = tmp.height;

    if (yt < xt) {

        yt = (350/xt) * yt;

        xt = 350;

    } else {

        xt = (550/yt) * xt;

        yt = 550;

    }



    var immagine = document.getElementById("immagine").src =  "images/prima_immagine.jpg"; ;

    document.getElementById("immagine").width =  xt ;

    document.getElementById("immagine").height =  yt ;



  }



// ricarica la thumb selezionata nel box impostandola con dimensioni massime di h=550 o w=350

function change_picture(x) {

    temp = new Image();

    temp.src =  x ;

    xt = temp.width;

    yt = temp.height;

    if (yt < xt) {

        yt = (350/xt) * yt;

        xt = 350;

    } else {

        xt = (550/yt) * xt;

        yt = 550;

    }



    var immagine = document.getElementById("immagine").src =  x ;

    document.getElementById("immagine").width =  xt ;

    document.getElementById("immagine").height =  yt ;



}

-->

</script>

</head>



<body onLoad="init();">



<table width="350" border="1"><tr><td>



[img]images/prima_immagine.jpg[/img]

</td></tr></table>





<script language="javascript">

<!--

    img1 = new Image();

    img1.src = "images/prima_immagine.jpg";

    x1 = img1.width;

    y1 = img1.height;

    if (x1 > y1) {

        y1 = (100/x1) * y1;

        x1 = 100;

    } else {

        x1 = (100/y1) * x1;

        y1 = 100;

    }



    document.write("<a href=\"javascript:change_picture('" + img1.src + "');\">[img]" + img1.src + "[/img]</a>");

//-->

</script>







<script language="javascript">

<!--

    img2 = new Image();

    img2.src = "images/seconda_immagine.jpg";

    x2 = img2.width;

    y2 = img2.height;

    if (x2 > y2) {

        y2 = (100/x2) * y2;

        x2 = 100;

    } else {

        x2 = (100/y2) * x2;

        y2 = 100;

    }



    document.write("<a href=\"javascript:change_picture('" + img2.src + "');\">[img]" + img2.src + "[/img]</a>");

//-->

</script>



</body>

</html>

Grazie!

Discussione: images resize

Strumenti discussione

Ricerca discussione

Visualizza

images resize

Permessi di invio