Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

DataObjectManager Module

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, biapar, Willr, Ingo, swaiba, simon_w

Image Gallery - Galleria Slideshow


Reply

7 Posts   6235 Views

Avatar
boombox

29 July 2009 at 1:48am Community Member, 44 Posts

Greetings
I have integrated the Galleria Slideshow functionality (JQuery - http://devkick.com/lab/galleria/) to the Image Gallery Module
Its great for a lightweight slideshow (non pop up)

Here's the code I have implemented - testing and feedback appreciated - lets make this a reusable snippet!

in class ImageGalleryPage

######################
line 245 Add
         case "None":
            self::includeForGalleria();
         break;
######################
line 250 Replace custom script with

Requirements::customScript("
         

         //Cycle slideshow

         $(function() {
          $('#slideshow1').cycle();

          $('#slideshow2').cycle({
          prev: '#prev',
          next: '#next',
          timeout: 0
          });

          $('#slideshow3').cycle({
          delay: 2000,
          speed: 500,
          before: onBefore
          });

          function onBefore() {
          $('#title').html(this.alt);
          }
         });
      ");

######################
line 312 Add

   private static function includeForGalleria()
   {
      Requirements::javascript('mysite/javascript/jquery.galleria.js');

      Requirements::css('mysite/css/galleria.css');
   
   }

######################
line 453 Add

public function GallerySlideShow() {
      return $this->GalleryItems($this->renderWith("GallerySlideShow"));
   }

####################

Template View

Include <% GallerySlideShow %>

####################

<div id="slideshow3" style="position: relative;" class="pics">
   <% control GalleryItems %>
      <img src="$ViewLink" alt="$Title" />
   <% end_control %>
</div>

Avatar
UncleCheese

29 July 2009 at 6:15am 4085 Posts

Can you post a link to this site so I can see what it looks like? Then I'll add it into the module if it looks good.

Avatar
Platypus

29 July 2009 at 6:30am Community Member, 43 Posts

Here you can see a demo, it looks quite nice IMHO. [url]http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg[/url]

Avatar
boombox

30 July 2009 at 1:23am (Last edited: 17 August 2009 11:55am), Community Member, 44 Posts

Hi Ya
Here's my working demo with the Slideshow (Jquery Cycle)
http://lashikabridal.smpmedia.co.nz/

I have actually added a second type of slideshow called Cycle as well

#################
Code added to ImageGalleryPage.php
#################
case "Slideshow":
   self::includeForCycle();
break;

#################
The Custom Javascript is

Requirements::customScript("
// For Galleria Rollover
jQuery(function($) { $('ul.gallery-layout').galleria(); });

//For Cycle slideshow

         $(function() {
          $('#slideshow1').cycle();

          $('#slideshow2').cycle({
          prev: '#prev',
          next: '#next',
          timeout: 0
          });

          $('#slideshow3').cycle({
          delay: 2000,
          speed: 500,
          before: onBefore
          });

          function onBefore() {
          $('#title').html(this.alt);
          }
         });

####################

// Additional scripts required

   // No Popups
   private static function includeForGalleria()
   {
      Requirements::javascript('mysite/javascript/jquery.galleria.js');

      Requirements::css('mysite/css/galleria.css');
   
   }
   // Slideshow
   private static function includeForCycle()
   {
      Requirements::javascript('mysite/javascript/jquery.cycle.lite.js');

      Requirements::css('mysite/css/cycle.css');
   
   }

###############

// Add Template View for Slideshow

public function GallerySlideShow() {
return $this->GalleryItems($this->renderWith("GallerySlideShow"));
}

####################

Template View

Include <% GallerySlideShow %>

####################

<div id="slideshow3" style="position: relative;" class="pics">
<% control GalleryItems %>
<img src="$ViewLink" alt="$Title" />
<% end_control %>
</div>

Avatar
triasada

19 August 2009 at 2:45am Community Member, 3 Posts

@smpmedia

what version image gallery you used for?

Avatar
boombox

19 August 2009 at 9:55am Community Member, 44 Posts

Hi
I used the latest image gallery trunk from SVN (r228)
http://carlinowebdesign.svn.beanstalkapp.com/modules/trunk/image_gallery

Note: Uncle Cheese is going to be integrating a feature to allow easy integration of thrird party jquery (such as galleria) into the image gallery
http://www.silverstripe.org/dataobjectmanager-module-forum/show/265958?start=0#post267040

Avatar
Rockshox

4 December 2009 at 11:30am (Last edited: 4 December 2009 12:20pm), Community Member, 14 Posts

Hello.

Has the Image gallery module been updated since the above Galleria instructions where written? The line numbers appear to be different. I apologise if I am wrong (very new to SS), but I am having problems following along.

Would it be possible to get a copy of the amended Galleria ImageGalleryPage.php page? Or some more up-to-date info/help?

Uncle Cheese, do you still intend to integrate Galleria into your module?

Thanks in advance.