Image gallery

controller.php

function view() {
        $this->loadBlockInformation();

        $ih = Loader::helper('image');

        $images = $this->images; // they are loaded
        
        if($this->activateRandom == true)
        {
            shuffle($images);
           // Log::addEntry('Activate Random is true, array is: '.print_r($images,true));
        }else{
            // Log::addEntry('Activate Random is false, array is: '.print_r($images,true));
        }
        
        $result_images = array();
        $max_img_height = 0;
        foreach ($images as $imgInfo) {
            $image = array();

            $f = File::getByID($imgInfo['fID']);
            $path = $f->getRelativePath();

            $thumb = $ih->getThumbnail($f, $this->thumbWidth, $this->thumbHeight, (bool) $this->cropThumbnails);
            $image['thumb_src'] = $thumb->src;
            $image['thumb_width'] = $thumb->width;
            $image['thumb_height'] = $thumb->height;
            $max_img_height = ($thumb->height > $max_img_height) ? $thumb->height : $max_img_height;

            //$full = $ih->getThumbnail($f, $this->fullWidth, $this->fullHeight);
            // 2DO: do this as a setting? is this necessary? depends on browser?
            // test with smaller browser window?
            $full = $ih->getThumbnail($f, 800, 600);
            $image['full_src'] = $full->src;
            $image['full_width'] = $full->width;
            $image['full_height'] = $full->height;
            $max_row_height = ($thumb->height > $max_row_height) ? $thumb->height : $max_row_height;

            // 2DO: here we maybe have to choose where the title comes from fileset (->filemanager) or custom -> from related database table
            $image['title'] = htmlspecialchars($file['title'], ENT_QUOTES, 'UTF-8');

            $result_images[] = $image;
        }

        $this->set('images', $result_images);
        $this->set('max_row_height', $max_row_height);
    }

view.php

<?php
defined('C5_EXECUTE') or die("Access Denied.");
global $c;
$html = Loader::helper('html');
$displayColumns = $columnCount; // from db
$column_width = (100 / $displayColumns) . "%";
$rel = "fancybox{$bID}"; //Avoid conflict with other js lightboxes, and isolate each block's prev/next nav to one gallery only.
$image_count = 0;
?>
<style type="text/css">
    /* you can style the thumbnail links here */
    /* #indizioFancybox2GalleryImageThumbs<?php echo $bID; ?> a{} */
</style>

<div class="indizio-fancybox2-gallery-block gallery" id="indizioFancybox2GalleryImage<?php echo $bID; ?>">
    <div class="indizio-fancybox2-gallery">
        <?php foreach ($images as $img): ?>
            <div class="indizio-fancybox2-gallery-image" style="<?php if ($image_count >= $maxImages) {
                echo 'display:none;';
            } ?>height: <?php echo $max_row_height; ?>px; width: <?php echo $column_width; ?>;">
                <a href="<?php echo $img['full_src']; ?>" rel="<?php echo $rel; ?>" title="<?php echo $img['description']; ?>">
                    <?php
                    // show thumb only when necessary 
                    if ($image_count < $maxImages) {
                        echo $html->image($img['thumb_src'], $img['thumb_width'], $img['thumb_height'], array('alt' => $img['title']));
                    }
                    ?>
                </a>
            </div>
    <?php $image_count++; ?>
<?php endforeach; ?>
    </div>
    <a class="btn sortable_gallery_button" id="gallery_button_<?php echo $rel; ?>" href>Galerie anzeigen</a>
</div>



<script type="text/javascript">
    $(function(){
        $('a[rel="<?php echo $rel; ?>"]').fancybox({
            
            openEffect  : 'fade',

            nextEffect  : 'fade',
            nextSpeed   : '100',
            nextEasing  : '100',

            prevEffect : 'fade',

            helpers	: {
                title	: {
                    type: 'outside'
                },
                overlay	: {
                    opacity : 0.8,
                    css : {
                        'background-color' : '#000'
                    }
                },
                thumbs	: {
                    width	: 50,
                    height	: 50
                }
            }
        });
        
        $('#gallery_button_<?php echo $rel; ?>').live('click',function(e){
            e.preventDefault();
            $('a[rel="<?php echo $rel; ?>"]').first().trigger('click');
        });
        
    });
</script>