Example 1 - Code for a carousel on Plone 5

README.rst

Overview

This demo shows the use of jcarousel with Plone, it also provides a useful example for using the tag method for generating image tags from Plone images in a python script.

Assumptions

• You have rapido plone installed and this application is installed in your theme under the folder rapido/app/carousel/blocks
• You have a folder of images in the root of your site called "carousel"

Usage

The yaml file is used to define a view called "carousel-view". Once you've created your "carousel" folder in the root of your site and installed these files under rapido/app/carousel/blocks in your theme, you should be able to view the carousel at {yoursite.com}/carousel-view

Note: For my needs I create a folder and then adjust my script to read the carousel information from that folder. The css is embedded directly into the page template, this is purely for convience.

Next Steps

For more power, create a custom content type using dexterity and give it the ability to include a link (then you can tweak the slideshow to allow links from each image)

This could be modified to be a file system product.

carousel.pt

<style>
.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    border: 10px solid #fff;
    width: 600px;
    height: 400px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}


.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.jcarousel-wrapper .photo-credits a {
    color: #fff;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 200px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: 0;
    left: 15px;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.min.js"></script>
<script>
(function($) {
    $(function() {
        $('.jcarousel').jcarousel();

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });
})(jQuery);
</script>
        <div class="wrapper">
            <h1>Basic carousel</h1>
            <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p>
            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                    <!-- images are retrieved from a folder at the root of the portal called 'carousel' -->
                        <tal:imageitems tal:repeat="image elements/images">
                        <li><tal:img tal:replace="structure image/tag" /></li>
                    </tal:imageitems>
                                      
                    
                    </ul>
                </div>
                <p class="photo-credits">
                    Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                </p>
                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
                <p class="jcarousel-pagination">
                </p>
            </div>
</div>

carousel.py

def images(context):
    api = context.api
    portal = api.portal.get()
    content = portal['carousel']
    request = context.request
    
    return [{
              'link_class':"gl-link-{}".format(item.id),
              'title':item.Title(),
              'description':item.description,
              'tag':api.content.get_view('images', item, request).tag(scale='preview', css_class='carousel-image')
    } for item in 
              content.listFolderContents(
                      contentFilter={"portal_type" : "Image"}
                      )]

carousel.yaml

elements:
    images:
        type: BASIC
view:
    id: carousel-view
    with_theme: true