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//-->
Also deshalb keine Aufregung beim Testen... es geht wirklich!
Und wenn OG auf mootools 1.2 umgestellt hat, dann ändern wir einfach wieder...
