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   6970 Views

Avatar
boombox

Community Member, 44 Posts

29 July 2009 at 1:48am

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

Forum Moderator, 4096 Posts

29 July 2009 at 6:15am

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

Community Member, 43 Posts

29 July 2009 at 6:30am

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

Community Member, 44 Posts

30 July 2009 at 1:23am

Edited: 17/08/2009 11:55am

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

Community Member, 3 Posts

19 August 2009 at 2:45am

@smpmedia

what version image gallery you used for?

Avatar
boombox

Community Member, 44 Posts

19 August 2009 at 9:55am

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

Community Member, 14 Posts

4 December 2009 at 11:30am

Edited: 04/12/2009 12:20pm

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.