phpwcms Support Forum

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//-->