Jump to:

7937 Posts in 1537 Topics by 944 members

DataObjectManager Module

SilverStripe Forums » DataObjectManager Module » Image Gallery - Galleria Slideshow

Discuss the DataObjectManager module, and the related ImageGallery module.

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

Page: 1
Go to End
Author Topic: 6093 Views
  • boombox
    Avatar
    Community Member
    44 Posts

    Image Gallery - Galleria Slideshow Link to this post

    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>

  • UncleCheese
    Avatar
    4085 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

    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.

  • Platypus
    Avatar
    Community Member
    43 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

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

  • boombox
    Avatar
    Community Member
    44 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

    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>

  • triasada
    Avatar
    Community Member
    3 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

    @smpmedia

    what version image gallery you used for?

  • boombox
    Avatar
    Community Member
    44 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

    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

  • Rockshox
    Avatar
    Community Member
    14 Posts

    Re: Image Gallery - Galleria Slideshow Link to this post

    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.

    6093 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.