Slideshow mit script.aculo.us

[xmurrix]

Hallo an alle,

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

Modulausgabe:

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>

Alternativ kann dies auch in der Template-Datei ("/cms/templates/slideshow.html") angegeben werden.


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

[emergence]

ich hab jetzt wenig zeit zum testen, aber ne kleine frage hab ich...

wie wirkt sich das aus, wenn man hoch und querformatige bilder gelichzeitig einsetzt ? wird die höhe automatisch angepasst ?

[xmurrix]

Hallo,

der div-Container für die Slideshow hat in diesem Modul eine feste Breite und Höhe.

Wenn ein Verzeichnis verschieden große Bilder in Hoch-/Querformat hat, ist es dann nicht Optimal. Teilausschnitte größerer Bilder bleiben bei der Überblendung mit kleineren Bildern im Hintergrund stehen. Ist nicht schön, das gebe ich zu. Auch die fixe Höhe und Breite sorgt bei größeren Bildern für ein unschönes Erscheinungsbild.

Da die div-Container für die Bilder (class="slide") alle absolut zum übergeordneten Element stehen (id="slideshow"), sollte das Übergeordnete Element eine feste Höhe und Breite haben. Das lässt sich z. B. im Modul wunderbar emitteln, da dort sowieso die Größen der Bilder gelesen werden.

Werde das dann mal in die nächste Version einbauen. Danke für die Frage und den Gedankenanstoß.

Gruß
xmurrix

[xmurrix]

So, eine neue Version (v 0.6) der Slideshow ist raus.
Eingebaut ist unter anderem das Handling mit verschiedenen Bildergrößen/-formaten und das Skalieren großer Bilder über cApiImgScale.

Den Originalbeitrag dazu habe ich dementsprechend angepasst.
http://www.contenido.de/forum/viewtopic ... 4923#93315

Grüße
xmurrix

[lano]

Hallo Wissende.

Obwohl ich ein Verzeichnis gewählt habe -ja, da sind nur Foto's drin - zeigt er mir die Meldung:
"Slideshow: Es ist kein Verzeichnis gewählt!"

Was mach ich falsch?
Anzeigen soll er es mir in einem Text-Container.



Gruß

LaNo

[xmurrix]

Hallo Lano,

Obwohl ich ein Verzeichnis gewählt habe -ja, da sind nur Foto's drin - zeigt er mir die Meldung:
"Slideshow: Es ist kein Verzeichnis gewählt!"

eigentlich kommt diese Meldung nur dann, wenn wirklich kein Verzeichnis in der Konfiguration des Artikels oder der Kategorie gewählt wurde. Ich würde die Konfiguration nochmals überprüfen...

Sollten keine Bilder angezeigt werden, die im angegebenen Verzeichnis liegen, einfach auf das Verzeichnis in der Dateiverwaltung klicken, damit Contenido die Informationen über vorhandene Dateien in die DB übernimmt.

Anzeigen soll er es mir in einem Text-Container.

Hmm, die Slideshow sollte nicht in einem Text-Container angezeigt werden. Die Konfiguration als Modul-Contrainer in einem Template reicht dafür aus.

Gruß
xmurrix

[lano]

Hallo Lano,

Obwohl ich ein Verzeichnis gewählt habe -ja, da sind nur Foto's drin - zeigt er mir die Meldung:
"Slideshow: Es ist kein Verzeichnis gewählt!"

eigentlich kommt diese Meldung nur dann, wenn wirklich kein Verzeichnis in der Konfiguration des Artikels oder der Kategorie gewählt wurde. Ich würde die Konfiguration nochmals überprüfen...

Sollten keine Bilder angezeigt werden, die im angegebenen Verzeichnis liegen, einfach auf das Verzeichnis in der Dateiverwaltung klicken, damit Contenido die Informationen über vorhandene Dateien in die DB übernimmt.

Anzeigen soll er es mir in einem Text-Container.

