smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

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

smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

Post by pepe »

Hier im Seniorenheim ist es manchmal etwas langweilig...
deshalb habe ich doch noch mal "Hand angelegt", vielleicht kann ja jemand damit was anfangen
:wink:

Die Integration der SmoothGallery in phpwcms wurde einfacher realisiert

- Es können nun x Bilder mit nur einem MausKlick aus der Dateizentrale übernommen werden
- Der geänderten Einbindung von JS Dateien ab der Version r386 wurde Rechnug getragen
- Das Script arbeitet nun mit den in phpwcms bereits integrierten mootools
- Die Anpassung von Breite und Höhe der SmoothGallery kann ebenfalls innerhalb des Templates erfolgen

Hier wird also der ContentPart "Bilder <DIV>" verwendet... also das Template an die korrekte Stelle kopieren!!!


Textauszug aus dem folgenden Template (Diese Beschreibung ist mit an Bord!):
Zur Realisierung der SmoothGallery habe ich mir das Scriptpaket von dieser Site besorgt:
http://smoothgallery.jondesign.net/what/

Im Downloadbereich hatte ich mich dann für die folgende Version entschieden:

Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und war deshalb diesem Link gefolgt:

Zip Format
Download JonDesign's Smooth Gallery 2.0 in Zip Format (recommended if you are using windows)
http://smoothgallery.jondesign.net/mint ... ry-2.0.zip

An welcher Stelle in der phpwcms Paket ich die einzelnen Dateien abgelegt habe,
ist aus nachfolgend Script zu ersehen:

Den img-Ordner mit allen Background-Images und Icons habe ich zusaetzlich unter dem css-Ordner abgelegt:
.../template/inc_js/smoothgallery/css/img/

Dieses Template selber ist abzuspeichern in der Dateistruktur von phpwcms als:
.../template/inc_cntpart/images/pepes-SG_image-div_BBBxHHH.tmpl

Damit sollte auch der weniger geuebte phpwcms-User eigentlich klar kommen.

====================================================================================

Im CP "Bilder <DIV>" sind einzustellen:
- Inhaltstitel: Titel erscheint oberhalb der smoothGallery als <h3>-Format
- Untertitel: Eintragung wird verwendet als 2. Zeile der "Infopane"
( Ohne Eintrag erscheint der copyright-Vermerk aus diesem Template )

- Template auswählen: pepes-SG_image-div_BBBxHHH.tmpl

- Bilderauswahl: die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile: zufügen wenn gewünscht = Bildtitel

- WYSIWYG-Eintrag: eingegebener Text erscheint untehalb der smoothGallery

Grundsätzliche Einstellung im ContentPart:
- "Klick vergrößern" muss aktiviert sein, sonst startet die SlideShow nicht!
- "Vorschaubilder ohne Bilduntezeile" zum Verbergen der Bilduntezeilen anwendbar

Zusätzliche Möglichkeiten:
- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten.
- Im Template Einstellungen und damit die Funktionalität der smoothGallery anpassen.
Und hier nun das komplette Template für den ContentPart: "Bilder <DIV>":

Code: Select all

====================================================================================
phpwcms und die SmoothGallery für den ContentPart: "Bilder <DIV>"

Vorlage: .../template/inc_cntpart/images/pepes-SG_image-div_BBBxHHH.tmpl

Copyright 2010 by Manfred "pepe" Peperkorn                 Version: 17.01.2010-14:50
====================================================================================

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

Im Downloadbereich hatte ich mich dann für die folgende Version entschieden:

Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und war deshalb diesem Link gefolgt:

Zip Format
Download JonDesign's Smooth Gallery 2.0 in Zip Format (recommended if you are using windows) 

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


An welcher Stelle in der phpwcms Paket ich die einzelnen Dateien abgelegt habe, 
ist aus nachfolgend Script zu ersehen:

Den img-Ordner mit allen Background-Images und Icons habe ich zusaetzlich unter dem css-Ordner abgelegt:

   .../template/inc_js/smoothgallery/css/img/


Dieses Template selber ist abzuspeichern in der Dateistruktur von phpwcms als:

   .../template/inc_cntpart/images/pepes-SG_image-div_BBBxHHH.tmpl


Damit sollte auch der weniger geuebte phpwcms-User eigentlich klar kommen.

====================================================================================

Im CP "Bilder <DIV>" sind einzustellen:
- Inhaltstitel:       Titel erscheint oberhalb der smoothGallery als <h3>-Format
- Untertitel:         Eintragung wird verwendet als 2. Zeile der "Infopane"  
                      Ohne Eintrag erscheint das copyright aus diesem Template

- Template auswählen: pepes-SG_image-div_BBBxHHH.tmpl

- Bilderauswahl:      die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile:     zufügen wenn gewünscht = Bildtitel

- WYSIWYG-Eintrag:    eingegebener Text erscheint untehalb der smoothGallery


Grundsätzliche Einstellung im ContentPart: 
- "Klick vergrößern" muss aktiviert sein, sonst startet die SlideShow nicht!
- "Vorschaubilder ohne Bilduntezeile" zum Verbergen der Bilduntezeilen anwendbar 


Zusätzliche Möglichkeiten:
- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten.
- Im Template Einstellungen und damit die Funktionalität der smoothGallery anpassen.

====================================================================================
====================================================================================

<!--IMAGES_HEADER_START//-->

<!-- START :: pepes-SG_image-div_BBBxHHH.tmpl ========== ========== ========== -->

