CONTENIDO Forum

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

?>

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>

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>

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

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

Code: Alles auswählen

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