In this tutorial I will explain how to make an easy website gallery using some SilverStripe modules and Lightbox 2 javascript!
- Download the needed files: 1. Lightbox 2 , 2. Uploadify , 3. Dataobjectmanager .
- Upload content of uploadify to ‘uploadify’ folder and dataobjectmanager to ‘dataobject_manager’ folder.
- Make folder ‘js’ into themes/yourtheme/ folder
- 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.
- 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; }
- 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 { } ?>
- 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') ); } } ?>
- 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>
- Add the lightbox css to your themes/yourteheme/templates/Page.ss using following line inside the <head> area:
<% require themedCSS(lightbox) %>
- Rebuild website database using www.yoursitename.com/dev/build?flush=1
Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!