Endlich nach langem habe ich es fertig, wie gesagt strenge ich mich sehr an, es ist eine einfache Light Box Bilder-Galerie. Ich habe mir gedacht, um eine Bilder-Galerie zu haben, warum muss ich da ein Premium Forum haben.
Wolfgang hat mich seit langem, inspiriert. Ich gebe zu, ich bin nicht so gut wie Wolfgang. Bin noch Anfänger, aber ich gebe mein Bestes.
Das hier war bis jetzt die schwerste Arbeit für mich, fasziniert hat mich das durch Wolfgangs Lupenfunktion. Habe an diese Arbeit mindestens 6 Wochen gehangen immer Stück für Stück.
Dieses Script ist mit HTML und CSS aufgebaut und funktioniert auf "Eigene Seiten".
Habe dafür Bilder aus dem Internet benutzt. Ich habe selbst keine schönen Bilder, sonst hätte ich eigene Bilder dafür verwendet.
/*Legen Sie die Hintergrundeigenschaften für das Lupenglas fest:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = img.width * zoom + "px " + img.height * zoom + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2;
/*eine Funktion ausführen, wenn jemand die Lupe über das Bild bewegt:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier);
/*und auch für Touchscreens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*Verhindern Sie andere Aktionen, die beim Bewegen über das Bild auftreten können*/ e.preventDefault(); /*Holen Sie sich die x- und y-Positionen des Cursors:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*verhindern, dass das Lupenglas außerhalb des Bildes positioniert wird:*/ if (x > img.width - w / zoom) {x = img.width - w / zoom;} if (x < w / zoom) {x = w / zoom;} if (y > img.height - h / zoom) {y = img.height - h / zoom;} if (y < h / zoom) {y = h / zoom;} /*Stellen Sie die Position des Lupenglases ein:*/ glass.style.left = x - w + "px"; glass.style.top = y - h + "px"; /*zeigen, was die Lupe "sieht":*/ glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px"; }
function getCursorPos(e) { var a,x = 0,y = 0; e = e || window.event; /*Holen Sie sich die x- und y-Positionen des Bildes:*/ a = img.getBoundingClientRect(); /*Berechnen Sie die x- und y-Koordinaten des Cursors relativ zum Bild:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*Betrachten Sie das Scrollen einer Seite:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return { x: x, y: y }; } }
Foren Spende
Direkt zu PayPal
Thema drucken
23.07.2022 20:11
Antworten
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps
»
Einfache Light Box Bilder Gallerie
