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

Image Gallery - Galleria Slideshow


Go to End
Reply


7 Posts   7649 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, 4102 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. http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg

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.