Catalog-Featured als Zufallsgalerie verwenden
Hallo!
Ich habe auf einer Seite ein Catalog-Featured eingebaut, das Referenzen zeigt.
Ausgegeben wird ein Bild und zwei Textfelder.
Wenn ich die Seite aktualisiere, dann wird eine andere Referenz angezeigt. -> Soweit so gut.
Ich hätte aber nun gerne, dass die Referenzen "durchschalten", also genau so, wie bei einer Zufallsbildergalerie.
Ist das möglich? Wenn ja, wie? -> Natürlich über Templateanpassungen, aber hat so etwas schon mal wer gemacht und kann mir Tips geben oder gibt es irgendwo ein Tutorial dazu?
Viele Grüße
Liste der Anhänge anzeigen (Anzahl: 1)
Hi,
ist noch recht rough, aber funzt.
Galerien werde ich noch einbauen, zur Zeit benutzt er einfach die Bildfelder.
Es gibt einige Einstellungen für die Slideshow, die direkt im Template oben gesetzt werden können.
Du kannst auch unterscheiden ob die Bilder als lightbox, oder auf den link des catalog Eintrags verlinken.
Die Variable dafür ist: $image_linked_to = 'catalog'; // 'lightbox', 'catalog'
Je nach dem ob 'lightbox' oder 'catalog' gesetzt ist.
Bissel Finetuning muss noch, aber im Großen und Ganzen ist das der Ansatz.
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'; // wird zur Zeit nicht benutzt :)
/**
* Slideshow settings
*/
$slideshowEffect = 'KenBurns'; // 'Fold', 'KenBurns', 'Push'
#$width = 350;
#$height = 350;
$thumbnail = true;
$captions = true;
$image_linked_to = 'catalog'; // 'lightbox', 'catalog'
$duration = 3500; // Laenge der Einblendung
$delay = 1500; // Dauer des Effekts
$loop = true;
$random = true;
$captions = false;
$controls = true;
$paused = false;
$thumbnails = false;
// -------------------------------------- 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' and must have a width="" and height="" string
if($data['type'] == 'file' && $data['meta'][0]['wh'] != '' )
{
// store image information
$arrImages[] = array(
'id' => $entry[id],
'src' => $data['meta'][0]['src'],
'thumbnail' => $data['meta'][0]['src'], // compressed image
'raw' => $data['raw'],
'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'] . "'";
if($thumbnail)
$strOptions .= ', thumbnail:' . "'" . $image['thumbnail'] . "'";
$strOptions .= '}'; // close options
$strData .= "'" . $image['raw'] . "'";
$strData .= $strOptions;
$strData .= ','; // close string
}
?>
<?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; ?>
{
height: <?php echo $arrImages[0]['height']; ?>,
width: <?php echo $arrImages[0]['width']; ?>,
delay: <?php echo $duration; ?>,
duration: <?php echo $delay; ?>,
transition: 'quad:in:out',
loop: <?php echo $loop; ?>,
paused: '<?php echo $paused; ?>',
<?php if($image_linked_to == 'lightbox'): ?>
linked: true,
<?php endif; ?>
random: '<?php echo $random; ?>',
fast: 2,
thumbnails: '<?php echo $thumbnails; ?>',
captions: '<?php echo $captions; ?>',
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="<?php echo $arrImages[0]['name']; ?>"><?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]['thumbnail']; ?>" 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>
<?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; ?>
Spiel bissel mit rum... :)
Ich baue morgen noch bissel dran.
Grüße Tim
