MODUL: Thickbox animiert

[noRiddle (revilonetz)]

Ich danke dir.

Gruß,
noRiddle

[MW]

Hallo noRiddle,

hast du einen Tipp wie ich deine sexy Thickbox Animation in Verbindung mit "MODUL: Cloud Zoom als Alternative zu MagicZoom" ans laufen bekomme, stehe da grad auf dem Schlauch. 

Hab ein paar Kombinationen versucht aber es will nicht. Problem, die class "thickbox" kommt ja so nicht mehr vor bei Einsatz des Cloud Zoom Moduls?!

Hier mal der Code aus der product_info_v1.html den ich nutze:

Code: PHP  [Auswählen]

{if $PRODUCTS_IMAGE!=''}

                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"original_images"}" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth: 350, zoomHeight:350" style="position: relative; display: block;"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" id="{$PRODUCTS_IMAGE|replace:"info_images":"original_images"}" /></a>
{/if}
<!--<div id="cloud-zoom-hint"><br />Bewegen Sie die Maus &uuml;ber das Bild<br />um es zu vergr&ouml;&szlig;ern.<br /><br /></div>-->
{if $more_images|@count > 0}
<!--Weitere Produktbilder-->
<div class="morepics">
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"original_images"}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{$PRODUCTS_IMAGE}' " style="position: relative; display: block;"><img src="{$PRODUCTS_IMAGE|replace:"info_images":"thumbnail_images"}" alt="{$PRODUCTS_NAME} - 1" id="{$RODUCTS_IMAGE|replace:"info_images":"original_images"}" /></a>
<!-- More Pictures -->
{foreach item=more_images_data from=$more_images}
<a title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{$more_images_data.PRODUCTS_IMAGE}' " style="position: relative; display: block;"><img src="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"thumbnail_images"}" id="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}" /></a>
{/foreach}
</div>
<div style="clear:both;"></div>
{/if}

Wo und wie baue ich da dein data attribut richtig ein ohne mir den cloud zoom effekt zu verhunzen, ich glaub ich sehe gerade den Wald vor lauter Bäumen nicht. 

Gruß
Michael

[noRiddle (revilonetz)]

Morgen.
Ich kenne den Code des "Cloud Zoom"-Moduls nicht, müsste ich mir erst anschauen (mom keine Zeit, sorry).
Insofern das Javascript des "Cloud Zoom"-Moduls nicht mit dem der Thickbox kollidiert, sollte es funktionieren.
Wenn du richtig gelesen hast weißt du, daß das data-Attribut das rel-Attribut ersetzen soll in der HTML5-Variante.
Wenn das hier

Code: XML  [Auswählen]

rel="useZoom: 'zoom1', smallImage: '{$PRODUCTS_IMAGE}'"

allerdings für das "Cloud-Zoom"-Modul wichtig ist, kannst du ohnehin kein HTML5 benutzen, insofern du validen Code haben möchtest und auch in Zukunft sicher sein willst, daß es in allen Browsern mit dem Code funktioniert.

Was die Klasse betrifft kannst du ja auch zwei Klassen vergeben, also so:

Code: XML  [Auswählen]

class="cloud-zoom thickbox"

Gruß,
noRiddle

[MW]

Moin,

Danke dir fürs darüber schauen, dachte mir schon das es irgendwie nicht passt.

[...]
Wenn du richtig gelesen hast weißt du, daß das data-Attribut das rel-Attribut ersetzen soll in der HTML5-Variante.
Wenn das hier

Code: XML  [Auswählen]

rel="useZoom: 'zoom1', smallImage: '{$PRODUCTS_IMAGE}'"

allerdings für das "Cloud-Zoom"-Modul wichtig ist, kannst du ohnehin kein HTML5 benutzen, insofern du validen Code haben möchtest und auch in Zukunft sicher sein willst, daß es in allen Browsern mit dem Code funktioniert.
[...]

Daran scheint es zu liegen, dann zickt Cloud Zoom rum 

Kein Problem, bin am überlegen ob ich nicht einfach auf Cloud Zoom verzichte und nur deine Thickbox nehme. 

Gruß
Michael

[BoRo]

Hallo zusammen,

ich habe gesehen, dass in Beitrag 1 im zweiten Bild der Revolution Slider von Codecanyon genannt ist. Gibt es ein Modul davon? Ich habe den Slider (als Wordpress und HTML Version) gekauft, schaffe es allerdings nicht, ihn in meinem Shop einzubauen. Habe leider auch nichts dazu gefunden und das Thema eigentlich (bis gerade eben ) auch schon wieder verworfen.

VG
BoRo

[noRiddle (revilonetz)]

Erstmal, Willkommen im modified-Forum.
Sich vorzustellen ist hier gerne gesehen .

Ich habe eine volle Implementation mit Admin-Interface für den genannten Slider.
Gibt's jedoch nur per PM (über mein Häuschen links).

Gruß,
noRiddle

*NACHTRAG*
Das ist aber nicht für den Revolution-Slider (wie kommst du darauf ?), sondern für den KenBurner.
Gibt's ein Live-Beispiel auf meinem Demo-Shop für...

[miamit]

Hallo,
danke für das Modul!

Habe es nach der Anleitung eingebunden und stand dann vor dem Problem, dass sich das Bild in einem neuen tab öffnete statt in der Box.