Hmm, die Slideshow sollte nicht in einem Text-Container angezeigt werden. Die Konfiguration als Modul-Contrainer in einem Template reicht dafür aus.

Gruß
xmurrix

Hallo xmurrix.

Vielen Dank für die schnelle Rückantwort.

Punkt 1: gemacht, leider keine Erfolge.

Punkt 2: Anfängerfrage, wie mache ich das mit einem Modul-Container im Template?
Ich habe es so versucht:
Template: Startseite mit RSS, in einen TEXT-Container
Slideshow ausgewählt, abgespeichert und in die
Vorkonfiguration gewechselt. Hier dann die Daten eingetragen.


Für einen kleinen Tip währe ich sehr dankbar.



LaNo

[Dodger77]

Ich habe es so versucht:
Template: Startseite mit RSS, in einen TEXT-Container
Slideshow ausgewählt, abgespeichert und in die
Vorkonfiguration gewechselt. Hier dann die Daten eingetragen.


Für einen kleinen Tip währe ich sehr dankbar.

Dabei handelt es sich nur um eine Vorkonfiguration (darum heißt die so), die eigentliche Konfiguration findet dann in der entsprechenden Kategorie statt. Der Kategorie (oder dem Startartikel darin) das Template zuweisen und dann dort konfigurieren.

[lano]

Ich habe es so versucht:
Template: Startseite mit RSS, in einen TEXT-Container
Slideshow ausgewählt, abgespeichert und in die
Vorkonfiguration gewechselt. Hier dann die Daten eingetragen.


Für einen kleinen Tip währe ich sehr dankbar.

Dabei handelt es sich nur um eine Vorkonfiguration (darum heißt die so), die eigentliche Konfiguration findet dann in der entsprechenden Kategorie statt. Der Kategorie (oder dem Startartikel darin) das Template zuweisen und dann dort konfigurieren.

Hallo Dodger77.

Vielen Dank für die Info, Bilder werden mittlerweile angezeigt, aber alle untereinander.



Gruss

LaNo

[xmurrix]

Ist die CSS-Datei "/cms/css/slideshow.css" im Layout eingebunden?
Beispiel:

Code: Alles auswählen

...
<head>
...
<link rel="stylesheet" type="text/css" href="/cms/css/slideshow.css" media="all" />
</head>
...

Auch kann es sein, dass die Slideshow nicht mit allen Browsern funktioniert.(Sollte aber mit den Neuesten klappen, also mit allen Browsern, die DOM und CSS2 beherrschen).

Gruß
xmurrix

[Dodger77]

Auch kann es sein, dass die Slideshow nicht mit allen Browsern funktioniert.

Ich habe deine Beispielseite mal mit allem getestet, was ich auf der Platte habe: FF2, IE7, IE6, Opera 9 und Webkit. Das klappt alles.

[xmurrix]

Ich habe deine Beispielseite mal mit allem getestet, was ich auf der Platte habe: FF2, IE7, IE6, Opera 9 und Webkit. Das klappt alles.

Danke dir für die Info. Als reiner Windows User kann ich sowas nicht unter anderen Systemen/Browsern testen.

Gruß
xmurrix

[Dodger77]

Naja, bei mir war das auch "nur" Windows. Seit einiger Zeit kann man darauf mit Swift ja auch die Engine vom Safari testen.

[lano]

Dodger77 / xmurrix:

Nochmal vielen Dank für Eure vielen Infos.
Problem scheint an anderer Stelle zu liegen.
Die Seite, die ich vorbereite arbeitet mit "mode rewrite".
Daher hat er die falschen Linkangaben.

Mal sehen, ob ich das gebacken bekomme....




Gruss

LaNo

[Peer]

Hallo Leute,

finde das Modul total super.
Kann es nur leider nicht richtig nutzen.

Die Bilder weckseln leider nicht, sie werden einmal alle aufgerufen und überlappen sich. Es gibt keine show .

Hat jemand eine Idee wie ich das lösen kann?

Vielen Dank im vorraus.

Mit freundlichem Gruß

Peer