• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder vergrößern..

Status
Für weitere Antworten geschlossen.

tim-peters

Neues Mitglied
Hey
habe folgendes Java-Script im Internet gefunden.
Code:
var maxZoomFactor = 2.0;

function addGlobalStyle(css) {
  var head = document.getElementsByTagName('head')[0];
  if (head) { 
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
  }
}

addGlobalStyle('.tip {border:0;padding:1px;visibility:hidden;position:absolute;z-index:100;background-color:#f77;}');
addGlobalStyle('.tip img {border:5px solid white;}');

function mouseMove(event) {
    var divObj = document.getElementById(this.alt);
    var imgObj = divObj.firstChild;
  var aspectRatio = imgObj.naturalWidth / imgObj.naturalHeight;
    var x = 0, y = 0, maxWidth = 0, maxHeight = 0, zoomFaktor = 0; 
    // check which side of the cursor has more space left
    if(event.pageX < (window.innerWidth / 2)) {
      x = event.pageX + 10;
      maxWidth = window.innerWidth - (event.pageX + 50);
    } else {
      x = event.pageX - (5 + divObj.offsetWidth); // show large image left from cursor
      maxWidth = event.pageX - 20;
    }
    // zoom image to max size, so it still fits in the window
  maxHeight = window.innerHeight - 20;
  zoomFaktor = Math.min(maxZoomFactor, maxHeight / imgObj.naturalHeight, maxWidth / imgObj.naturalWidth);
  imgObj.width = imgObj.naturalWidth * zoomFaktor;
  imgObj.height = imgObj.naturalHeight * zoomFaktor;
  // if the zoomed image still fits on the left side of the cursor, put it there
    if(event.pageX - (5 + divObj.offsetWidth) >= 0) {
      x = event.pageX - (5 + divObj.offsetWidth); // show large image left from cursor
    }
    y = event.pageY - (divObj.offsetHeight / 2); // show large image centered beside the cursor
    // don't let it slide out the top or bottom of the window
    y = Math.min(y, window.pageYOffset + window.innerHeight - divObj.offsetHeight - 5);
    y = Math.max(y, window.pageYOffset + 5);

    divObj.style.left = x + 'px';
    divObj.style.top = y + 'px';
    divObj.style.visibility = "visible";
}

function mouseOut(event) {
    var divObj = document.getElementById(this.alt);
  divObj.style.visibility = "hidden";
}

function addImage(smallImgObj, index) {
    var smallSrc = smallImgObj.src;
    // do not re-add images that already have a alt tag starting with 'largeDiv'
    if(smallSrc.lastIndexOf("-") == (smallSrc.length - 6) && smallImgObj.alt.indexOf("largeDiv") != 0) 
    {
      // cut the '-m', '-w' or '-s' part out of the source name
      var largeSrc = smallSrc.substring(0, smallSrc.length - 6) + smallSrc.substring(smallSrc.length - 4, smallSrc.length);
      smallImgObj.alt = "largeDiv:" + largeSrc;

      var largeDivObj = document.createElement('div');
      largeDivObj.innerHTML = "<div id='largeDiv:" + largeSrc + "' class='tip'><img src='" + largeSrc + "'></div>";
      document.body.appendChild(largeDivObj);

      smallImgObj.addEventListener('mouseover',    mouseMove, true);
      smallImgObj.addEventListener('mousemove',    mouseMove, true);
      smallImgObj.addEventListener('mouseout', mouseOut, true);
    }
}

function addAllImages() {
  //GM_log('addAllImages');
  for (var i = 0; i < document.images.length; i++) {
    addImage(document.images[i], i);
  }
}

function DOMAttrModified(event) {
  //GM_log('DOMAttrModified: event: ' + event.target.id);
  if (event.target.id != '' && event.target.id.substring(0, 9) != "largeDiv:") { // don't reload on empty or self generated events
    addAllImages(); 
  }
}

// check for new images after document has been changed by AJAX scripts
document.addEventListener("DOMAttrModified", DOMAttrModified, false);

// add a larger image for all images 
addAllImages();
Das Script soll bewirken, dass Bilder bei Mouseover vergrößert werden. Allerdings sind meine Javascript Kenntnisse zu eingeschränkt um die Voraussetzungen zu verstehen, die dieses Script benötigt.:sad:
Kann mir jemand sagen, wo ich die diese finde, bzw. wie eine entsprechende HTML oder PHP seite aussehen müsste?

wäre echt super:mrgreen:
lg Tim-

Nachtrag:

Habe grade im Forum gesucht und gesehen, dass es schon einen Thread zu diesem Thema gibt, der mir weiterhilft.
hab die Lösung hier gefunden. Sry..
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.
Zurück
Oben