Java Script hover image click

[Herzog]

Bei der Artikeldetailansicht können sich unter dem Hauptbild mini Bilder mit verschiedenen Ansichten des Artikels befinden. Diese werden erst durch ein klick ins Hauptbild gezogen.

Ich möchte dies aber durch ein Mouseover ersetzen. Jemand ne Ahnung? Ich kann nur php und kein Java, was ich bis jetzt herausgefunden habe ist, dass hier:

$("a.fancybox").fancybox({     
'showCloseButton': false }).hover(function() {     
$(this).click();     $(".fancybox-overlay").mouseout(function() {         
$.fancybox.close();     
});
 });​

Ich weiß aber komplett nicht was ich damit anfangen soll.

 

[john_the_bad]

AW: Java Script hover image click

Keine Ahnung ob das der richtige Schnipsel ist für das was du suchst, aber du kannst mal das .click() gegen ein hover tauschen und schauen was passiert..

 

[Herzog]

AW: Java Script hover image click

Danke, ne hat leider nicht geklappt. Leider weiß ich auch nicht wo ich die Zeilen einfügen soll, denn die sind nicht im Code. Ich habe mir die Zeilen aus dem Netz gesucht.

 

[Afox]

AW: Java Script hover image click

Hallo zusammen,

gibt es für dieses Problem mittlerweile eine Lösung?

Wenn ich es richtig verstanden habe, möchtest du, dass das Bild bei mouseover auf das wechselt, wo der Cursor drauf ist. Das wäre auch für mich interessant.

Außerdem habe ich noch ein weiteres Problem: klicke ich z.B. auf das zweite Minibild, so vergrößert sich immer das erste Bild, nicht aber das zweite (was eigentlich logischer wäre). Ist das bei Euch auch so?

LG & frohe Ostern,

Afox

 

[Afox]

AW: Java Script hover image click

Ergänzung:

Folgender Schnipsel ist in der artikel_inc.tpl zu finden:

      {if $Artikel->Bilder|@count > 1}
         <div class="article_images">
         {foreach name=article_image from=$Artikel->Bilder item=oBild}
            <a href="{$oBild->cPfadGross}" class="fancy-gallery {if $Einstellungen.template.articledetails.image_zoom_method == 'Z' || $Einstellungen.template.articledetails.image_zoom_method == 'ZL'}cloud-zoom-gallery{/if}" title="" rel="useZoom: 'zoom1', smallImage: '{$oBild->cPfadNormal}'">
               <img src="{$oBild->cPfadMini}" {if $smarty.foreach.article_image.index == 0}class="active"{/if} alt="" />
            </a>
         {/foreach}
         </div>
      {/if}

hier könnte sich evtl. ein Hinweis auf die Funktionen verbergen.

 

[wawi-dl]

AW: Java Script hover image click

Diese Seite schon gesehen?

Suche auch gerade diesen Hack, werde das mal umsetzen ...

Star Plugins: jQuery Image Zoom, jQuery Plugins

 

[3po]

AW: Java Script hover image click

Das mit dem mouseover ist recht simple, aber wie bei allen Änderungen an core files nicht update sicher. Die datei "cloud-zoom.1.0.2.js" muss bei jedem update wieder eingespielt werden.

In Zeile 405

$(this).bind('[B]click[/B]', $(this), function (event) {

das click gegen ein mouseenter tauschen

$(this).bind('[B]mouseenter[/B]', $(this), function (event) {

Ich spiele ebenfalls mit dem gedanken, die neuste version von Cloudzoom (Star Plugins) zu integrieren, da diese optisch ansprechender, aber vor allem touchpad kompatibel ist. Hat dies jemand bereits gemacht, wie groß ist der aufwand und läuft danach alles, auch die varkombis und das image popup?

 

[deepblue]

AW: Java Script hover image click

@ wawi-dl

Eine wirklich schöne Beispielseite! =)

 

[wawi-dl]

AW: Java Script hover image click

Es geht um CloudZoom, nicht um die Bilder

 

[3po]

AW: Java Script hover image click

Wir haben auch MagicZoom Plus mal in Magento integriert, ist ebenfalls ein super Tool. Leider gibt es hierzu kein Plugin für den JTL Shop, jedoch habe ich es schon mal in einem JTL-Shop gesehen.
Magic Zoom Plus : 2 zooms in 1