Folgendes zur Umgebung:
Im Ordner templates/..../javascript findet sich :
-jquery-1.3.2.js
-jquery-1.3.js
-jquery-ui.js
-jquery-ui-new.js
-jquery-new.js

Ich verwende einen Imageslider von Hetfield, einen Warenkorb-Slide-In und eine AutocompleteSuche.

Werden all diese Dateien benötigt? Denn in der general.js.php sind nur folgende inkludiert:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-1.3.2.js" type="text/javascript"></script>

Als erstes nach dem lesen der Beiträge habe ich dann den von dir bereitgstellten JS-Code in der general.js.php ganz ans Ende gesetzt, weil, wie du sagtest, erst die Library geladen werden muss.

Danach erste Verbesserung: Beim Klicken auf ein Bilder (products_info_v1) verdunkelt sich die Seite, und der Ladebalken erscheint. Aber kein Bild. Beim Schließen blieb der overlay-div bestehen, sodass nicht weiter gesurft werden konnte.

Habe dann in der general.js.css aus statt 1.3.2.js -> 1.3.2.min.js inkludiert.

Änderungen hochgeladen und schwuppsdiwupps erscheint beim Anklicken sogar die Thickbox, allerdings

-mit der oberen linken Ecke zentriert am Bildschirmmittelpunkt
-lässt sich nicht wegklicken, Schwarze Abdunklung verschwindet, box selbst nicht

Dies ist auch der aktuelle Stand.

Darauf hin habe ich einfach mal den Versuch gewagt, mir diese Datei hier runterzuladen http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js , damit die vorhandene jquery-1.3.2.min.js ersetzt und entsprechend in der general.js.php aus 1.3.2.min.js -> 1.8.2.min.js gemacht.
Brachte keine Verbesserung, stattdessen machte sogar der Warenkorb Ärger.

Kannst du nochmal kurz einen Überblick geben, welche JQuery-Dateien wie eingebunden werden müssen, oder woran es evtl. noch liegen könnte?

Gruß

miamit

[noRiddle (revilonetz)]

Ohne URL um sich das anzuschauen ist Hilfe eher  .

Was mir allerdings auffällt an deinem Code-Auszug:
Warum hast du zweimal die jQuery-Basisbiliothek eingebunden ?
jquery.js und
jquery-1.8.2.js (vorher jquery-1.3.2.js)
Das kann so nicht gutgehen.

Gruß,
noRiddle

[miamit]

Okay,
habe alle Einbindungen von lokalen jquery und jquery-ui's rausgelöscht und stattdessen via Google eingebunden:

Code: PHP  [Auswählen]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

[miamit]

Okay, hatte noch einen Wert in den Konfigurationsbereichen vergessen zu löschen, da nicht ausgefüllt.

Jetzt klappt es soweit, bis auf:

Beim Klick auf den Pfeil für nächstes oder vorheriges Bild verschwindet die Box, das Schatten-Overlay bleibt bestehen und nix passiert. Beim Klick auf das Schatten-Overlay verschwindet zwar der Schatten, aber man kann auf der Webseite nix mehr anklicken.

Das Öffnen und Schließen einzelner Bilder ohne Verwendung der Pfeil-Buttons klappt hingegen super.

Die URL möchte ich hier ungern einstellen, da der Shop noch nicht im Betrieb und damit rechtssicher ist

[noRiddle (revilonetz)]

Tja, was soll ich dazu sagen ?
Wenn ich's mir nicht anschauen kann kann ich ja nur  .

Das Modul funktioniert jedenfalls einwandfrei bei korrekter Implementation.

Gruß,
noRiddle

[miamit]

Bezogen auf die 1.06er?
Verwende noch die 1.05er Version.

Link zum Shop:

http://pipnee.com/P1A25366F

[noRiddle (revilonetz)]

Habe gerade keine Zeit/Lust deine Seite zu anaylsieren,  sorry.
Jedenfalls ist es egal welche Shop-Version du hast, das "Thickbox animated"-Plugin läuft immer,
vorausgestzt es ist korrekt implemeniert.
Es kann allerdings sein, daß diverse Javascripts miteineander kolliedieren, und du hast da einiges implementiert.

Was mir aufällt auf die Schnelle ist, daß bei Aufruf eines Bildes in der prodcut_info der Weiterblättern-Pfeil erscheint auch da wo du keine weiteren Bilder implementiert hast...
... oder sehe ich die nur nicht..., hast du die versteckt ? ...

Gruß,
noRiddle

[miamit]

War auch nicht verlangt ; )

Den Pfeil sehe ich nicht, ich habe auch überall mehr als nur ein Bild implementiert. Die Bilder 2-X befinden sich unterhalb des Per-Mail-Empfehlen-Buttons.

Bin derweil schon so weit, dass ich bemerkt habe, dass der Pfeil next / prev in der Thickbox mit "www.meinedomain.de/#" verlinkt ist. Muss das so?

[noRiddle (revilonetz)]

Und wenn du einfach machst was ich sowohl in der Anleitung als auch in diesem Thread (hier sogar mehrfach) erwähnt habe ?,
nämlich die Zeitangaben im $(document).ready() -Aufruf nicht in Anführungszeichen zu schreiben ?
Geschieht dann ein Wunder und alles funktioniert ?

Ich frage ja nur...

Gruß,
noRiddle