Ich probiere Elevate Zoom aus und habe ein kleines Problem, bei dem ich Hilfe brauche.
Im Grunde, wie Sie aus der DEMO sehen werden, die ich eingerichtet habe, versuche ich herauszufinden, ob es eine Möglichkeit gibt, das neu zu initialisieren Klicken Sie auf ein Thumbnail oder setzen Sie die Daten zurück, so dass das Zoomfenster für höhere Bilder (das Foto des Towers) nicht die Dimension des ersten Bildes verwendet. (was ich aus dem erfahre, was ich herausfinden kann, ist).
Leider habe ich nicht die Macht, die Leute, die dieses Format verwenden, dazu zu bringen, ihre Bilder richtig zu formatieren, daher ist es notwendig, unterschiedliche Höhen an Bildern zu berücksichtigen. Kann es gemacht werden?
Mein Code, basierend auf der Demo-Datei für den Moment
%Vor%Die jQuery
%Vor%Randnotiz
Sie werden vielleicht bemerkt haben, dass ich alle Verweise auf die Bilder auf den großen Dateipfad gesetzt habe. Dies liegt daran, dass der Benutzer, wie ich dieses Plugin verwenden möchte, nur eine Datei mit mittlerer Auflösung hochlädt.
Nicht sicher, ob Sie danach gefragt haben, aber eine einfache Lösung zum Entfernen des Zooms besteht darin, die Elementdaten elevateZoom für das Hauptbild zu entfernen und .zoomContainer -Elemente zu zerstören. Nach dem Aktualisieren der Zoom-Bildelementdaten können Sie elementZoom erneut instanziieren. Wenn Sie jedoch die gleiche Bildhöhe für zoomContainer-Bilder beibehalten möchten, sollten Sie in Betracht ziehen, serverseitige Bildgrößenanpassung zu verwenden und sie zu rendern.
Hier ist eine Lösung, die ich mir ausgedacht habe:
%Vor%P.S. Da Sie die Verwendung des Click-Ereignisses vorgeschlagen haben, können Sie sehen, dass ich die Galeriefunktion von elavateZoom entfernt habe, weil sie praktisch dasselbe tut, wenn sie nicht zusammen mit fancybox verwendet wird.
Wenn ich das Problem einfach verstehe: Breite und Höhe im Zoombereich dürfen sich nach dem Klick auf kleine Bilder nicht ändern. Wenn ja,
%Vor%funktionierte für mich - Bild im Zoombereich behält Dimensionen bei, wie ich für # zoom_03 im Stylesheet eingestellt habe.
Ich habe eine schöne Lösung gefunden! Fügen Sie diese Option zu Ihrer Konfiguration hinzu: constrainType: 'width'
Irgendwann funktioniert setInteval nicht. Also ändere ich den Code basierend auf @ Gábor. Das hat für mich funktioniert.
$("#gallery_01 a").click(function() {
$(#zoom_03).on("load",function() {
var height = $("#zoom_03").css("height");
$(".zoomContainer").css("height", height);
$(".zoomContainer .zoomWindow").css("height", height);
});
});
Für diejenigen, die # zoom_03 oder etwas ähnliches verwenden
Bildgröße der Ausgabe kann eingeschränkt werden, nachdem die Galerie mit dem folgenden Code angeklickt wurde .
VON ElevateZoom offizielle Dokumentation: Bildeinschränkung
Tags und Links jquery