Zoomfunktion funktioniert nicht richtig

andrea · 03. Dezember 2014 17:08

Hallo!

Ich habe folgendes Problem:
Ich habe auf der folgenden Seite ein Plugin verwendet, nämlich den elevatezoom. Im Großen und Ganzem funktioniert es, jedoch habe ich verschieden hohe Bilder und nun werden die hinteren Layer ebenfalls vergrößert wenn man mit der Maus über den leeren Bereich darüber fährt. Kann man da irgendwas machen damit diese nicht mehr gezoomt werden wenn sie eigentlich nicht angezeigt werden.

Danke im voraus.

NaN · 03. Dezember 2014 17:27

Hallo und willkommen im Forum!

Dein Link ist leider nicht öffentlich.
Man müsste das aber zumindest mal sehen, damit man dazu einen Tipp geben kann.
Ich kann Dir nämlich leider nicht ganz folgen:

jedoch habe ich verschieden hohe Bilder

Ok.

und nun werden die hinteren Layer ebenfalls vergrößert wenn man mit der Maus über den leeren Bereich darüber fährt.

Hä?
Welche hinteren Layer?
Welcher Bereich?
Ich muss das sehen.

andrea · 03. Dezember 2014 17:40

Tut mir leid hab die Zugangsdaten vergessen anzugeben.

Benutzername: editor
Passwort: kiska01

ich verwende einen Flexslider um Bilder auszugeben und wollte zusätzlich eine Zoomfunktion einbauen. Bis dahin funktioniert diese. Problem wie gesagt Bilder haben verschiedene Höhen und es werden Bilder gezoomt die im Hintergrund liegen.

NaN · 04. Dezember 2014 09:14

Erstmal etwas anderes (weil es mich gestört hat wink ):
Das <div> mit dem ImageCarousel im Header sollte die CSS-Eigenschaft overflow:hidden haben.
Sonst kommt das nächste Bild nämlich immer "von rechts angeflogen" und verursacht dabei kurzzeitig immer einen horizontalen Rollbalken:

Hier klicken, um den Code zum Kopieren zu markieren

#myCarousel {
    overflow:hidden;
}

Nun zum Zoom-Problem. Es wird immer das Bild gezoomt, welches sich unter dem Mauszeiger befindet und den Zoom-Effekt hat. Da der Flexslider die Bilder nur mit Hilfe von opacity ein- bzw. ausblendet und Du außerdem den Zoom-Effekt auf alle Bilder gleichermaßen anwendest, sind auch die unsichtaren Bilder eigentlich noch an exakt der gleichen Stelle und lösen immer noch den Zoom-Effekt aus. Denn das Zoom-Plugin interessiert sich leider nicht für die Sichtbarkeit des Bildes. D.h. sobald Du mit der Maus über den leeren Bereich unter einem kleineren Bild gehst, wird automatisch das nächstbeste Bild angezeigt, welches sich an dieser Stelle befindet und den Zoom-Effekt auslösen soll. So gesehen ist es logisch, dass ElevateZoom da dann nicht unterscheiden kann, welches Bild nun gerade nicht gezoomt werden soll.

Kenne den flexslider nicht, aber laut Doku bietet er eine Callback-Funktion namens "after":

after: function(){}, //Callback: function(slider) - Fires after each slider animation completes

Ich weiß jetzt nicht, was da alles an Argumenten übergeben wird, aber möglicherweise könnte man so den Zoom-Effekt der unsichtbaren Bilder ausschalten und nur auf das aktuelle Bild beschränken, oder aber einfach die ausgeblendeten Bilder mit display:none wirklich komplett für den Mauszeiger verschwinden lassen.

andrea · 04. Dezember 2014 09:56

Danke auf das hab ich nicht einmal geachtet, wollt erst einmal die Funktion richtig hinbekommen. smile

Hört sich nicht schlecht an, werde ich mal ausprobieren. Hoffe es klappt.

Danke! smile

Forum für CMS/made simple

#1 03. Dezember 2014 17:08

Zoomfunktion funktioniert nicht richtig

#2 03. Dezember 2014 17:27

Re: Zoomfunktion funktioniert nicht richtig

#3 03. Dezember 2014 17:40

Re: Zoomfunktion funktioniert nicht richtig

#4 04. Dezember 2014 09:14

Re: Zoomfunktion funktioniert nicht richtig

#5 04. Dezember 2014 09:56

Re: Zoomfunktion funktioniert nicht richtig

Fußzeile des Forums