Page 1 of 2
Carousel Module?
Posted: Mon May 18, 2015 1:45 pm
by FCazabon
I am looking for a module which will give me functionality like the "Voices of Victims" area on
http://www.madd.org/
Is there something like this available already in an existing module? I am not sure if I am using the correct search term (carousel) for something like this.
If no module is available is there any way of coding this?
Re: Carousel Module?
Posted: Mon May 18, 2015 1:53 pm
by JohnnyB
You can use a plain list of images with some javascript to create a carousel slideshow. Or, you can install a module, like Gallery, which offers image gallery management and some preinstalled javascript libraries. I can't remember if there is a carousel template, but I think it does use jQuery cycle which can be used to create a carousel.
I usually add the JS to my page template and use a list of images unless the client needs to manage it themselves. Google jQuery Cycle2, download the script, download the carousel extension, and have fun.
Re: Carousel Module?
Posted: Mon May 18, 2015 2:03 pm
by FCazabon
I had looked at Gallery but couldn't find the carousel template that someone had mentioned here on the forums.
I'll Google jquery cycle2 as you suggested.
Thanks
Re: Carousel Module?
Posted: Mon May 18, 2015 3:12 pm
by FCazabon
OK, I've found something which might work here:
http://jquery.malsup.com/cycle2/demo/caro-pager.php
How do I add the code into my page?
Not sure where to find how to do this in the documentation, sorry.
Re: Carousel Module?
Posted: Mon May 18, 2015 3:22 pm
by JohnnyB
If you want a traditional / simple carousel, review this page. Add cycle2 and the required carousel plugin to your page template or Gallery template. You can use any CSS to style as wanted. Then, in your page, page template, or gallery template, use the data-cycle-fx=carousel method to initialize the carousel, just like the example(s).
Re: Carousel Module?
Posted: Mon May 18, 2015 3:33 pm
by FCazabon
Please forgive my slowness, but I've never done anything like this in CMSMS before.
JohnnyB wrote:If you want a traditional / simple carousel, review this page.
Review what page? The same page I posted?
JohnnyB wrote:Add cycle2 and the required carousel plugin to your page template or Gallery template.
How exactly do I do that? Edit the template, then paste this code in the content area?
Code: Select all
<__script__ src="http://malsup.github.io/jquery.cycle2.carousel.js"></__script>
<__script__ src="http://malsup.github.io/jquery.cycle2.tile.js"></__script>
JohnnyB wrote:You can use any CSS to style as wanted. Then, in your page, page template, or gallery template, use the data-cycle-fx=carousel method to initialize the carousel, just like the example(s).
I'm not sure what examples you are referring to, please clarify.
Thanks for your patience.
Re: Carousel Module?
Posted: Mon May 18, 2015 3:39 pm
by JohnnyB
The link didn't paste in my last message... try this page:
http://jquery.malsup.com/cycle2/demo/carousel.php
Re: Carousel Module?
Posted: Mon May 18, 2015 4:41 pm
by velden
I didn't read the whole thread but note that additional Gallery templates can be downloaded here (scroll down):
http://dev.cmsmadesimple.org/project/files/726
Re: Carousel Module?
Posted: Mon May 18, 2015 5:09 pm
by FCazabon
Thanks JohnnyB and velden. I now see the Gallery has a template called Cycle, which I guess is supposed to be similar to the cycle2 that JohnnyB was pointing out.
I'll see if that will do what I want.
Re: Carousel Module?
Posted: Mon May 18, 2015 8:13 pm
by Rolf
Re: Carousel Module?
Posted: Tue May 19, 2015 2:08 am
by Dr.CSS
I've been using cycle2 a lot lately as it is responsive unlike the older cycle, if you use it you will want to DL the full version to get the style sheet with it...
I upload it all to uploads/jq/cycle then call it in an album template or add the cycle-slideshow class to a GCB div that has a set of images in it...
Re: Carousel Module?
Posted: Tue May 19, 2015 11:43 am
by FCazabon
Thanks, that helped a bit.
What I am getting now is all 5 of my images displayed one on top the other, but with no kind of cycle effect.
I put this in the Content area of the Simplex template in CMSMS 1.12:
Code: Select all
{cms_jquery}
<__script__ type="text/javascript" src="uploads/jquery/jquery.cycle.all.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
fx: 'scrollRight',
timeout: 5000,
pause: 1
} );
} );
</__script>
And then added this to the end of an existing page:
Code: Select all
<div class="slider">
<div><img src="uploads/images/posters/PAVIPoster1.jpg" alt="Poster1" height="200" width="100" /></div>
<div><img src="uploads/images/posters/PAVIPoster2.jpg" alt="Poster2" height="200" width="100"/></div>
<div><img src="uploads/images/posters/PAVIPoster3.jpg" alt="Poster3" height="200" width="100"/></div>
<div><img src="uploads/images/posters/PAVIPoster4.jpg" alt="Poster4" height="200" width="100"/></div>
<div><img src="uploads/images/posters/PAVIPoster5.jpg" alt="Poster5" height="200" width="100"/></div>
</div>
Can you see what I am doing wrong or misunderstanding?
Thanks
Re: Carousel Module?
Posted: Tue May 19, 2015 11:47 am
by FCazabon
Dr.CSS wrote:I've been using cycle2 a lot lately as it is responsive unlike the older cycle, if you use it you will want to DL the full version to get the style sheet with it...
I upload it all to uploads/jq/cycle then call it in an album template or add the cycle-slideshow class to a GCB div that has a set of images in it...
So I would add the references as Rolf's example showed, just change it to refer to cycle2 instead of cycle, and it should work, right?
Re: Carousel Module?
Posted: Tue May 19, 2015 11:47 am
by velden
Better post the url of the webpage.
Using a web inspector is kind of a must to troubleshoot problems like this.
Re: Carousel Module?
Posted: Tue May 19, 2015 11:55 am
by FCazabon
It's actually on my local machine while I attempt to get this working so I can't show you the actual page.
Is there something more that I can post up here for you? Some screenshots or more code?