smoothGallery Integration in phpwcms CP: "Bilder spezial"

If you have created additional (non official) documentation or tutorials or something like that please post this here
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

smoothGallery Integration in phpwcms CP: "Bilder spezial"

Post by pepe »

Damit es nicht innerhalb eines anderen Threads untergeht, hier noch einmal an der richtigen "Sammelstelle"

Fotos zum Leben erwecken und die eigene Site interessanter zu gestalten, darum geht es manchem Webmaster, der auf der Suche nach geeigneten Sripts ist, die die Funktionalität von phpwcms erweitern, wenn es um die Darstellung von Bildern geht.

Ich hab's jetzt "einigermassen" hin bekommen, mit meiner smoothGallery
http://webdesign-dp.de/pepes-sandbox/in ... othgallery
und "eine Nummer" grösser hier:
http://webdesign-dp.de/pepes-sandbox/su ... l-hm.phtml

Deshalb für die NewBees von phpwcms hier eine ganz kurze Beschreibung, wie man es angehen kann!


Zur Realisierung der SmoothGallery habe ich mir das Scriptpaket hier besorgt:
http://smoothgallery.jondesign.net/what/

Im Downloadbereich hatte ich mich für diese Version entschieden:
Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und diese Datei hier heruntergeladen: SmoothGallery-2.0.zip
http://smoothgallery.jondesign.net/mint ... ry-2.0.zip


Wo ich die Dateien abgelegt habe, ist aus dem nachfolgenden Script zu ersehen.

Den img-Ordner mit allen Background-Images und Icons habe ich unterhalb des css-Ordners abgelegt:
...../template/inc_js/smoothgallery/css/img/

Das Template ist abzulegen als: pepes-smoothgallery.tmpl
Innerhalb der Dateistruktur von phpwcms: ...../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl

Damit sollte auch der weniger geübte phpwcms-User schon klar kommen.

---------------------------------------------------------------

Im CP BILDER SPEZIAL sind nun:

- die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile zufügen wenn gewünscht = Bildtitel
- Template auswählen: pepes-smoothgallery.tmpl
- Die Abmessungen der Bilder des Sliders eintragen (bei mir sind das 100x75px und 538x300px )


Es kann Effekt 1 bis Effekt 3 verwendet werden:

Effekt 1: Aktivierung der Autostartfunktion des Sliders
Effekt 2: Copyrightvermerk mit Link als Untertitel des Sliders
Effekt 3: Erweiterte Anzeige hinter den Copyright... je nach eigenen Vorstellungen (RTs von phpwcms sind verwendbar!!!)


Zusätzliche Möglichkeiten:

- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten...
- Am Ende des Templates ggf. einige Einstellungen und damit die Funktionalität der smoothGallery anpassen


Wenn jemand mal weiter machen will, hier mein Template... gleich mit der "Kurzbeschreibung" dabei.
So hat man alles in einem "Fenster", deshalb den ! kompletten ! Inhalt speichern unter:

...../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl

Code: Select all

Zur Realisierung der SmoothGallery habe ich mir das Scriptpaket hier besorgt:
http://smoothgallery.jondesign.net/what/

Im Downloadbereich hatte ich mich für diese Version entschieden:
Using Mootools 1.11 ? 
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und diese Datei hier heruntergeladen: SmoothGallery-2.0.zip
http://smoothgallery.jondesign.net/mint/pepper/tillkruess/downloads/tracker.php?uri=http%3A//smoothgallery.jondesign.net/files/SmoothGallery-2.0.zip


Wo ich die Dateien abgelegt habe, ist aus dem nachfolgenden Script zu ersehen.

Den img-Ordner mit allen Background-Images und Icons habe ich unterhalb des css-Ordners abgelegt:
...../template/inc_js/smoothgallery/css/img/

Dieses Template hier ist abzulegen als: pepes-smoothgallery.tmpl
Innerhalb der Dateistruktur von phpwcms: ...../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl

Damit sollte auch der weniger geübte phpwcms-User schon klar kommen.

--------------------------------------------------------------------

Im CP BILDER SPEZIAL sind nun:

- die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile zufügen wenn gewünscht = Bildtitel
- Template auswählen: pepes-smoothgallery.tmpl
- Die Abmessungen der Bilder des Sliders eintragen (bei mir sind das 100x75px und 538x300px )


Es kann Effekt 1 bis Effekt 3 verwendet werden
----------------------------------------------

Effekt 1: Aktivierung der Autostartfunktion des Sliders
Effekt 2: Copyrightvermerk mit Link als Untertitel des Sliders
Effekt 3: Erweiterte Anzeige hinter den Copyright... je nach eigenen Vorstellungen (RTs von phpwcms sind verwendbar!!!)


Zusätzliche Möglichkeiten:

- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten...
- Am Ende des Templates ggf. einige Einstellungen und damit die Funktionalität der smoothGallery anpassen



<!--IMAGES_HEADER_START//-->

<!-- START :: pepes-smoothgallery.tmpl ========== ========== ========== -->

<div id="pepes-smoothGallery">

   [TITLE]<h3>{TITLE}</h3>[/TITLE][SUBTITLE]
   <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
   {TEXT}[br][/TEXT]

   <div style="display:block;" class="jdGallery withArrows" id="myGallery">
<!--IMAGES_HEADER_END//-->

         <!-- Alternative Eintragungen für den Image-Link unterhalb von <p>...</p> -->
         <a href="#" title="open image" class="open"></a>
         <a href="{IMAGE_ABS}" title="open image" class="open"><img src="{IMAGE_ABS}" alt="[CAPTION]{CAPTION}[/CAPTION]" border="0" /></a>

<!--IMAGES_ENTRY_START//-->
      [ZOOM]<div class="imageElement">
         <h3>[CAPTION]{CAPTION}[/CAPTION]</h3>
         <p>[EFFECT_2][http://phpwcms-templates.de (c) 2009 by pepe][/EFFECT_2][EFFECT_3] || {CATEGORY} | {TITLE}[/EFFECT_3]</p>
         <a href="#" title="open image" class="open"></a>
         <img src="{IMAGE_ABS}" class="full" alt="" />
         <img src="{THUMB_ABS}" class="thumbnail" alt="" />[/ZOOM][ZOOM_ELSE][IMAGE_URL]<a href="{IMAGE_ABS}">[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" class="full" border="0" />[IMAGE_URL]</a>[/IMAGE_URL][/ZOOM_ELSE]
      </div><!-- //imageElement -->
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->

<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->

<!--IMAGES_FOOTER_START//-->
    </div><!-- //myGallery -->

</div><!-- //pepes-smoothGallery -->

<!-- STOP :: pepes-smoothgallery.tmpl ========== ========== ========== -->
[PHP]
// Einbinden der zugeordneten CSS-Datei in den HTML-Head des Templates
$GLOBALS['block']['css']['slideshow.css'] 						= 'specific/jd.gallery.css';

// Einbinden der JavaScipt-Dateien in den HTML-Head des Templates
// $GLOBALS['block']['custom_htmlhead']['mootools.js'] 	          = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery0.mootools.js'] = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery1.js']          = '  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery2.js']          = '  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery3.css']         = '  <link href="'.TEMPLATE_PATH.'inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" />'.LF;

$GLOBALS['block']['custom_htmlhead']['smoothgallery.script']       = '  <script type="text/javascript">
  // <![CDATA[
  function startGallery() {
     var myGallery = new gallery($(\'myGallery\'), { 
        [EFFECT_1]timed: true,                         // true = Slider laeuft automatisch, wenn Effekt 1 aktiviert ist [/EFFECT_1]
        defaultTransition: \'fadeslideleft\',  // Bewegungsrichtung des Sliders
        embedLinks: false,                   // true = Link aktivieren

    /* Mit nachfolgenden Einstellungen, kann die smoothGallery funktional angepasst werden. Bei Wertegleichheit kann die Zeile auch entfallen */

        fadeDuration: 500,                   //  500 = Ueberblenddauer in Millisekunden
        delay: 6500,                         // 9000 = Zykluszeit pro Bild in Millisekunden

        showArrows: true,                    // true = Pfeile anzeigen und aktivieren fuer vor und zurueck
        showCarousel: true,                  // true = Thunbnail-Auswahl anzeigen
        showInfopane: true,                  // true = Informations-Panel anzeigen

        preloader: true,                     // true = Preload aktivieren
        preloaderImage: true,                // true = Funktionsanzeige wenn Preload erfolgt
        preloaderErrorImage: true            // true = Preload-Fehler beim Preload anzeigen
     });
  }
  window.onDomReady(startGallery);
  // ]]>
  </script>'.LF;
[/PHP]
<!--IMAGES_FOOTER_END//-->
Das ist absolut genau das Template, welches ich auf meiner Seite verwendet habe.
Also deshalb keine Aufregung beim Testen... es geht wirklich! :wink:

Und wenn OG auf mootools 1.2 umgestellt hat, dann ändern wir einfach wieder...
Last edited by pepe on Sun 17. Jan 2010, 20:27, edited 4 times in total.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: smoothGallery Integration in phpwcms

Post by Oliver Georgi »

raus damit!

Code: Select all

$GLOBALS['block']['custom_htmlhead']['smoothgallery0.mootools.js'] = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';
Immer zuerst aufrufen:

Code: Select all

initMootools();
Dann wird die 1.11er MooTools Version automatisch geladen!
Nie am System vorbei aufrufen, sonst kann passieren, dass die MooTools doppelt geladen werden.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

Grundsätzlich war das auch mein Ziel, denn sonst hätte ich die neueste Version mit mootools 1.2 verwendet.
Mit der vorhandenen, in phpwcms (r307) integrierten mootools-Version hatte es aber bei mir NICHT geklappt.

Dabei steht dann das im Quellcode:

Code: Select all

  <script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>

  <script src="template/inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>
  <script src="template/inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
  <link href="template/inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" />
Sieh selber mal, was dann passiert, ich habe es momentan zur Kontrolle aktiviert:
http://webdesign-dp.de/pepes-sandbox/in ... othgallery

Aber ich werde es gleich noch mal testen... wenn du mir sagst, an welcher Stelle GENAU im code das

Code: Select all

initMootools();
hinkommen muss und was der GENAU bewirkt.

Vielleicht hab ich mich ja nur "natur dumm" angestellt... oder bin blind 8)
hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: smoothGallery Integration in phpwcms

Post by hausmeister »

hi pepe,

habe hier was gefunden wo der aufruf stattfindet.

http://www.phpwcms-howto.de/wiki/doku.p ... ad-bereich

i only understand railwaystation ;)

