hier ein neues Modul für eine JavaScript Slideshow (Dia Show). Für die Ausgabe werden absolut positionierte div-Elemente verwendet. Um die Überblendefekte kümmert sie das script.aculo.us Framework.
Die Version 1.7.0 beta1 von script.aculo.us ist im Package mit dabei, kann aber bei Bedarf auch unter http://script.aculo.us/ heruntergeladen werden.
Features:
- Handling von Bildern verschiedener Größen und Formaten (jpg, jpeg, png, gif)
- Sklalierbarkeit großer Bilder (durch Verwendung von Contenido cApiImgScale() Funktion)
- Valide XHTML-Strict Ausgabe
Moduleingabe:
Code: Alles auswählen
?><?php
// input Slideshow
cInclude('classes', 'class.upload.php');
if (!class_exists('ModSlideshow')) {
class ModSlideshow{
var $default_speed = 3000;
/**
* Constructor sets some properties
*/
function ModSlideshow() {
$this->selected_dirname = "CMS_VALUE[0]";
$this->speed = "CMS_VALUE[1]";
if (!is_numeric($this->speed) || $this->speed <= 0) {
$this->speed = $this->default_speed;
}
$this->center_horizontal_chk = ("CMS_VALUE[2]" != "") ? ' checked="checked"' : "";
$this->max_width = "CMS_VALUE[3]";
if (!is_numeric($this->max_width) || $this->max_width <= 0) {
$this->max_width = "";
}
$this->max_height = "CMS_VALUE[4]";
if (!is_numeric($this->max_height) || $this->max_height <= 0) {
$this->max_height = "";
}
$this->max_cachetime = "CMS_VALUE[5]";
if (!is_numeric($this->max_cachetime) || $this->max_cachetime <= 0) {
$this->max_cachetime = "";
} elseif ($this->max_width == "" && $this->max_height == "") {
$this->max_cachetime = "";
}
} // function ModSlideshow()
/**
* Generates and returns option items of the dirname select box.
*
* @return string Composed option items.
*/
function generateSelectOptions(){
$UploadCollection = new UploadCollection();
$UploadCollection->flexSelect('dirname', '', '', 'dirname');
$opt = '<option value="">'.mi18n("-- Verzeichnis auswählen --").'</option>'."\n";
while ($UploadItem = $UploadCollection->next()) {
$dirname = $UploadItem->get('dirname');
$sel = ($dirname == $this->selected_dirname) ? ' selected="selected"' : '';
$opt .= '<option value="'.$dirname.'"'.$sel.'>'.$dirname.'</option>'."\n";
}
return $opt;
} // function generateSelectOptions()
} // class ModSlideshow
} // if (!class_exists('ModSlideshow'))
$ModSlideshow = new ModSlideshow();
?>
<!-- module modslideshow -->
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<td valign="top" class="text_medium"><?php print mi18n("Verzeichnis für Slideshow wählen:") ?></td>
<td><select name="CMS_VAR[0]" class="text_medium">
<?php print $ModSlideshow->generateSelectOptions() ?>
</select><br />
<small><?php print mi18n("(Das ausgewählte Verzeichnis sollte nur Bilder enthalten)") ?></small><br />
<br />
</td>
</tr>
<tr>
<td valign="top" class="text_medium"><?php print mi18n("Slideshowgeschwindigkeit in Millisekunden:") ?></td>
<td class="text_medium">
<input type="text" class="text_medium" name="CMS_VAR[1]" value="<?php print $ModSlideshow->speed ?>"><?php print mi18n("ms") ?><br />
<small><?php print mi18n("(z. B. 3000)") ?></small><br />
<br />
</td>
</tr>
<tr><td class="text_medium" colspan="2">
<input type="checkbox" class="text_medium" name="CMS_VAR[2]" value="vcenter"<?php print $ModSlideshow->center_horizontal_chk ?>> <?php print mi18n("Bilder horizontal zentrieren") ?><br />
<small><?php print mi18n("(Bei unterschiedlich großen Bildern alle Bilder horizontal zentrieren.<br />Vertikale Zentrierung kann über CSS definiert werden.)") ?></small><br />
<br />
</td></tr>
<tr>
<td valign="top" class="text_medium"><?php print mi18n("Maximale Breite der Bilder:") ?></td>
<td class="text_medium">
<input type="text" class="text_medium" name="CMS_VAR[3]" value="<?php print $ModSlideshow->max_width ?>"><?php print mi18n("Pixel") ?><br />
</td>
</tr>
<tr>
<td valign="top" class="text_medium"><?php print mi18n("Maximale Höhe der Bilder:") ?></td>
<td class="text_medium">
<input type="text" class="text_medium" name="CMS_VAR[4]" value="<?php print $ModSlideshow->max_height ?>"><?php print mi18n("Pixel") ?><br />
<small><?php print mi18n("(Sind Werte für maximale Breite und/oder Höhe angegeben,<br />werden große Bilder heruntergerechnet.)") ?></small><br />
<br />
</td>
</tr>
<tr>
<td valign="top" class="text_medium"><?php print mi18n("Maximale Cachedauer der Bilder:") ?></td>
<td class="text_medium">
<input type="text" class="text_medium" name="CMS_VAR[5]" value="<?php print $ModSlideshow->max_cachetime ?>"><?php print mi18n("Minuten") ?><br />
<small><?php print mi18n("(Gilt nur für zu große Bilder, die heruntergerechnet wurden.)") ?></small>
</td>
</tr>
</table>
<!-- /module modslideshow -->
<?php
unset($ModSlideshow);
Code: Alles auswählen
<?php
// output Slideshow
cInclude('classes', 'class.upload.php');
cInclude("includes", "functions.api.images.php");
if (!class_exists('ModSlideshow')) {
class ModSlideshow{
var $default_speed = 3000;
var $default_cachetime = 10;
var $default_width = '100%';
var $default_height = '100%';
var $file_types = "'jpg','jpeg','png','gif'";
var $images = null;
var $error = null;
var $max_width = 0;
var $max_height = 0;
var $center_images_horizontal = false;
/**
* Constructor sets some properties
*/
function ModSlideshow() {
$this->html_path = $GLOBALS['cfgClient'][$GLOBALS['client']]['path']['htmlpath'];
$this->upload_dir = $GLOBALS['cfgClient'][$GLOBALS['client']]['upl']['frontendpath'];
$this->upload_absolute_path = $GLOBALS['cfgClient'][$GLOBALS['client']]['upl']['path'];
// directory including images 4 the slideshow
$this->selected_dirname = "CMS_VALUE[0]";
if (trim($this->selected_dirname) == "") {
$this->error = mi18n("Slideshow: Es ist kein Verzeichnis gewählt!");
return;
} elseif (!is_dir($this->upload_dir.$this->selected_dirname)) {
$this->error = mi18n("Slideshow: Das gewählte Verzeichnis existiert nicht");
return;
}
// slideshowspeed
$this->speed = "CMS_VALUE[1]";
if (!is_numeric($this->speed) || $this->speed <= 0) {
$this->speed = $this->default_speed;
}
// flag 2 center all images horizontally
$this->center_images_horizontal = ("CMS_VALUE[2]" != "") ? true : false;
// max allowed width of images. bigger ones will be resized
$this->max_allowed_width = "CMS_VALUE[3]";
if (!is_numeric($this->max_allowed_width) || $this->max_allowed_width <= 0) {
$this->max_allowed_width = "";
}
// max allowed height of images. bigger ones will also be resized
$this->max_allowed_height = "CMS_VALUE[4]";
if (!is_numeric($this->max_allowed_height) || $this->max_allowed_height <= 0) {
$this->max_allowed_height = "";
}
// max cachetime in minutes 4 resized images
$this->max_cachetime = "CMS_VALUE[5]";
if (!is_numeric($this->max_cachetime) || $this->max_cachetime <= 0) {
$this->max_cachetime = $this->default_cachetime;
} elseif ($this->max_allowed_width == "" && $this->max_allowed_height == "") {
$this->max_cachetime = $this->default_cachetime;
}
} // function ModSlideshow()
/**
* Generates the slideshow or a message on any occured error.
*/
function generateOutput(){
if ($this->error !== null) {
print $this->error;
return;
}
$Template = new Template();
$UploadCollection = new UploadCollection();
$where = 'dirname="'.$this->selected_dirname.'" AND filetype IN('.$this->file_types.')';
$UploadCollection->select($where, "", "filename");
$counter = 0;
// iterate upload collection 2 store data in array
while ($UploadItem = $UploadCollection->next()) {
// some checks
$image_file_org = $this->upload_absolute_path . $this->selected_dirname . $UploadItem->get("filename");
if (!is_file($image_file_org) || !is_readable($image_file_org)) {
continue;
}
if (is_numeric($this->max_allowed_width) && is_numeric($this->max_allowed_height)) {
// bigger images have 2 be resized
$image_file = cApiImgScale($image_file_org, $this->max_allowed_width, $this->max_allowed_height, false, false, $this->max_cachetime);
if (!$image_file) {
continue;
}
$image_file = str_replace($this->html_path, "", $image_file);
} else {
// use original image file
$image_file = $this->upload_dir . $this->selected_dirname . $UploadItem->get("filename");
}
$counter++;
// get'n store image dimentions
$size = $this->_getImageSize($image_file);
$attr = (is_array($size)) ? " ".$size[3] : "";
// add new images array item
$images[$counter]["size"] = $size;
$images[$counter]["src"] = $image_file;
$images[$counter]["alt"] = htmlspecialchars($UploadItem->get("description"));
$images[$counter]["attr"] = $attr;
}
if ($counter == 0) {
print mi18n("Slideshow: Es wurden keine Bilder im angegebenen Verzeichnis gefunden!");
return;
}
// max width and height of slideshow box
$style_dimentions = (is_numeric($this->max_width)) ? 'width:'.$this->max_width.'px;' : 'width:'.$this->default_width.';';
$style_dimentions .= (is_numeric($this->max_height)) ? 'height:'.$this->max_height.'px;' : 'height:'.$this->default_height.';';
$style_dimentions = sprintf(' style="%s"', $style_dimentions);
$Template->set("s", "SLIDESHOW.ATTRIBUTES", $style_dimentions);
// loop images array an fill template
foreach ($images as $image) {
if ($this->center_images_horizontal == true) {
// comopse css definition 2 center a image horizontally
$center_css = $this->_css2centerImageHorizontal($image["size"]);
if ($center_css != "") {
$image["attr"] .= ' style="'.$center_css.'"';
}
}
$Template->set("d", "SLIDE.ATTRIBUTES", $style_dimentions);
$Template->set("d", "IMG.SRC", $image["src"]);
$Template->set("d", "IMG.ALT", $image["alt"]);
$Template->set("d", "IMG.ATTRIBUTES", $image["attr"]);
$Template->next();
}
$Template->set("s", "SLIDESHOW.SPEED", $this->speed);
$Template->set("s", "NOSCRIPT", mi18n("JavaScript Code zum Erstellen der Bilder-Slideshow"));
$Template->generate('templates/slideshow.html', 0, 0);
} // function generateOutput()
/**
* Returns value of getimagesize function, and also stores maximum width/height of
* existing images.
*
* @param string Image file to ger size array for
* @return array Returnvalue of getimagesize() function
* @access private
*/
function _getImageSize($file){
$size = @getimagesize($file);
if (is_array($size)) {
if ($this->max_width < $size[0]) {
$this->max_width = $size[0];
}
if ($this->max_height < $size[1]) {
$this->max_height = $size[1];
}
}
return $size;
} // function _getImageSize()
/**
* Composes css definition 2 center a image horizontally and returns it back.
*
* @param mixed Array including image size imnformations (result of getimagesize())
* @return string Composed css definition
* @access private
*/
function _css2centerImageHorizontal($size){
if (!is_array($size) || $this->max_height == 0 || ($size[1] == $this->max_height)) {
return '';
}
$css = "margin-top:".(($this->max_height - $size[1]) / 2)."px";
return $css;
} // function _css2centerImageHorizontal()
} // class ModSlideshow
} // if (!class_exists('ModSlideshow'))
$ModSlideshow = new ModSlideshow();
$ModSlideshow->generateOutput();
unset($ModSlideshow);
?>
/cms/templates/slideshow.html:
Code: Alles auswählen
<script type="text/javascript" src="./js/slideshow.js"></script>
<div id="slideshow-box">
<div class="slideshow" id="slideshow"{SLIDESHOW.ATTRIBUTES}>
<!-- BEGIN:BLOCK -->
<div class="slide"{SLIDE.ATTRIBUTES}><img src="{IMG.SRC}" alt="{IMG.ALT}"{IMG.ATTRIBUTES} /></div><!-- END:BLOCK -->
</div>
</div>
<script type="text/javascript">//<![CDATA[
new Slideshow('slideshow', {SLIDESHOW.SPEED});
//]]></script>
<noscript><p class="noscript">{NOSCRIPT}</p></noscript>
Layout:
Im Header-Bereich Artikel-Layouts sind 2 JavaScript-Dateien aus prototype/script.aculo.us einzubinden, damit die Slideshow korrekt initialisiert wird.
Code: Alles auswählen
<head>
...
<script src="cms/js/scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="cms/js/scriptaculous/src/effects.js" type="text/javascript"></script>
...
</head>
cms/js/slideshow.js:
Code: Alles auswählen
/*
Simple slideshow using prototype and scriptaculous.
Usage:
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="slideshow.js"></script>
<style type="text/css">
#slideshow { position: relative; width: 100px; height: 100px; }
#slideshow div { position: absolute; left: 0; top: 0; }
</style>
<div class="slideshow" id="slideshow">
<div class="slide"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
</div>
<script type="text/javascript">new Slideshow('slideshow', 3000);</script>
See also: http://blog.remvee.net/post/17
Copyright (c) 2006 - R.W. van 't Veer
Changes:
20.12.06 by Murat Purc (murat@purc.de), Added handling of Elements having display none styles.
*/
function Slideshow(slideshow, timeout) {
this.slides = [];
var nl = $(slideshow).getElementsByTagName('div');
for (var i = 0; i < nl.length; i++) {
if (Element.hasClassName(nl[i], 'slide')) {
this.slides.push(nl[i]);
}
}
this.timeout = timeout;
this.current = 0;
for (var i = 0; i < this.slides.length; i++) {
this.slides[i].style.zIndex = this.slides.length - i;
Element.hide(this.slides[i]);
}
Element.show(slideshow);
Element.setStyle(this.slides[this.current], {display: 'inline'});
setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
}
Slideshow.prototype = {
next: function() {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides[(this.current + i) % this.slides.length];
slide.style.zIndex = this.slides.length - i;
}
Effect.Fade(this.slides[this.current], {
afterFinish: function(effect) {
effect.element.style.zIndex = 0;
Element.show(effect.element);
Element.setOpacity(effect.element, 1);
}
});
this.current = (this.current + 1) % this.slides.length;
// show next element
Element.setStyle(this.slides[this.current], {display: 'inline'});
setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
}
}
cms/css/slideshow.css:
Code: Alles auswählen
/* css definitions 4 slideshow */
#slideshow-box{text-align:center;}
#slideshow {position:relative;margin:auto;vertical-align:middle;}
#slideshow .slide {position:absolute;top:0;left:0;vertical-align:middle;display:none;}
#slideshow .slide img{border:0;}
Beispiel/Download:
Slideshow Beispiel ansehen, Modul herunterladen
Chanelog:
v0.6
- Handling von Bildern mit verschiedenen Größen
- Schalter für vertikale Zentrierung der Bilder
- Angabe maximaler Breite und Höhe für die Slideshow. Große Bilder werden dann skaliert.
- Dauer des Bildercaches bei skalierten Bildern
v0.4
- Erste Veröffentlichung des SlideShow Moduls
Grüße
xmurrix