Catalog Templates: Nivoslider und SlideItMoo

**Tim G** · 29.10.2012, 11:00

Katalog-Leser/Liste: Nivoslider Galerie

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

Angehängte Dateien

catalog_nivoslider.zip (57,4 KB, 19x aufgerufen)

**Tim G** · 29.10.2012, 11:05

Katalog-Liste SlideItMoo

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:

PHP-Code:

$slideVertical = true;
$itemWidth = 190;
$itemHeight = 120;
$strPrevious = 'Previous'; // can be any html
$strNext = 'Next'; // can be any html

Die Einstellungen zum Slider selbst sind unterhalb des HTMLs zu finden.

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

Angehängte Dateien

catalog_slideitmoo.zip (54,9 KB, 17x aufgerufen)

**cont77** · 02.04.2013, 13:17

Zitat von Tim G Beitrag anzeigen

Template #2 nutzt das SlideItMoo Script. Auch bekannt von der gleichnamigen Erweiterung.

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.

**Tim G** · 02.04.2013, 13:51

Zitat von cont77 Beitrag anzeigen

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.

Schau einfach in der plugin CSS wie die Klassen heissen und passe diese ggf. an.

Bei dem SlideItMoo reicht eigentlich ein float:left; für die inneren Items um diesen horizontal darzustellen.

Catalog Templates: Nivoslider und SlideItMoo

Catalog Templates: Nivoslider und SlideItMoo

Kommentar

Kommentar

Kommentar

Kommentar