der hausmeister
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

Wenn du mal in das Template für die smoothGallery siehst, wirst du finden, dass ich das genau so auch gemacht habe! (Du siehst sogar... mein 1. "fast richtiger" Versuch ist auskommentiert noch vorhanden!)

Code: Select all

...
// Einbinden der JavaScipt-Dateien in den HTML-Head des Templates

// $GLOBALS['block']['custom_htmlhead']['mootools.js']              = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';

$GLOBALS['block']['custom_htmlhead']['smoothgallery0.mootools.js'] = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';
...
Problem ist nur, wenn ich die Integrierten mootools.js anspreche,

Code: Select all

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
die ja in der Version 1.11 in phpwcms schon "Dateimässig" vorhanden sind... dann sieht das Baby aus wie hier: http://webdesign-dp.de/pepes-sandbox/in ... othgallery


Binde ich es aber mit der mootools-Datei aus dem Musterpaket mootools.v1.11.js ein,

Code: Select all

<script src="template/inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>
dann funktioniert es so:
http://webdesign-dp.de/pepes-sandbox/in ... othgallery


Unabhängig von GRÖSSE und BILDERN... der Unterschied fällt sofort ins Auge, oder? Mmmhhh :roll: :?:
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: smoothGallery Integration in phpwcms

Post by Oliver Georgi »

dann halt so:
$GLOBALS['block']['custom_htmlhead']['mootools.js'] = LF.' <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';

Grundsätzlich würde ich das aber alles in ein frontend_render Script überführen, mehr Kontrolle.

Inline PHP ist langsam und nicht empfohlen.

Ach ja - es gibt auch die Möglichkeit, die mootools.v1.11.js in mootools.js umzubenennen. Die bei der Gallery mitgelieferte Version hat sicher noch zusätzliches JS enthalten.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

Leider klappt das so NICHT... denn diese Anweisung kommt NICHT durch, es bleibt das Original erhalten!

Das habe ich jetzt mal versuchsweise so eingebunden, mit Kommentar am Ende der Zeile:

Code: Select all

$GLOBALS['block']['custom_htmlhead']['mootools.js']        = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script> <!-- Vorschlag OG -->';
$GLOBALS['block']['custom_htmlhead']['smoothgallery1.js']  = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script> <!-- MP -->';
$GLOBALS['block']['custom_htmlhead']['smoothgallery2.js']  = '  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script> <!-- MP -->';
$GLOBALS['block']['custom_htmlhead']['smoothgallery3.css'] = '  <link href="'.TEMPLATE_PATH.'inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" /> <!-- MP -->';
Und das wird "weitergegeben":

