deshalb habe ich doch noch mal "Hand angelegt", vielleicht kann ja jemand damit was anfangen
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!):
Und hier nun das komplette Template für den ContentPart: "Bilder <DIV>":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.
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} </h3>
<p>[SUBTITLE_ELSE](c) 2010 by Otto Mustermann - all rights reserved[/SUBTITLE_ELSE][SUBTITLE]{SUBTITLE}[/SUBTITLE] </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//-->
Ich muss dann auch schnell weiter... heute ab 18:00 Uhr ist ja wieder der Lehrgang: "Kochen ohne Kalorien".
Na prima!
Dafür zum Ausgleich aber ab 20:30 Uhr dann "Sitztanz für Fortgeschrittene"... das ist doch mal was
Also, denkt an mich, Freunde
