• Edit
  • Delete

ullCms colorbox gallery / lightbox popup

http://www.jacklmoore.com/colorbox/

Supports responsive autosizing

ColumnsConfig

    $this['gallery']
      ->setLabel(__('Images', null, 'ullCmsMessages'))
      ->setMetaWidgetClassName('ullMetaWidgetGallery')
      ->setOption('image_width', 1600)
      ->setOption('image_height', 1200)
      ->setOption('generate_thumbnails', true)
      ->setOption('thumbnail_width', 300)
      ->setOption('thumbnail_height', 600)      
      ->setHelp(__('Images are automatically resized. Drag images around to sort.', 
        null, 'ullCmsMessages'))
    ;

Template

    <div id="gallery_images">
      <?php foreach (ullWidgetGalleryWrite::getImagesAsArray($doc->gallery) as $image): ?>
        <div class="gallery_image">
          <?php $thumbnail = ullCoreTools::calculateThumbnailPath($image) ?>
          <?php echo link_to(ull_image_tag_rimg($thumbnail), $image, 'class=gallery_image_link') ?>
        </div>
      <?php endforeach ?>
    </div>  


<?php use_javascript('/ullCorePlugin/js/jq/jquery.colorbox-min.js') ?>
<?php use_stylesheet('/ullCorePlugin/css/jquery.colorbox/colorbox.css') ?>

<?php echo javascript_tag('
    
$(document).ready(function() {    
    
  $("a.gallery_image_link").colorbox({
    rel: "gallery_image_link",
    scalePhotos: true,
    maxHeight: "100%",
    maxWidth: "100%"    
  });    

});
       
') ?>