raptus.article.imageslider 0.3

Provides components for showing images in jquerytools scrollable carousels.

Introduction

Show contained images in a jQueryTOOLS scrollable carousel. (Does not use raptus.easyslider because jquerytools is shipped with Plone)

The reason for this being not integrated in raptus.article.slider is that the latter depends on raptus.article.nesting.

The following features for raptus.article are provided by this package:

Components

• Image Slider (Slider of images contained in the article) (XXX TODO)

• Image Slider Teaser (Slider of images contained in the article displayed above the columns)

Configuration

Configuration options can be found in portal_properties/raptus_article

images_imagesliderteaser_width

maximum width of the image displayed in the slider defaults to 5

images_imagesliderteaser_height

maximum height of the image displayed in the slider defaults to 0 (no limit)

imageslider_teaser_cropwidth/height

use this to crop image to a certain width or height

imageslider_teaser_height

maximum height of the slider (only used in case images_imagesliderteaser_height and cropheight are set to 0)

imageslider_teaser_caption (True/False)

show the description of images in the slider

imageslider_teaser_navigation (True/False)

activates the navigator plugin

imageslider_teaser_link_related (True/False)

if set to True and an image has related items, it will link to the first related item

imageslider_teaser_fadetime

The time (in milliseconds) of the scrolling animation.

imageslider_teaser_halttime

The time (in milliseconds) between autoscrolls.

TODOS

• localization

• • images for components

Dependencies

• raptus.article.images

Installation

Please refer to raptus.article.gallery for installation instructions.

Usage

Components

Navigate to the “Components” tab of your article and select one of the gallery components and press “save and view”. Note that at least one image has to be contained in the article in which this component is active.

Developer Manual

Note: You find a developer manual for raptus.article at raptus.article.core. Please have look there if you need more information.

Code overview

Components

plone.abovecontenttitle

• raptus.article.gallery.left

• raptus.article.gallery.right

plone.belowcontentbody

• raptus.article.gallery.columns

Changelog

0.3 (2014-08-25)

• It is possible to move to a specific slide using a hash in the url. (eg. plone/article#slide-5)

• Add z3c.autoinclude entry point for plone

• Show image title in caption text too (configurable via imageslider_teaser_title).

• Allow to use plone.app.imaging scales instead of raptus width/height/crop settings (via images_imagesliderteaser_scale).

• Responsive Layout by resizing the scrollable via Javascript (idea taken from http://cooshtee.com/blog/2013/04/making-jquery-tools-scrollable-responsive/)

  Set Teaser width either via css (.imageSliderTeaser) or use the images_imagesliderteaser_width property.

• register Javascript which handles registration of scrollable and events for resizing it to be responsive.

0.2 (2013-05-08)

• slider items can link to other portal content using related items (see imageslider_teaser_link_related in the README)

• pass image object to page-template too, so customized versions can use plone.app.imaging scales if the want to.

• only show navigation if there are more than 1 images

• bugfix: images overlapped due to bug in circular implementation. wrapping initialization with a timeout fixes the problem

• nicer layout for image captions using rgb() css transparency instead of opacity (similar to newsitem_view)

0.1.1 (2012-05-30)

• fix autoscroll configuration (a typo in interval prevented the settings to take effect)

0.1 (2012-05-29)

• initial release [fRiSi]