Ich konnte mich noch mal schnell in den PC von Oberschwester Rabiata reinschmuggeln... 
Hier also die nötigen Informationen:
Zur Realisierung der SmoothGallery habe ich mir auch dafür das Scriptpaket von dieser Site besorgt:
http://smoothgallery.jondesign.net/what/
Im Downloadbereich hatte ich mich dann für diese Version entschieden:
Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)
Und war 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 unterhalb des css-Ordners abgelegt:
.../template/inc_js/smoothgallery/css/img/
Dieses Template selber ist abzulegen als:
smoothgallery-set_image-special.tmpl
Innerhalb der Dateistruktur von phpwcms anschliessend hier zu finden:
.../template/inc_cntpart/imagespecial/smoothgallery-set_image-special.tmpl
Damit sollte auch der weniger geuebte phpwcms-User eigentlich klar kommen.
--------------------------------------------------------------------
Das folgende Template kann komplett abgespeichert werden, dann hat man alles bei der Hand.
Wenn alles klappt, wird dann ausgelichtet, nicht vorher!
Template:
...../template/inc_cntpart/imagespecial/smoothgallery-set_image-special.tmpl
Code: Select all
============================================================================
Dieses Template ist abzuspeichern unter:
...../template/inc_cntpart/imagespecial/smoothgallery-set_image-special.tmpl
============================================================================
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 diese Version entschieden:
Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)
Und war 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 unterhalb des css-Ordners abgelegt:
.../template/inc_js/smoothgallery/css/img/
Dieses Template selber ist abzulegen als:
smoothgallery-set_image-special.tmpl
Innerhalb der Dateistruktur von phpwcms anschliessend hier zu finden:
.../template/inc_cntpart/imagespecial/smoothgallery-set_image-special.tmpl
Damit sollte auch der weniger geuebte phpwcms-User eigentlich klar kommen.
--------------------------------------------------------------------
Wichtig
- Jede Diashow bekommt ein eigenen ContentPart: "Bilder spezial"
Im CP "Bilder spezial" sind einzutragen:
- ContentPart - TITEL : Titel der Diashow (optional aber sinnvoll)
- ContentPart - SUBTITEL: 2. Zeile des Informationsbereichs (optional ggf. Copyrightangaben fuer diese Show)
- Die gewuenschen Bilder sind aus der Dateizentrale von phpwcms auszuwaehlen (zweimal das selbe Bild!)
- Bildunterzeile: zufuegen wenn gewuenscht = Bildtitel
- Infotext: zufuegen, wenn gewuenscht = Titleanzeige bei Mouseover
- URL: zufuegen, wenn ein Bilder-Link gewuenscht (Anzeige immer im selben Fenster)
- Template waehlen: smoothgallery-set_image-special.tmpl (fuer alle verwendeten CPs = DiaShows identisch)
- Abmessungen der Bilder des Sliders eintragen (bei mir sind das 100x75px und 800x450px )
- Verhalten: "Klick vergroessern" muss aktiviert sein!
- Effekt Schalter muessen nun abhaengig von der Position der Show im Set aktiviert werden
- EFFECT 1 : Bei der ERSTEN Diashow = erster ContentPart "Bilder spezial"
- EFFECT 2 : Alle weiteren Diashows im Set = weitere ContentParts "Bilder spezial"
- EFFECT 3 : Bei der LETZTEN Diashow = letzter ContentPart "Bilder spezial"
- Unbedingt darauf achten, das (LEDIGLICH) ein Effektschalter entsprechend gesetzt ist!
Zusaetzliche Moeglichkeiten:
- Die CSS-Datei des Sliders ggf. bezueglich des Finetunings ueberarbeiten...
- Im Template ggf. einige Einstellungen und damit die Funktionalität der smoothGallery anpassen
============================================================================
============================================================================
<!--IMAGES_HEADER_START//-->
[EFFECT_1][PHP]
// CSS-Datei ist abgelegt unter .../template/inc_css/specific/jd.gallery800x450.css
// $GLOBALS['block']['css']['smooth'] = 'specific/jd.gallery800x450.css';
// CSS-Datei ist abgelegt unter .../template/inc_js/smoothgallery/css/jd.gallery800x450.css
$GLOBALS['block']['custom_htmlhead']['smoothgallery.css'] = '<!-- SmoothGallery aktivieren -->'.LF.' <link href="'.TEMPLATE_PATH.'inc_js/smoothgallery/css/jd.gallery800x450.css" rel="stylesheet" type="text/css" media="screen" />';
// "mootools.v1.11.js" muss auf dem Server umbenannt werden in "mootools.js", sonst wuerden 2 Versionen von mootools geladen!
$GLOBALS['block']['custom_htmlhead']['mootools.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
// Alternative, wenn zwei "mootools" Versionen geladen werden duerfen
// $GLOBALS['block']['custom_htmlhead']['mootools.v1.11.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/mootools.v1.11.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['jd.gallery.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['jd.gallery.set.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.set.js" type="text/javascript"></script>'.LF;
[/PHP]
<!-- START: PEPEs smoothgallery-set_image-special.html ========== ========== ========== -->
<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
startWithSelector: true, // true = GallerieSet beim Laden der Seite anzeigen
timed: true, // true = Autostart des Sliders beim Laden der Seite aktivieren
delay: 9000, // 9000 = Zykluszeit pro Bild in Millisekunden
fadeDuration: 500, // 500 = Ueberblenddauer in Millisekunden
defaultTransition: "fade", // fade = Standard-Uebergangsart der Diashow
showArrows: true, // true = Pfeile (vor und zurueck) anzeigen/aktivieren
embedLinks: true, // true = Image-Link aktivieren
showInfopane: true, // true = Informationsanzeige fuer die einzelne Bild
slideInfoZoneSlide: true, // true = Informationsbereich dynamisch von unten in das Bild hinenschieben
slideInfoZoneOpacity: 0.7, // 0.7 = Tranzparenz der Infoanzeige
preloader: true, // true = Preload aktivieren
preloaderImage: true, // true = Funktionsanzeige wenn Preload erfolgt
preloaderErrorImage: true, // true = Preload-Fehler anzeigen, wenn vorhanden
showCarousel: true, // true = Thunbnail-Auswahl anzeigen
carouselMinimizedOpacity: 0.5, // 0.5 = Tranzparenz der Thumbs
carouselMinimizedHeight: 20, // 20 = Hoehe der Thumbs-Leiste in zusammengeklappten Zustand
carouselMaximizedOpacity: 0.7, // 0.7 =
thumbWidth: 100, // 100 = Anzeigebreite der Thumbs in der Show
thumbHeight: 75, // 75 = Anzeigehoehe
thumbSpacing: 10, // 10 = Abstand der einzelnen Thumbs
thumbIdleOpacity: 0.5, // 0.5 = Tranzparenz der Thumbs
showCarouselLabel: true, // true =
thumbCloseCarousel: true, // true =
carouselHorizontal: true, // true =
activateCarouselScroller: true, // true =
carouselPreloader: true, // true =
/* Texte fuer die Steuerelemente */
textGallerySelector: 'Welche Diashow soll es denn sein?',
textGalleryInfo: '{0} Fotos',
textShowGallerySelector: '« Diashow Auswahl »',
textShowCarousel: '« Fotos »',
textPreloadingCarousel: 'Vorschaubilder laden...',
/* Nachfolgende Manipulations-Moeglichkeiten sind eher etwas fuer "Koenner" */
/* verwendete CSS Klassen */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
gallerySelector: "div.galleryElement",
galleryTitleSelector: "h2",
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail"
});
}
window.onDomReady(startGallery);
// window.addEvent('domready', startGallery);
</script>
<div id="pepes-smoothGallerySet">
<div id="myGallerySet">
<div id="gallery{ID}" class="galleryElement">
<h2>{TITLE}[TITLE_ELSE] [/TITLE_ELSE]</h2><!-- Titel der Slideshow aus ContentPart: {ID} -->[/EFFECT_1][EFFECT_2]
</div><!-- /galleryElement :: Ende der Gallery -->
<div id="gallery{ID}" class="galleryElement">
<h2>{TITLE}[TITLE_ELSE] [/TITLE_ELSE]</h2><!-- Titel der Slideshow aus ContentPart: {ID} -->[/EFFECT_2][EFFECT_3]
</div><!-- /galleryElement :: Ende der Gallery -->
<div id="gallery{ID}" class="galleryElement">
<h2>{TITLE}[TITLE_ELSE] [/TITLE_ELSE]</h2><!-- Titel der Slideshow aus ContentPart: {ID} -->[/EFFECT_3]
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
<div class="imageElement">
<h3>{CAPTION}[CAPTION_ELSE] [/CAPTION_ELSE]</h3>
<p>{SUBTITLE}[SUBTITLE_ELSE] [/SUBTITLE_ELSE][PHP]/* (c) 2009 by xxx - all rights reserved - oder nur   */[/PHP]</p>
<a href="{IMAGE_URL}[IMAGE_URL_ELSE]#[/IMAGE_URL_ELSE]" class="open"{IMAGE_TARGET} title="{INFOHTML}" ></a>
<img src="{IMAGE_REL}" class="full" alt="{CAPTION}" />
<img src="{THUMB_REL}" 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//-->
[EFFECT_3]</div><!-- /galleryElement :: Ende der letzten Gallery -->
</div><!-- //myGallerySet -->
</div><!-- //pepes-smoothGallerySet -->
<!-- STOP: PEPEs smoothgallery-set_image-special.html ========== ========== ========== -->
[/EFFECT_3]
<!--IMAGES_FOOTER_END//-->
CSS-Datei:
...../template/inc_js/smoothgallery/css/jd.gallery800x450.css
Code: Select all
/* ================================================================= */
/* jd.gallery800x450.css :: Basiert auf dem Original der Version 2.0 */
/* ================================================================= */
#pepes-smoothGallery {
text-align: center;
padding: 10px;
}
#pepes-smoothGallerySet {
text-align: center;
padding: 10px;
}
#myGallery,
#myGallerySet,
#flickrGallery {
width: 460px; height: 345px;
width: 800px; height: 450px;
z-index:5;
border: 1px solid #000;
border: 3px double #ccc;
margin: 0 auto;
}
#flickrGallery {
width: 500px;
height: 334px;
}
#myGallery img.thumbnail,
#myGallerySet img.thumbnail {
display: none;
}
.jdGallery {
overflow: hidden;
position: relative;
}
.jdGallery img {
border: 0;
margin: 0;
}
.jdGallery .slideElement {
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .loadingElement {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 40px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone {
bottom: -1px;
}
.jdGallery .slideInfoZone h2 {
padding: 0;
font-size: 80%;
font-size: 100%;
font-size: 12px;
margin: 0;
margin: 5px 5px 5px;
font-weight: bold;
color: inherit;
/* color:RED; */
}
.jdGallery .slideInfoZone p {
padding: 0;
font-size: 60%;
font-size: 9px;
margin: 0px 5px 2px;
color: #eee;
/* color:YELLOW; */
}
.jdGallery div.carouselContainer {
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn {
position: absolute;
bottom: 0;
right: 30px;
right: 0px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel {
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel {
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper,
.jdExtCarousel .carouselWrapper {
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner,
.jdExtCarousel .carouselInner {
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail,
.jdExtCarousel .carouselInner .thumbnail {
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail,
.jdExtCarousel .wall .thumbnail {
margin-bottom: 10px;
}
.jdGallery .carousel .label,
.jdExtCarousel .label {
font-size: 13px;
font-size: 11px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton,
.jdExtCarousel .wallButton {
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number,
.jdExtCarousel .label .number {
color: #b5b5b5;
}
.jdGallery a {
font-size: 100%;
text-decoration: none;
color: inherit;
}
.jdGallery a.right,
.jdGallery a.left {
position: absolute;
height: 99%;
width: 25%;
width: 40%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right,
* html .jdGallery a.left {
filter:alpha(opacity=50);
}
.jdGallery a.right:hover,
.jdGallery a.left:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left {
left: 0;
top: 0;
background: url('img/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left {
background: url('img/fleche1.gif') no-repeat center left;
}
.jdGallery a.right {
right: 0;
top: 0;
background: url('img/fleche2.png') no-repeat center right;
}
* html .jdGallery a.right {
background: url('img/fleche2.gif') no-repeat center right;
}
.jdGallery a.open {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open {
position: absolute;
top: 0;
left: 25%;
left: 40%;
height: 99%;
width: 50%;
width: 20%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover {
background: url('img/open.png') no-repeat center center;
}
* html .withArrows a.open:hover {
background: url('img/open.gif') no-repeat center center;
filter:alpha(opacity=80);
}
/* Gallery Sets ========== ========== ========== */
.jdGallery a.gallerySelectorBtn {
z-index: 15;
position: absolute;
top: 0;
left: 30px;
left: 0px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .6;
-moz-opacity: .6;
-khtml-opacity: 0.6;
filter:alpha(opacity=60);
}
/* Gesamtbereich des Selektor-Menues */
.jdGallery .gallerySelector {
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
/* Ueberschrift des Selektor-Menues */
.jdGallery .gallerySelector h2 {
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper {
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton {
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover {
background: #333;
}
/* Das angezeigte Icon */
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview {
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
/* Anzahl der Bilder */
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
color: #666;
}
Und wenn es dann läuft, sollte es so aussehen:
http://webdesign-dp.de/pepes-sandbox/in ... er-spezial
Sowohl eine externe wie die interne HTML-Validierung zeigen
GRÜN... das sollte also klappen.
Oder hat einer der Experimentierwilligen Probleme?
Dann bitte melden, vielleicht komm ich ja noch mal an den PC ?
Uiiiii ich höre Schritte... nix wie raus hier! Das gibt garantiert Ärger... 
)
und PC ist reines GIFT, phpwcms sogar der TOD... sagt meine besorgte Oberschwester Rabiata 
- i trust the rest of you is in good shape.