Zoom-Script (Lupenfunktion) einbinden.

[StephanP]

Hallo zusammen,

habe hier ein Script entdeckt, welches ich gerne in meine Seite übernehmen möchte. Leider fehlt mir ein Ansatz, wie ich dabei vorgehen soll.
Das Script einbinden ist nicht das Problem - wie man allerdings die Bilder über Contao mit dem "rel" attribut, welches das Script benötigt um zu funktionieren, versieht, lässt mich verzweifen.

Bin für jeden Denkanstoß, oder auch "Lösung" dankbar!

[webster]

Hallo Stephan,

gehe im Backend in den Template-Editor, erzeuge ein neues Template für ce_image.(tpl|html5|xhtml) und trage im dort vorhandenen <img> -Tag den benötigten Wert ein. Das sollte es dann auch schon gewesen sein.

[Andreas]

Du kannst auch versuchen das REL mit MooTools auf die Links zu setzen. Das Script dann am besten danach erst einbinden.
moo_CloudZoom Template:

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

$$('#myGallery img').set('rel', 'adjustX: 10, adjustY:-4');

});
/* ]]> */
</script>

[StephanP]

Hallo webster,

Hallo Stephan,

gehe im Backend in den Template-Editor, erzeuge ein neues Template für ce_image.(tpl|html5|xhtml) und trage im dort vorhandenen <img> -Tag den benötigten Wert ein. Das sollte es dann auch schon gewesen sein.

Das Template ce_image.html5 ist bearbeitet - allerdings fehlt mir nun der Verweis auf die Bildddatei, die vergrößert werden soll. Es soll zudem ja nicht jedes Bild, welches eingebunden wird, mit dem rel Attribut ausgestattet werden, sondern nur die, die die .class "cloud-zoom" zugewiesen bekommen.

[StephanP]

Hallo Andreas,

Du kannst auch versuchen das REL mit MooTools auf die Links zu setzen. Das Script dann am besten danach erst einbinden.
moo_CloudZoom Template:

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

$$('#myGallery img').set('rel', 'adjustX: 10, adjustY:-4');

});
/* ]]> */
</script>

Zunächst einmal Danke für die gebotene Hilfe (auch an webster!) - Leider stehe ich auch bei bei diesem Lösungsansatz auf dem Schlauch. - Ein moo_CloudZoom Template wurde erstellt und eingebunden. , aber wie ist

$$('#myGallery img').

zu verstehen? Im Moment funtionert 'nur' die Ausgabe des Quelltextes mit dem Attribut, allerdings fehlt die Verlinkung zu dem "small-image".

[webster]

Hallo webster,



Das Template ce_image.html5 ist bearbeitet - allerdings fehlt mir nun der Verweis auf die Bildddatei, die vergrößert werden soll. Es soll zudem ja nicht jedes Bild, welches eingebunden wird, mit dem rel Attribut ausgestattet werden, sondern nur die, die die .class "cloud-zoom" zugewiesen bekommen.

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?><?php if(strpos($this->class, 'cloud-zoom') !== false): ?> rel="DAS-CLOUD-ZOOM-REL-ATTRIBUT"<?php endif; ?> title="<?php echo $this->title; ?>"<?php endif; ?>>

Das passende "Großbild" (also das Original) sollte Contao im <a>-Tag doch automatisch einbinden. Im <img>-Tag steht doch nur die source-Angabe für das von Contao verkleinerte Bild...

[Andreas]

...wie ist

$$('#myGallery img').

zu verstehen? Im Moment funtionert 'nur' die Ausgabe des Quelltextes mit dem Attribut, allerdings fehlt die Verlinkung zu dem "small-image".

http://mootools.net/docs/core/Elemen...Window:dollars
Das ist im Allgemeinen so zu verstehen, dass du die für JS benötigten Attribute auch mit JS aufsetzen kannst, ohne JS brauchst du sie ja auch nicht. In dem Beispiel mit MooTools - '#myGallery img' ist ein CSS Selektor. Es ist aber etwas seltsam mit diesem Script, da die Instanziierung bereits in der Klasse erfolgt (oben im Code), üblich ist, dass die Klasse geladen wird und du dann entscheidest wo und wann du die Klasse auf welches Element aufsetzt. Außerdem wirkt es etwas fremd auf mich, dass die Optionen in ein Attribut eines HTML-Elements geschrieben werden, normalerweise gibt man die Optionen ja beim Instaziieren mit an.

Vielleicht reicht dir ja auch diese Zoom-Gallery http://www.php-help.ro/mootools-12-j...pt-image-zoom/, dann kannst du dir auch jquery sparen (ich meine, die war auch mal in Isotope drin).

Oder die hier mit jquery http://www.mind-projects.it/projects...x.php#examples, die ist wesentlich einfacher aufzusetzen.

[SCSA91]

Irgendwie kann ich den Link nicht öffnen. Geht das nur mir so, oder ist da ein Fehler drin. Falls es nur bei mir nicht geht, kann mir den Link vielleicht mal jemand ausschreiben? Würd den gerne mal öffnen und mir das mal anschauen und vielleicht auch runter laden. Danke schön

[Andreas]

Rechte Maustaste auf Link und Adresse kopieren, der ist ausgeschrieben. Aber ich kann die Seite momentan auch nicht öffnen, heute mittag ging es noch. mind-projects.it scheint momentan down zu sein.

[StephanP]

Vielen Dank! Die ZoomIt Lösung war es dann letztendlich .

1000x Dank!