Carousel Module?

[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?

[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.

[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

[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.

[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).

[FCazabon]

Please forgive my slowness, but I've never done anything like this in CMSMS before.

If you want a traditional / simple carousel, review this page.

Review what page? The same page I posted?

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>

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.

[JohnnyB]

The link didn't paste in my last message... try this page: http://jquery.malsup.com/cycle2/demo/carousel.php

[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

[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.

[Rolf]

Might help http://www.cmscanbesimple.org/blog/crea ... -or-images

[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...

[FCazabon]

Might help http://www.cmscanbesimple.org/blog/crea ... -or-images

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

[FCazabon]

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?

[velden]

Better post the url of the webpage.

Using a web inspector is kind of a must to troubleshoot problems like this.

[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?