[J000S]

Hallo alle zusammen,



ich hab ein ärgerliches Problem mit einem Javascript Zoom-Effekt. Vorweg gleich mal: Ich hab das Script nicht selber geschrieben und bin auch nicht gerade der Experte für JS.


Wie dem auch sei... das Script an sich funktioniert Auch mit 2 oder mehr Bildern. Nur hab ich jetzt eigentlich das Problem, dass wenn ich ein Bild im Hochformat habe, dieses wie ein Querformatiges gezoomt wird.

Ich habe schon versucht, das Script zwei mal einzubinden, sodass das eine script für quer und das andere für hoch ist. Dummerweise funktioniert immer nur eines Also nur ein Bild wird gezoomt.


Hoffe mir kann jemand zeigen, wie ich das hinbekomme, dass die unterschiedlichen Bilder gezoomt werden können.

// JavaScript Bilder Zoom
function zoomImages(PIXEL)
    {
        function getAllImages()
        {
            images = document.getElementsByTagName('img'); // Alle Bilder
            for(i = 0;i < images.length;i++) // Bilder einzeln durchgehen
            {
                image = images[i]; // Momentanes Bild in Variable für einfachere Schreibweise
                if(image.className) // Wenn das Attribute class vorhanden ist 
                {
                    if(image.className.match(/zoom/i)) // Wenn in der Klasse / den Klassen zoom vorhanden ist
                    {
                        image.onmouseover = function() // Beim überfahren
                        {
                            zoomIn(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                        image.onmouseout = function() // Beim verlassen des Bildes
                        {
                            zoomOut(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                    }
    }
            }
        }
  
        function zoomIn(IMAGE)
        {
            n = 0;
            for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
        }
  
        function zoomOut(IMAGE)
        {
            n = 0;
            for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
        }
        getAllImages();
    }
    window.onload = function()
    {
        zoomImages(100); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll
 }

Dieser Beitrag wurde von J000S bearbeitet: 21. November 2011 - 09:10

[Ludacris]

Wenn du ein bisschen (ca ne Stunde) warten kannst dann schau ich mal was ich machen kann

[J000S]

hm ja, dass sollte gehen





wenn du keine zeit zur Verfügung hast, ist das natürlich OK. Vielleicht hat ja schon jemand anderes ne Idee?

Dieser Beitrag wurde von J000S bearbeitet: 17. November 2011 - 11:32

[Ludacris]

ich hab total auf dich vergessen sobald ich hier Strom hab werd ich's mir anschaun

Sooo... mein erster Ansatz wäre jetzt mal einfach per if-else Verzweigung zu überprüfen ob das breite größer ist als die höhe und umgekehrt. Wenn das schon klappt dann bin ich happy, versuch das einfach mal

// JavaScript Document

// JavaScript Bilder Zoom
function zoomImages(PIXEL)
    {
        function getAllImages()
        {
            images = document.getElementsByTagName('img'); // Alle Bilder
            for(i = 0;i < images.length;i++) // Bilder einzeln durchgehen
            {
                image = images[i]; // Momentanes Bild in Variable für einfachere Schreibweise
                if(image.className) // Wenn das Attribute class vorhanden ist 
                {
                    if(image.className.match(/zoom/i)) // Wenn in der Klasse / den Klassen zoom vorhanden ist
                    {
                        image.onmouseover = function() // Beim überfahren
                        {
                            zoomIn(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                        image.onmouseout = function() // Beim verlassen des Bildes
                        {
                            zoomOut(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                    }
    }
            }
        }
  
        function zoomIn(IMAGE)
        {
            n = 0;
			if(IMAGE.style.width > IMAGE.style.height){
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
			else if (IMAGE.style.width < IMAGE.style.height){
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
			else{
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
            
        }
  
        function zoomOut(IMAGE)
        {
            n = 0;
			if(IMAGE.style.width > IMAGE.style.height){
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
 
			}
			else if(IMAGE.style.width > IMAGE.style.height){
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
 
			}
			else
			{
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
			}
        }
        getAllImages();
    }
    window.onload = function()
    {
        zoomImages(100); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll
 }

[J000S]

Hm... jetzt hab ich gerade wenig Zeit dfür



werde das wohl erst heute Nachmittag testen können.

[Ludacris]

Kein Problem, teste es wann du zeit hast, mich drängts nicht

[J000S]

Naja... beide Bilder werden gezoomt.... aber das Hochformatige wird total unproportional vergrößert

[Ludacris]

Hm...

mach mal nen screenshot

[J000S]

also hier ist das wenn er wieder raus gezoomt hat...









PS: Hab gleich um 1 frei. Wäre um 3 erst wieder zu Hause um weiter zu gucken



EDIT: Das Bild wird beim 1. mal so klein und danach wird das dann immer größer. Also es zoomt mehr rein als raus. und dieses unproportionale bleibt so.

Dieser Beitrag wurde von J000S bearbeitet: 18. November 2011 - 12:50

[Ludacris]

Hm.. pack mal den HTML und JavaScript Code in eine Datei und schick mir die.

[J000S]

Ja... das müsste allerdings bis Sonn- oder evtl bis Montag warten.

Hab momentan sehr viel um die Ohren

[J000S]

Fehler gefunden!!!

function zoomImages(PIXEL)
 {       
   function getAllImages()        
    {
    images = document.getElementsByTagName('img'); // Alle Bilder
    for(i = 0;i < images.length;i++) // Bilder einzeln durchgehen
     {
      image = images[i]; // Momentanes Bild in Variable für einfachere Schreibweise                
      if(image.className) // Wenn das Attribute class vorhanden ist 
       {
        if(image.className.match(/zoom/i)) // Wenn in der Klasse / den Klassen zoom vorhanden ist                    
         {
          image.onmouseover = function() // Beim überfahren
           {
            zoomIn(this); // Funktionsaufruf mit aktivem Bild als Parameter
           }
          image.onmouseout = function() // Beim verlassen des Bildes                        
           {                            
            zoomOut(this); // Funktionsaufruf mit aktivem Bild als Parameter                        
           }
         }
       }
     }
   }
   
   function zoomIn(IMAGE)
   {
    n = 0;
     if(IMAGE.style.width > IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
     }
     else if (IMAGE.style.width < IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }
     else{
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }
   }
   
   function zoomOut(IMAGE)
   {
    n = 0;
     if(IMAGE.style.width > IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                         
     }
     else if(IMAGE.style.width < IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    //window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                         
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = 0 + ++n * 0.5 + 'px'; IMAGE.style.top = 0 + n * 0.5 + 'px'; }, i * 4);
     }
     else{
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
     window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                        
     }
   }
   getAllImages();
 }
 window.onload = function()
 {
  zoomImages(100);
 }
      

Du hattest bei else if stehen:

    window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth + 2 + 'px'; IMAGE.style.width = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }

es muss aber Image.style.height = IMAGE.offsetHeight sein Bei width natürlich auch.



Außerdem beim verkleinern der Hochformatigen Bilder:

else if(IMAGE.style.width > IMAGE.style.height){

naja passt bei Hochformat nicht so ganz.... einmal ein < eingesetzt und es läuft.

Achja bei offsetWidth und offsetHeight natürlich die Ziffern 2 + 3 vertauscht, damit er proportional vergrößert und verkleinert.



Ich hoffe ich habs einigermaßen verständlich erklären können

Dieser Beitrag wurde von J000S bearbeitet: 21. November 2011 - 09:23