Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

This package adds a browser resource to use Cycle2 and its plugins on a Plone site.

Got an idea? Found a bug? Let us know by opening a support ticket.

To enable this package in a buildout-based installation:

1. Edit your buildout.cfg and add add the following to it:

[buildout]
...
eggs =
    collective.js.cycle2

After updating the configuration you need to run ''bin/buildout'', which will take care of updating your system.

If your page template inherits from main_template, just include the resources on it by usign the following syntax:

<metal:block fill-slot="javascript_head_slot">
  <script tal:attributes="src string:$portal_url/++resource++collective.js.cycle2/jquery.cycle2.min.js"></script>
</metal:block>

Alternatively you can add them into your site's JavaScript Registry directly or by using GenericSetup:

<?xml version="1.0"?>
<object name="portal_javascripts">
  <javascript
      cacheable="True" compression="none" cookable="True" enabled="True"
      id="++resource++collective.js.cycle2/jquery.cycle2.min.js" />
</object>

The package also includes the code for the following plugins:

• Transition

  • Carousel
  • Flip
  • IE-Fade
  • ScrollVert
  • Shuffle
  • Tile

• Functional

  • Caption2
  • Center
  • Swipe
  • YouTube

Check Cycle2 download page for more information.

The utils.js script has an utility that:

• fix the player size according with the width of the container and the aspect ratio
• vertically center images
• sync the player, description and thumbnails when click in other picture or next/prev buttons

To use the utility, you need to add the script in the same way you add Cycle2 resources:

If your page template inherits from main_template, just include the script on it by usign the following syntax:

<metal:block fill-slot="javascript_head_slot">
  <script tal:attributes="src string:$portal_url/++resource++collective.js.cycle2/utils.min.js"></script>
</metal:block>

Alternatively you can add it directly into your site's JavaScript Registry or by using GenericSetup:

<?xml version="1.0"?>
<object name="portal_javascripts">
  <javascript
      cacheable="True" compression="none" cookable="True" enabled="True"
      id="++resource++collective.js.cycle2/utils.min.js" />
</object>

And in your script you should call the utility object passing the gallery element:

$(window).load(function() {
  var i, len, ref, slideshow;
  ref = $('.slideshow-container');
  for (i = 0, len = ref.length; i < len; i++) {
    slideshow = ref[i];
    new cycle2SlideShow(slideshow);
  }
});

The script is currently used in sc.photogallery and collective.nitf.

collective.js.galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.