PHP-Code:
<?php
/**
* Catalog : Cataloglist Template with Slideshow2 Support
* @author: Tim Gatzky <info@tim-gatzky.de>
*/
?>
<?php if (count($this->entries)): ?>
<!-- include slideshow 2 scripts -->
<?php
$GLOBALS['TL_CSS'][] = 'plugins/slideshow2/css/slideshow.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.fold.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.kenburns.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.push.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.flash.js';
?>
<?php
/**
* Catalog settings
*/
$Untertitelfeld = 'description'; // Das Feld in Deinem catalog, das fuer die ie Untertitel benutzt wird
$Namesfeld = 'name'; // Das Feld in Deinem catalog, das fuer den Name des Bildes und für den Anchor title benutzt wird
$Bildfeld = 'image'; // Das Feld in Deinem catalog, aus dem die Bilder benutzt werden sollen
#$Galeriefeld = 'gallery'; // baue ich noch ein
/**
* Slideshow settings
*/
$slideshowEffect = ''; // Slideshow Effekt z.B.: 'Fold', 'KenBurns', 'Push', 'Flash'
$slideshowWidth = 800; // Breite der Slideshow
$slideshowHeight = 350; // Hoehe der Slideshow
$thumbnailPadding = 10; // Padding der Vorschaubilder
$image_linked_to = 'catalog'; // 'lightbox', 'catalog'
$duration = 3500; // Laenge der Einblendung
$delay = 1500; // Dauer des Effekts
$loop = 'true';
$random = 'true'; // Zufall
$captions = 'true'; // Untertitel
$controls = 'true'; // Slideshow-Steuerung anzeigen
$paused = 'false'; // pausiert, kein autoplay
$thumbnails = 'false'; // Vorschaubilder anzeigen
// -------------------------------------- do the work
// Gather images
$arrImages = array();
$arrUrl = array();
$arrSRC = array();
$image_linked = false; // tells the slideshow to link with a lightbox
foreach ($this->entries as $entry)
{
foreach ($entry['data'] as $field=>$data)
{
// work on image field. must be type 'file'
if($data['type'] == 'file' && $field == $Bildfeld )
{
// store image information
$arrImages[] = array(
'id' => $entry[id],
'src' => $data['meta'][0]['src'],
'thumbnail' => $data['meta'][0]['src'], // compressed image
'raw' => $data['raw'],
'size' => getimagesize($data['raw']), // can be outcommented for performance
'width' => $data['meta'][0]['w'],
'height' => $data['meta'][0]['h'],
'wh' => $data['meta'][0]['wh'],
'caption' => $entry['data'][$Untertitelfeld]['value'],
'name' => $entry['data'][$Namesfeld]['value'],
'url' => $entry['url'],
'lightbox' => $data['meta'][0]['lb']
);
$arrUrl[] = $entry['url']; // store urls
$arrSRC[] = $data['raw'];
}
}
}
// build data/images string for the slideshow
foreach($arrImages as $image)
{
$strOptions = ':{';
if($captions)
{
$strOptions .= 'caption:' . "'" . $image['caption'] . "'";
}
else
{
$strOptions .= 'caption:' . "'" . "'";
}
if($thumbnails)
$strOptions .= ', thumbnail:' . "'" . $image['thumbnail'] . "'";
$strOptions .= '}'; // close options
$strData .= "'" . $image['raw'] . "'";
$strData .= $strOptions;
$strData .= ','; // close string
}
// slideshow vars
$slideshowWidth = $slideshowWidth;
$slideshowHeight = $slideshowHeight;
$thumbnailWidth = $arrImages[0]['width'];
$thumbnailHeight = $arrImages[0]['height'];
?>
<?php $id = $this->moduleTemplate->arrData['id']; // set a unique id ?>
<div class="layout_simple catalog_slideshow<?php echo $id; ?>">
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
// Init the slideshow
var images_<?php echo $id; ?> = {<?php echo $strData; ?>};
var show_<?php echo $id; ?> =
<?php if(strlen($slideshowEffect)): ?>
new Slideshow.<?php echo $slideshowEffect; ?>('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php else: ?>
new Slideshow('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php endif; ?>
{
width: <?php echo $slideshowWidth; ?>,
height: <?php echo $slideshowHeight; ?>,
delay: <?php echo $duration; ?>,
duration: <?php echo $delay; ?>,
transition: 'quad:in:out',
thumbnails: <?php echo $thumbnails; ?>,
captions: <?php echo $captions; ?>,
loop: <?php echo $loop; ?>,
paused: <?php echo $paused; ?>,
<?php if($image_linked_to == 'lightbox'): ?>
linked: true,
<?php endif; ?>
random: <?php echo $random; ?>,
fast: 1,
controller: <?php echo $controls; ?>,
hu: '',
loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]}
});
});
//]]>
</script>
<div id="show<?php echo $id; ?>" class="slideshow">
<div class="slideshow-images">
<!-- lightbox -->
<?php if ($image_linked_to == 'lightbox'): ?><a rel="lightbox" href="#" title="<?php echo $arrImages[0]['name']; ?>"><?php endif; ?>
<!-- link to catalog -->
<?php if($image_linked_to == 'catalog'): ?><a href="<?php echo $arrImages[0]['url']; ?>" title="Katalogeintrag ansehen"><?php endif; ?>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
// grab the current href string and use it to find the corresponding catalog entry
window.addEvent('domready', function()
{
var arrA = $$('#show<?php echo $id; ?> .slideshow-images a' );
var strUrl = "<?php echo implode(',',$arrUrl); ?>";
var arrUrl = strUrl.split(',');
var strSRC = "<?php echo implode(',',$arrSRC); ?>"
var arrSRC = strSRC.split(',');
var arrTemp = new Array();
arrUrl.each(function(elem, index)
{
arrTemp[index] = new Array(elem, arrSRC[index]);
});
// set a new href for the clicked image
arrA.addEvents({
'click' : function()
{
var src = this.getElement('img').get('src');
var newHref = '';
arrTemp.each(function(elem, index)
{
if(elem[1] == src )
{
newHref = elem[0];
}
});
// set href
this.set('href',newHref);
}
});
});
//--><!]]>
</script>
<img id="slide<?php echo $id; ?>-<?php echo $arrImages[0]['id']; ?>" src="<?php echo $arrImages[0]['src']; ?>" width="<?php echo $arrImages[0]['w']; ?>" height="<?php echo $arrImages[0]['h']; ?>" alt="<?php echo $arrImages[0]['name']; ?>" />
<?php if ($image_linked_to != ''): ?></a><?php endif; ?>
</div>
</div>
</div>
<!-- stylesheet -->
<style type="text/css">
#show<?php echo $id; ?> {
width:<?php echo $slideshowWidth; ?>px;
height:<?php echo $slideshowHeight + $thumbnailHeight + $thumbnailPadding; ?>px;
<?php if($this->play_image): ?>background: transparent url(<?php echo $this->play_image; ?>) top center no-repeat;<?php endif; ?>
}
#show<?php echo $id; ?> .slideshow-images {
width:<?php echo $slideshowWidth; ?>px;
height:<?php echo $slideshowHeight; ?>px;
}
<?php if($captions == true): ?>
/* Captions - Untertitel */
#show<?php echo $id; ?> .slideshow-captions {
width:<?php echo $slideshowWidth; ?>px;
bottom:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
}
.slideshow-captions-visible {
height:30px;
opacity: .7;
}
<?php endif; ?>
<?php if($controls): ?>
/* Controls - Steuerung */
#show<?php echo $id; ?> .slideshow-controller {
margin:-44px 0 0 -119px;
top:50%;
}
<?php endif; ?>
<?php if($thumbnails): ?>
/* Thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails {
height:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
width:<?php echo $slideshowWidth; ?>px;
bottom:0;
left:0;
overflow:auto;
}
#show<?php echo $id; ?> .slideshow-thumbnails ul {
height:<?php echo $thumbnailHeight; ?>px;
width:<?php echo ( ($thumbnailWidth + $thumbnailPadding) * count($arrImages) ); ?>px;
}
/* Add a margin to the thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails li {
margin:0;
}
#show<?php echo $id; ?> .slideshow-thumbnails a {
float:left;
opacity:.5;
background-color: #FFF !important;
}
#show<?php echo $id; ?> .slideshow-thumbnails a:hover {
background-color: #000 !important;
opacity: 1;
}
#show<?php echo $id; ?> .slideshow-thumbnails a img {
border:0;
}
<?php endif; ?>
</style>
<?php else: ?>
<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>
<?php endif; ?>
Catalog-Featured als Zufallsgalerie verwenden
Zitat von ElMariachi
Lesezeichen