Sie sind hier: Startseite » Web To Date » Tipps Alpha

PopBox unter Alpha einsetzen

Ich kann hier einfach nur sagen, wer Lightbox unter Web To Date einsetzt,
der hat die Funktionen von PopBox noch nicht gesehen.

Um was geht es eigentlich?


Kurz und bündig, es geht darum, Bilder, die auf der Website dargestellt werden,

durch einen Klick auf der Website in der Anzeige zu vergrößern und wieder zu verkleinern.


Wer hat das realisiert?

Georg Willemsen, Inhaber der Website Ge Wi Soft und ebenfalls User unseres beliebten Forums (war beliebt), hat sich die Mühe gemacht und für alle interessierten Usern die Möglichkeit geschaffen das Script des Anbieters von Popbox in Web To Date zu integrieren.

Auch wenn ich die untere Anleitung hauptsächlich unter dem Design Alpha getestet bzw. es unter Alpha einsetze, hat die Vergangenheit gezeigt, das die Codeschnipsel in vielen Designs verwendet werden können.
Probiert es also einfach aus bzw. vergleicht die Daten mit denen, die Ihr in Euer verwendeten Design vorfindet.

Wie gehe ich unter Alpha vor?

Ganz allgemein zum Anfang verschafft Ihr Euch erst mal einen Überblick und ladet die notwendigen Dateien bei Ge Wi Soft herunter.

Ihr ladet folgende Dateien in Euer Design/Designordner:

  • style_popup.css
  • PopBox.js
  • magminus.gif
  • magplus.gif
  • spinner40.gif

Manuell in den Ordner images

Per FTP in den Ordner image auf Euer Root.

image-Ordner

  • magminus.cur
  • magplus.cur

Abweichend bzw. Konform habe ich die Dateien wie folgt abgeändert.

Konform

Code

Konform global.ccml

<cc:picture obj="pic.spinner40" dst="sipnner40.gif" src="spinner40.gif">
<cc:picture obj="pic.magminus" dst="magminus.gif" src="magminus.gif">
<cc:picture obj="pic.magplus" dst="magplus.gif" src="magplus.gif">

<cc:asset src="popbox.js" dst="popbox.js" obj="popbox">
<cc:asset src="style_popup.css" dst="sp.css" obj="mystylepopup">

Code

Konform---navigation.ccml

<link rel="stylesheet" type="text/css" href="<cc:print value="&mystylepopup.url">" />

<script type="text/javascript" src="<cc:print value="&popbox.url">"></script>

<script type="text/javascript">
popBoxWaitImage.src = "/images/spinner40.gif";
popBoxRevertImage = "/images/magminus.gif";
popBoxPopImage = "/images/magplus.gif";
</script>

Abweichungen

Im unteren Teil habe ich die Codes eingefügt, die ich unter Alpha in den Dateien vorgenommen habe um die Bildvergrößerung für die einzelnen Absatztypen zu erreichen.

Code

paragraph_picture.ccml - Abweichung


<cc:if cond="&paragraph.picture.zoom.ispicture">
<cc:picture uid="&paragraph.picture.zoom.uid" obj="hugepic">
<img alt="" src="<cc:printpictureurl obj="bigpic_480">" pbsrc="<cc:printpictureurl obj="hugepic">" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Verkleinern anklicken" onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Code

paragraph_table.ccml - Abweichung für W2D 5


<cc:if cond="&mycol.picture.zoom.ispicture">
<cc:picture uid="&mycol.picture.zoom.uid" obj="hugepic"> <img alt="" src="<cc:printpictureurl obj="tablepic"
suffix="'cols'+&paragraph.table.colcount">" pbsrc="<cc:printpictureurl obj="hugepic">" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Verkleinern anklicken"
onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Code

paragraph_table.ccml - Abweichung für W2D 6


<cc:if cond="&mycol.picture.zoom.ispicture">
<cc:picture uid="&mycol.picture.zoom.uid" obj="hugepic"> <img alt="" src="<cc:printpictureurl xhtml="1" obj="tablepic"
suffix="'table'+&mycol.width">" pbsrc="<cc:printpictureurl obj="hugepic">" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Verkleinern anklicken"
onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Code

page.ccml - Bilder - Textabsatz - Abweichung für W2D 5


<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<img alt="" src="<cc:printpictureurl obj="parapic_200">" pbsrc="<cc:printpictureurl obj="hugepic">"
pbCaption="" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Kleinern anklicken" onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Code

page.ccml - Bilder - Textabsatz - Abweichung für W2D 6


<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<img alt="" src="<cc:printpictureurl obj="parapic_200">" pbsrc="<cc:printpictureurl xhtml="1" obj="hugepic">"
pbCaption="" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Kleinern anklicken" onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Anhang-Anpassungen für weitere Optionen


Hier findet Ihr noch die Anpassungen, damit Ihr PopBox für weitere Absatz-Typen bzw. Optionen verwenden könnt.

1. Anpassungen für die Sidebar/Kontextspalte


Um die Bilder in der Sidebar/Kontextspalte ebenfalls mit PopBox vergrößern zu können, sind etwas umfangreichere Arbeiten notwendig.

Die sidebar_picture.ccml die dafür zuständig ist, befindet sich standard mäßig unter Web To Date im Ordner common.

Damit die anstehenden Änderungen nicht für alle Designs in Zukunft zutreffen, ist es angebracht immer nur das jeweilige Design an zu passen.

Damit das erreicht wird, verbringt Ihr(kopieren) eine Kopie der sidebar_picture.ccml in das von Euch verwendete Design.

Jetzt muß diese Datei noch für das verwendete Design angemeldet werden!

Dazu öffnet Ihr in Eurem Design die config.ccml und ändert folgende Zeile:


<cc:file obj="sidebar.picture" src="sidebar_picture.ccml" common="1">

in:


<cc:file obj="sidebar.picture" src="sidebar_picture.ccml" common="0">

um. Beachte die 0!

Die Änderungen in der eigentlichen sidebar_picture.ccml sehen dann wie folgt aus:

Code

Alter Code

<cc:if cond="&paragraph.picture.zoom.ispicture">
<cc:picture uid="&paragraph.picture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">" target="_blank"><cc:printpicture obj="bigpic_sbp"></a>
</cc:if>

Code

Neuer Code

<cc:if cond="&paragraph.picture.zoom.ispicture">
<cc:picture uid="&paragraph.picture.zoom.uid" obj="hugepic">
<img alt="" src="<cc:printpictureurl obj="bigpic_sbp">" pbsrc="<cc:printpictureurl obj="hugepic">" class="PopBoxImageSmall" title="Zum Vergr&ouml;&szlig;ern/Verkleinern anklicken" onclick="Pop(this,50,'PopBoxImageLarge');" />
</cc:if>

Leider:

Trotz aller Bemühungen, die bisher getroffen worden sind, gibt es bisher keinen Weg, den angezeigten einen Validierungsfehler abzustellen.

Viel Spass mit dem Script und dessen Anwendung.

Wenn wider erwarten Fragen auftreten sollten, dann wendet Euch hierher.

Zugriffe heute: 1 - gesamt: 5346.