Code: Select all

  <script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>

  <script src="template/inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script> <!-- MP -->
  <script src="template/inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script> <!-- MP -->
  <link href="template/inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" /> <!-- MP -->
An dem fehlenen Kommentareintrag in der entsprechenden Zeile kann man erkennen...
das wird garnicht erst durch gelassen, da eine Variable dieses Namens schon vorhanden ist???

Oder es wir anschließend von phpwcms wieder überschrieben... je nach Bearbeitungsreihenfolge beim Rendern.
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

Oliver Georgi wrote:...
Grundsätzlich würde ich das aber alles in ein frontend_render Script überführen, mehr Kontrolle.

Inline PHP ist langsam und nicht empfohlen.
Das habe ich noch nicht gemacht... muss ich mir noch mal ansehen ;-)
Wird dann aber nicht der code IMMER eingebunden.... Mhhh, wahrscheinlich muß ich dann ein RT dafür "schreiben" ?
...
Ach ja - es gibt auch die Möglichkeit, die mootools.v1.11.js in mootools.js umzubenennen. Die bei der Gallery mitgelieferte Version hat sicher noch zusätzliches JS enthalten.
Das war meine erste Idee...
Ich weiss nur nicht, ob dann alle anderen Elemente da sind, die in phpwcms benötigt werden?
Das wollte ich lieber "jeden selber entscheiden lassen", da ich mir selber nicht sicher war, ob das so ist !?
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: smoothGallery Integration in phpwcms

Post by flip-flop »

Wenn du aus einem bestimmten CP heraus arbeitest, kannst du auch ein /frontend_init/ Script verwenden. Stichwort CP-trigger im wiki.

Mit dem aktuellen mootools-Set (1.1.1) von OG sollte das eigentlich klappen, das ist doch komplett soweit ich weiß.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: smoothGallery Integration in phpwcms

Post by hausmeister »

hallo pepe,

gibt es zu diesem thema schon eine abschließende lösung?

der hausmeister
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

JEIN...
ich habe es jetzt kurzerhand so gemacht, dass ich die Datei mootools.v1.11.js einfach in mootools.js umbenannt habe.
Der Aufruf innerhalb des Templates habe ich dann entsprechend angepasst:

Code: Select all

...
// Einbinden der JavaScipt-Dateien in den HTML-Head des Templates

$GLOBALS['block']['custom_htmlhead']['mootools.js']                   = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
// $GLOBALS['block']['custom_htmlhead']['smoothgallery0.mootools.js'] = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';
...
Das Ergebniss ist dann das hier: http://webdesign-dp.de/pepes-sandbox/in ... othgallery ... Bisher scheint alles zu klappen :)
Last edited by pepe on Wed 21. Oct 2009, 10:41, edited 1 time in total.
hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: smoothGallery Integration in phpwcms

Post by hausmeister »

hi pepe,

läuft, danke für die hilfe.
eine frage habe ich noch. in image spezial kann ich ja zu jedem bild eine url eingeben.
die wird nicht mit übergeben an das template. ich habe auch keine ahnung wie der platzhalter hierfür aussieht.
weisst du rat?

danke

der hausmeister
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

was willst du denn damit erreichen?

Ich bin froh, endlich alles aus der phpwcms eigenen Dateizentrale zu organisieren... und du willst auf externe Bilder zugreifen???
Oder wonach steht dein Sinn?
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms

Post by pepe »

Ich habe mal gespielt....

{IMAGE_URL}


ist der/das CT für den Eintrag im Feld URL: unterhalb des jeweiligen Bilderpaares!

Damit kannst du auch die einzenen Bilder mit aktiven links zu externen oder internen Seiten "dressieren" ...

Ich experimentiere auch gerade damit rum ;-)
mseydel
Posts: 37
Joined: Sat 15. Jan 2005, 23:33

Re: smoothGallery Integration in phpwcms

Post by mseydel »

Hallo Pepe,
habe das auch mal ausprobiert nach Deiner Anleitung und funktioniert natürlich. Aber da ich mir alles was ich mal verbrochen habe auch mit dem IE6 ansehe musste ich feststellen das da nichts passiert.

Dachte natürlich das ich etwas falsch gemacht habe aber auch auf deiner Spielwiese wird nur ein Bild angezeigt sonst passiert nichts. Schön wärs schon wenn es auch im IE funktionieren würde. Hat einer ne Idee woran es liegen könnte?

Oder ist das nur bei mir so?

Schöne Grüße
Matthias
Post Reply