Nivoslider
Template #1 ist sowohl für die Liste, als auch den Katalog-Leser interessant und erstellt aus gegebenen Bild-/Galerie-Feldern Nivoslider Galerien mit/ohne Thumbnails etc.
Einbindung:
Nach dem normalen Erstellen der Katalog-Felder für Dateien, muss im Template lediglich oben die Variable:
PHP-Code:
$arrImageFields = array('multiSRC');
angepasst werden.
(Hier können auch mehrere Felder ergänzt werden)
(meins heisst gerade "multiSRC")
Darunter die Einstellungen für eventuelle Thumbnails.
Hinweis:
Ggf. die Pfade zu den Scripten anpassen. (Installation der Scripte nicht vergessen 
)
PHP-Code:
<?php
/**
* Catalog reader/list nivoslider template
* @credits http://nivo.dev7studios.com/
* @credits https://github.com/contao-catalog
* @author Tim Gatzky <info@tim-gatzky.de>
*/
?>
<?php if (count($this->entries)): ?>
<?php // settings
// catalog fields for image source
$arrImageFields = array('multiSRC');
$thumbs = true;
// thumbnail settings
$width = 50;
$height = 50;
$mode = 'center_center'; // proportional, box, left_top, center_top, right_top, left_center, center_center, right_center, left_bottom, center_bottom, right_bottom
?>
<?php // include jquery and nivoslider scripts
$path = $this->replaceInsertTags('{{env::path}}'); #fix: contao not parsing correct path to file
$GLOBALS['TL_JAVASCRIPT'][] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = $path.'plugins/nivo-slider/jquery.nivo.slider.js';
$GLOBALS['TL_CSS'][] = $path.'plugins/nivo-slider/nivo-slider.css';
$GLOBALS['TL_HEAD'][] = '<script>$.noConflict();</script>';
?>
<?php // generate thumbs
$arrThumbs = array();
$cssParams = array();
if($thumbs)
{
foreach ($this->entries as $entry)
{
foreach($entry['data'] as $field=>$data)
{
if(!in_array($field, $arrImageFields) || count($data['files']) < 1){continue;}
// create thumbs
foreach($data['files'] as $file)
{
$arrThumbs[] = $this->getImage($file,$width,$height,$mode);
}
}
}
}
?>
<div class="layout_full gallery nivoslider">
<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php if($entry['linkEdit']): ?><?php echo $entry['linkEdit']; ?><?php endif; ?>
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo'))): ?>
<?php // build nivo slider html
if(in_array($field,$arrImageFields) && count($data['files']) > 0): ?>
<div class="field <?php echo $field; ?> slider-wrapper">
<div class="slider_inner cat_slider_<?php echo $entry['pid'].'_'.$entry['id'];?>">
<?php foreach($data['meta'] as $i => $file): ?>
<?php // build html image
$strThumb = '';
if($thumbs) {$strThumb = 'data-thumb="'.$arrThumbs[$i].'"'; }
$params = array($file['wh'], $strThumb);
$strImage = sprintf('<img src="%s" alt="%s" %s />', $file['src'], $file['alt'], implode(' ', $params));
echo $strImage;
$cssParams['width'] = $file['w'];
$cssParams['height'] = $file['h'];
?>
<?php endforeach; ?>
</div>
</div>
<?php else: // handle normal catalog fields as fallback ?>
<div class="field <?php echo $field; ?>">
<div class="label"><?php echo $data['label']; ?></div>
<div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php #fix nivoslider css width failure
$strStyle = '.cat_slider_'.$entry['pid'].'_'.$entry['id'].'{width:'.$cssParams['width'].'px; margin:auto;}';
$GLOBALS['TL_HEAD'][] = '<style>'.$strStyle.'.</style>';
?>
<script type="text/javascript">
/* <![CDATA[ */
/**
* Nivoslider
*/
// A list of all settings can be found here: http://nivo.dev7studios.com/support/jquery-plugin-usage/
jQuery(document).ready(function($)
{
$('.cat_slider_<?php echo $entry['pid'] .'_'. $entry['id'];?>').nivoSlider(
{
effect: 'sliceDown', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 800, // Slide transition speed
pauseTime: 4500, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: '<?php echo $thumbs; ?>', // Use thumbnails for Control Nav
keyboardNav: true,
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false // Start on a random slide
});
});
/* ]]> */
</script>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info"><?php echo $this->noItemsMsg; ?></p>
<?php endif; ?>
Catalog Templates: Nivoslider und SlideItMoo
Zitat von Tim G
Lesezeichen