[Tutorial JS] Redimensionare imagini 2

#1
Nume Tutorial: Redimensionare imagini 2
Descriere: Redimensionare imagini 2
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Recent am avut nevoie in forum sa redimensionez automat pozele puse de membrii in discutiile din forum. Mai jos gasiti scriptul javascript care face acest lucru.

Ideea de baza este urmatoarea:
- Toate pozele din pagina ce trebuiesc redimensionate au atributul name="forum_img"
- Scriptul se incarca in header-ul pagini iar pentru apelare am facut apel la functia de redimensionare la sfarsitul generarii forumului
- exemplu concret il gasiti Aici

Cod: Selectaţi tot

<script language="javascript" type="text/javascript">
 function redimensionare_imagini() {
    // se preiau pozele din pagina
    var info = document.images;
    // se verifica cate sunt in total
    var total = info.length;
    // se ia fiecare imagine in parte si se verifica
    for(i=0;i<total;i++) {
       // se preia numele imagini
       var nume = document.images[i].name;
       // daca numele corespunde cu cel din forum
       if ( nume == 'forum_img' ) {
          // se preiau dimensiunile pozei originale
          var originalH = document.images[i].height;
          var originalW = document.images[i].width;
          var sursa = document.images[i].src;
          //var bordura = document.images[i].border;
          //var alt = document.images[i].alt;
          // se calculeaza ratia pozei
          var ratio = originalH / originalW;
          // setam valorile maxime
          var maxH = 300;
          var maxW = 300;
          // setam noile valori ale pozei
          var newH = maxH;
          var newW = maxW;
          var newB = 0;
          if ( originalW >= maxW && ratio <= 1) {
             newW = maxW;
             newH = Math.round(newW * ratio);
             newB = 1;
          }
          else if ( originalH >= maxH) {
             newH = maxH;
             newW = Math.round(newH / ratio);
             newB = 1;
          }
          else if ( originalW <= maxW && originalH <= maxH ) {
             newH = originalH;
             newW = originalW;
          }
          // schimbam dimensiunile la poza
          document.images[i].height = newH;
          document.images[i].width = newW;
          document.images[i].border = newB;
          // optional se afiseaza un raport in pagina intr-un div cu id text
          //var text = document.getElementById("text").innerHTML;
          //document.getElementById("text").innerHTML =
          //   (text+'<br />sursa: '+sursa+' - inaltime: '+newH+' - latime: '+newW+' - nume: '+nume);
       }
    }
 }
 </script> 

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 1 vizitator