Hallo,
anbei zwei Template-Lösungen für den Katalog. Samuell hatte mich gebeten diese zu veröffentlichen.
Also dann...
Hallo,
anbei zwei Template-Lösungen für den Katalog. Samuell hatte mich gebeten diese zu veröffentlichen.
Also dann...
http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.
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:
angepasst werden.PHP-Code:
$arrImageFields = array('multiSRC');
(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; ?>
Geändert von Tim G (29.10.2012 um 10:10 Uhr)
http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.
Template #2 nutzt das SlideItMoo Script. Auch bekannt von der gleichnamigen Erweiterung.
Mit dem Template ist es möglich Katalog-Einträge durchsliden zu lassen. Jeder Eintrag ist ein Slider-Element. Daher bezieht sich das Template auch eher auf eine Katalog-Liste.
Einstellungen:
Im Template oben die entsprechenden Variablen anpassen. Ist alles recht selbsterklärend:
Die Einstellungen zum Slider selbst sind unterhalb des HTMLs zu finden.PHP-Code:
$slideVertical = true;
$itemWidth = 190;
$itemHeight = 120;
$strPrevious = 'Previous'; // can be any html
$strNext = 'Next'; // can be any html
Auch hier gilt: Ggf. die Pfade anpassen und die JS Scripte nicht vergessen.
PHP-Code:
<?php
/**
* Catalog list/reader slideitmoo template
* @credits http://www.php-help.ro/php-tutorials/slideitmoo-v11-image-slider/
* @credits https://github.com/contao-catalog
* @author Tim Gatzky <info@tim-gatzky.de>
*/
?>
<?php if (count($this->entries)): ?>
<?php // settings
$slideVertical = true;
$itemWidth = 190;
$itemHeight = 120;
$strPrevious = 'Previous'; // can be any html
$strNext = 'Next'; // can be any html
?>
<?php
// include slideitmoo script
$path = $this->replaceInsertTags('{{env::path}}'); #fix: contao not parsing correct path to file
$GLOBALS['TL_JAVASCRIPT'][] = $path.'plugins/slideitmoo_orig/script/slideitmoo-1.2-mootools-1.3.js';
?>
<?php // unique id
$unique = $this->moduleTemplate->id;
?>
<div id="SlideItMoo_outer_<?php echo $unique; ?>" class="layout_full slider_wrapper slider_outer slideItMoo">
<div class="SlideItMoo_back"><?php echo $strPrevious; ?></div>
<div id="SlideItMoo_inner_<?php echo $unique; ?>" class="slider_inner">
<div id="SlideItMoo_items_<?php echo $unique; ?>" class="slider_items">
<?php foreach ($this->entries as $entry): ?>
<div class="item block <?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'))): ?>
<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 endforeach; ?>
<?php if ($entry['showLink'] && $entry['link']): ?>
<div class="link"><?php echo $entry['link']; ?></div>
<?php endif; ?>
<?php if ($entry['linkEdit']): ?>
<div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
<?php endif; ?>
</div> <!-- item // end -->
<?php endforeach; ?>
</div> <!-- slider_items // end -->
</div> <!-- slider inner // end -->
<div class="SlideItMoo_forward"><?php echo $strNext; ?></div>
</div> <!-- slider wrapper // end -->
<?php // add styles because original css uses fix ids and we use dynamic ids
$strStyle = '#SlideItMoo_inner_'.$unique.'{position:relative;overflow:hidden; width:auto; /* set a display width to make the slider look good in case js is disabled */}';
if(!$slideVertical){$strStyle .= '#SlideItMoo_items_'.$unique.' .item {float:left; max-width:'.$itemWidth.'; max-height:'.$itemHeight.';}';}
$GLOBALS['TL_HEAD'][] = '<style>'.$strStyle.'.</style>';
?>
<script type="text/javascript">
/* <![CDATA[ */
/**
* SlideItMoo
*/
// A list of all settings can be found here: http://www.php-help.ro/php-tutorials/slideitmoo-v11-image-slider/
window.addEvent('domready', function()
{
new SlideItMoo({
overallContainer: 'SlideItMoo_outer_<?php echo $unique; ?>',
elementScrolled: 'SlideItMoo_inner_<?php echo $unique; ?>',
thumbsContainer: 'SlideItMoo_items_<?php echo $unique; ?>',
itemsVisible:1,
elemsSlide:1,
duration:300,
autoSlide:4500,
itemsSelector: '.item',
itemWidth: '<?php echo $itemWidth; ?>',
itemHeight: '<?php echo $itemHeight; ?>',
slideVertical: '<?php echo $slideVertical; ?>',
showControls:1,
startIndex:0,
transition:Fx.Transitions.Quad.easeOut,
duration: 800,
direction:1
});
});
/* ]]> */
</script>
<?php else: ?>
<p class="info"><?php echo $this->noItemsMsg; ?></p>
<?php endif; ?>
http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.
Hallo Tim,
vielen Dank für das tolle Template! Funktioniert gut!
Allerdings habe ich noch Schwierigkeiten das Template mit den css zusammen zu bringen.
Die classen und ids im Template scheinen nicht mit denen in den css überein zu stimmen.
Gibt es einen Trick? Oder hast Du da noch einen Tipp, wie man die Formatdefinitionen am schnellsten anwendet?
Danke & Grüße.
http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen