Make a Gallery Using Lightbox 2 and SilverStripe CMS

In this tutorial I will explain how to make an easy website gallery using some SilverStripe modules and Lightbox 2 javascript!

  1. Download the needed files: 1. Lightbox 2 , 2. Uploadify , 3. Dataobjectmanager .
  2. Upload content of uploadify to ‘uploadify’ folder and dataobjectmanager to ‘dataobject_manager’ folder.
  3. Make folder ‘js’ into themes/yourtheme/ folder
  4. Upload the lightbox 2 files: 1. css/lightbox.css to themes/yourtheme/css folder.  2. js/lightbox-2.6.min.js and js/jquery-1.10.2.min.js to themes/yourtheme/js folder. 3. img/close.png, img/loading.gif, img/next.png and img/prev.png to themes/yourtheme/images folder.
  5. Make some changes in themes/yourtheme/css/lightbox.css:
    body:after {
      content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
      display: none;
    }
    
    change to
    
    body:after {
      content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
      display: none;
    }
    ---------
    .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(../img/loading.gif) no-repeat;
    }
    
    change to
    
    .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(../images/loading.gif) no-repeat;
    }
    ----------
    .lb-prev:hover {
      background: url(../img/prev.png) left 48% no-repeat;
    }
    
    change to
    
    .lb-prev:hover {
      background: url(../images/prev.png) left 48% no-repeat;
    }
    ----------
    .lb-next:hover {
      background: url(../img/next.png) right 48% no-repeat;
    }
    
    change to
    
    .lb-next:hover {
      background: url(../images/next.png) right 48% no-repeat;
    }
    ----------
    .lb-data .lb-close {
      display: block;
      float: right;
      width: 30px;
      height: 30px;
      background: url(../img/close.png) top right no-repeat;
      text-align: right;
      outline: none;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;
    }
    
    change to
    
    .lb-data .lb-close {
      display: block;
      float: right;
      width: 30px;
      height: 30px;
      background: url(../images/close.png) top right no-repeat;
      text-align: right;
      outline: none;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;
    }
  6. Make gallery page-type called ‘Lightbox’ by adding file to ‘mysite/code/Lightbox.php’ :
    <?php
    class Lightbox extends Page
    {
    	static $has_many = array (
    	'LightboxGalleryImages' => 'LightboxGalleryImage' 
    	);
    	public function getCMSFields()
    	{
    		$f = parent::getCMSFields();
    		$f->removeFieldFromTab("Root.Content.Main","Content");
    		$manager = new ImageDataObjectManager( 
    		$this, 
    		'LampvoimGalleryImages', // Source name
    		'LampvoimGalleryImage', // Source class
    		'LampvoimMyGalleryImage' // File name on DataObject
    		), 
             'getCMSFields_forPopup' 
          ); 
          $f->addFieldToTab('Root.Content.Main', $manager); 
          return $f; 
    	}
    }
    class Lightbox_Controller extends Page_Controller
    {
    }
    ?>
  7. Add file ‘mysite/code/LightboxGalleryImage.php’ :
    <?php
    class LightboxGalleryImage extends DataObject {
       static $db = array (
       );
       static $has_one = array (
          'LightboxMyGalleryImage' => 'Image', //relation needed for this DataObject
          'BelongToLightbox' => 'Lightbox' //relation needed to point back to your pagetype, my pagetype is EventPage.
       );
    
       public function getCMSFields_forPopup()
       {
          return new FieldSet(
             new FileIFrameField('LightboxMyGalleryImage')
          );
       }
    }
    ?>
  8. Make theme file called ‘Lightbox.ss’ under ‘themes/yourteheme/templates/Layout’ folder and add line to it like so:
    <div class="typography">
    <h2>$Title</h2>
    <% control LightboxGalleryImages %>
    <% control LightboxMyGalleryImage %><div class="picture"><a href="$SetHeight(500).URL" rel="lightbox[Gallery]" title="">$Setwidth(120)</a></div><% end_control %> 
    <% end_control %>
    </div>
    <script src="themes/yourteheme/js/jquery-1.10.2.min.js"></script>
    <script src="themes/yourteheme/js/lightbox-2.6.min.js"></script>
  9. Add the lightbox css to your themes/yourteheme/templates/Page.ss using following line inside the <head> area:
    <% require themedCSS(lightbox) %>
  10. Rebuild website database using www.yoursitename.com/dev/build?flush=1

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 5 = 9

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>