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!