<script type="text/javascript">
   function startGallery() {
      var myGallery = new gallery($('myGallery'), {
        
         timed: true,                    // true = Slider laeuft automatisch beim Laden der Seite an
         showInfopane: true,             // true = Informationsanzeige fuer jedes einzelne Bild (von UNTEN)
         embedLinks: false,              // true = Image-Link aktivieren :: momentan NICHT moeglich !!!
        
         fadeDuration: 500,              //  500 = Ueberblenddauer in Millisekunden
         delay: 9000,                    // 9000 = Zykluszeit pro Bild in Millisekunden
         slideInfoZoneOpacity: 0.7,      //  0.0 - 1.0 = Tranzparenz der Infoanzeige      
        
         showCarousel: true,             // true = Thunbnail-Auswahl anzeigen
         showArrows: true,               // true = Pfeile (vor und zurueck) anzeigen/aktivieren
         slideInfoZoneSlide: true,       // true = 
         
         preloader: true,                // true = Preload aktivieren
         preloaderImage: true,           // true = Funktionsanzeige wenn Preload erfolgt
         preloaderErrorImage: true       // true = Preload-Fehler anzeigen, wenn vorhanden

      });
   }
   window.onDomReady(startGallery);
</script>

<div id="pepes-smoothGallery">
   [TITLE]
   <h3>{TITLE}</h3>[/TITLE][PHP]/*[SUBTITLE]
   <h4>{SUBTITLE}</h4>[/SUBTITLE]*/[/PHP]

   <div id="myGallery">
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
      <div class="imageElement">
         <h3>{CAPTION}&#160;</h3>
         <p>[SUBTITLE_ELSE](c) 2010 by Otto Mustermann - all rights reserved[/SUBTITLE_ELSE][SUBTITLE]{SUBTITLE}[/SUBTITLE]&#160;</p>
         <img src="{IMAGE_ABS}" class="full" alt="{CAPTION}" />
         <img src="{THUMB_ABS}" class="thumbnail" alt="{CAPTION}" />
      </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 -->

   [TEXT]<br />
   <div id="myGalleryText">{TEXT}</div>
   [/TEXT]   
</div><!-- //pepes-smoothGallery -->

<!-- STOP :: pepes-SG_image-div_BBBxHHH.tmpl ========== ========== ========== -->
[PHP]
// Wenn mit phpwcms >= r386 gearbeitet wird ==========
// $GLOBALS['block']['custom_htmlhead']['jquery.js']          = getJavaScriptSourceLink(TEMPLATE_PATH.'lib/jquery/jquery.min.js');
   $GLOBALS['block']['custom_htmlhead']['mootools.js']        = getJavaScriptSourceLink(TEMPLATE_PATH.'lib/mootools/mootools-1.1-yc.js');
// $GLOBALS['block']['custom_htmlhead']['mootools.js']        = getJavaScriptSourceLink(TEMPLATE_PATH.'lib/mootools/mootools-1.2-core-yc.js');

   $GLOBALS['block']['custom_htmlhead']['jd.gallery.js']      = LF.'<!-- SmoothGallery aktivieren -->'.LF.getJavaScriptSourceLink(TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.js');

// CSS-Datei ist abgelegt unter .../template/inc_css/specific/jd.gallery.css ==========
// $GLOBALS['block']['css']['smoothgallery.css']              = 'pepes_specific/jd.gallery.css';

// CSS-Datei ist abgelegt unter .../template/inc_js/smoothgallery/css/jd.gallery.css ==========
   $GLOBALS['block']['custom_htmlhead']['smoothgallery1.css'] = LF.'<!-- Formatierungsdatei der smoothGallery "jd.gallery.css" laden -->
  <link  rel="stylesheet" type="text/css" media="screen" href="'.TEMPLATE_PATH.'inc_js/smoothgallery/css/jd.gallery.css" />'.LF;

// Anpassung der "jd.gallery.css" an eigene Template-Abmessungen ==========
   $GLOBALS['block']['custom_htmlhead']['smoothgallery2.css'] = '<!-- Formatierungen der vorhandenen "jd.gallery.css" ueberschreiben -->
  <style type="text/css">
     #myGallery, #myGallerySet, #flickrGallery { width:532px; height:400px; border:3px double #333; }
  </style>'.LF;
[/PHP]
<!--IMAGES_FOOTER_END//-->
 
Viel Spass beim Experimentieren :D


Ich muss dann auch schnell weiter... heute ab 18:00 Uhr ist ja wieder der Lehrgang: "Kochen ohne Kalorien".
Na prima! :shock:
Dafür zum Ausgleich aber ab 20:30 Uhr dann "Sitztanz für Fortgeschrittene"... das ist doch mal was :!:

Also, denkt an mich, Freunde :lol: :lol: :lol:
hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

Post by hausmeister »

dankeschön ;)
werde ich die tage testen.

der hausmeister
User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Re: smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

Post by markus s »

hallo pepe,
wie immer perfdekt dokumentiert - und auch für das ältere semester
verständlich rübergebracht... :wink:
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

Post by Oliver Georgi »

Es ist trotz allem ratsamer, auf MooTools 1.2 zu setzen. MooTools 1.1 sollte nicht mehr benutzt werden. Die Basisideen für SmoothGallery auf dieser Basis habe ich bereits dokumentiert.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: smoothGallery Integration in phpwcms CP: "Bilder < DIV >"

Post by pepe »

...und wo ?
Post Reply