phpwcms Support Forum

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

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>';

Code: Select all

initMootools();

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

Code: Select all

initMootools();

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>';
...

Code: Select all

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

Code: Select all

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

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 -->';

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

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>';
...