Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
aro_slideshow v2
aro_slideshow
Slideshow is a javascript class to stream and animate the presentation of images on your website. Here is an example.
Download: aro_slideshow.txt (Textpattern plugin 2.0.1)
Download: slideshow.js (Javascript class RC2)
About This Plugin
This plugin is about 95% code from Stef Dawson’s smd_slimbox. Quite simply, as another Mootools based plugin, Stef has set the standard as to naming conventions, dynamism and control that Textpattern users expect. Rather than attempt to start from zero, I would rather stand on the shoulders of giants. As such, please reference the smd_slimbox thread as to the detailed usage of the plugin, the help here only outlines functionality specific to slideshow.
Setup
Note: this plugin does not have a corresponding tag to Stef’s smd_slimbox_inc. In order to avoid conflicts with the plugin of the same, and because slideshow does not include a standard set of css and images as with slimbox, I thought it would be easiest to just add the javascript tags manually. So…
If you are currently using the Mootools javascript framework in your website, simply make sure that the version you are using includes Dom, Fx.Style, Fx.Styles, Fx.Elements and Fx.Transitions modules.
Otherwise download a prepared copy of mootools.js and add a link in the head of your HTML document:
<script src="<txp:site_url />js/mootools.js" type="text/javascript"></script>Next download a copy of slideshow.js if you have not done so already and add a link following Mootools:
<script src="<txp:site_url />js/mootools.js" type="text/javascript"></script>
<script src="<txp:site_url />js/slideshow.js" type="text/javascript"></script>Note: the order in which the files are linked: first mootools.js then slideshow.js. This is important.
Usage
Use <txp:aro_slideshow /> in an article form to generate an animated presentation of images. Without any options it will display every image in your entire collection. Use the following parameters to filter the images and the order in which they will appear:
imageid, category, catlabel, limit and orderby
Again, please see smd_slimbox for the latest usage details of the above. The following parameters are specific to slideshow:
show
If you would like your slideshow to include captions set show="caption" or show="alt". The captions are rendered in a <p> tag inside of the slideshow element. default is none.
wraptag
The slideshow is wrapped inside of an HTML block element. By default this element is a div, but if for some reason you would like to make it something else you can set it here.
wrapclass
The CSS class of the wrapper element. Default is slideshow.
The following options refer specifically to the Slideshow javascript class. More information can be found here.
duration
This is bracketed array of 2 values, in milliseconds (1000 = 1 second). The first value is the duration of the transition effect. The second value is the duration of the time between slide changes. For example, duration="[1000, 4000]" would have 4 seconds between transitions lasting 1 second each. Default is [2000, 4000].
prevclass, nextclass, activeclass
These 3 parameters correspond to CSS classes used for navigation elements. prevclass and nextclass are used by arrows and arrows+ type navigation. activeclass is used by arrows+ and thumbnails type navigation. The classes are applied to anchors (links) inside of the navigation element (an unordered list). See below for more details on styling your slideshow. Defaults are prev, next, and active.
height, width
Height and width of the slideshow in pixels. For example height="300" width="400". It is recommended to choose a number less than the height and/or width of the smallest image in the slideshow. If unset height and width default to the corresponding height and width of the first image in the slideshow.
navigation
Optional navigation controls. May be one of 3 different modes: arrows, arrows+ and thumbnails. All three generate an unordered list <ul> inside of the slideshow element. See below for more details on styling your slideshow. Additionally you can call any of the navigation modes with the fast keyword to skip transitions when interacting with the slideshow. For example, navigation: 'thumbnails fast'. Default is unset.
pan, zoom
If using pan, zoom or combo type slideshows, you can further control animation by specifying the amount of panning or zooming. Either accepts a number between 0 (no pan / zoom) or 100 (maximum pan / zoom) or the keyword rand which will determine random panning / zooming for each slide. For example, pan="25" zoom="rand" which will feature a slideshow with minimal panning and random zooming. Note: that the degree of panning in particular is further determined by the proportion of the image to the dimensions of the slideshow: a landscape (width > height) format image in a landscape format slideshow will always feature less panning than the same image in a portrait (height > width) format slideshow. Default is maximum panning (100) and average zooming (50).
resize
In Microsoft Windows, images are distorted when resized. As such it might be desirable to call resize="false" to disable image resizing. Note: images will always be resized for zoom, pan and combo type slideshows. Default is true.
transition
If the version of Mootools used with the slideshow includes Fx.Transitions (such as the version included with the plugin), you can use any of the Robert Penner easing equations with push or wipe type slideshows. For a full list of the available equations see the Mootools docs. Default is Fx.Transitions.sineInOut.
type
Choose one of 6 different types of slideshows: fade, wipe, push, pan, zoom and combo (also known as the Ken Burns Effect). Default is fade.
The following are advanced options to be used with slideshow packs. Packs are pre-configured versions of the slideshow with included CSS, images and enhanced functionality. More information will be available here here.
slideshow_var
The javascript variable that each instance of the class is set to. For example (javascript), myShow = new Slideshow();. Default is myShow.
callback
Extra javascript to add enhanced functionality / effects to a sideshow instance. Note: javascript should be packed (without linebreaks, etc..) and naturally cannot include single or double-quotes that will conflict with the Textpattern parameter. Use the variable defined above (default myShow) to reference the slideshow instance. For example, callback="myShow.ul.setStyle('height', '0px');" will dynamically reposition the navigation element as the page loads. This parameter is intended to be used with pre-configured slideshow packs, but feel free to experiment and have fun. Elements that may be manipulated include myShow.ul (slideshow navigation), myShow.p (slideshow captions), myShow.div (slideshow image wrapper) and of course all their corresponding child nodes.
Styling Your Slideshow
If you view the source of your HTML page with the slideshow plugin you will see that slideshow generates the first image of the slideshow and the wrapper element defined above. It should look something like this:
<div class="slideshow" id="slideshow0">
<img src="http://your.textpattern.site/images/1.jpg" alt="some description" width="400" height="300" />
</div>However, assuming javascript is enabled, slideshow will manipulate the HTML differently than it appears. How it manipulates the HTML depends on the parameters it was called with. If called with navigation it will add a <ul> elements. If called with captions it will add a <p>. The end result may actually be this, although it will not appear to have changed when viewing the source:
(Man, I have no idea why this next codeblock won’t format in Textile)
bc..<div class=“slideshow” id=“slideshow0”>
<div> <!— this is the slideshow element —>
<img src=“http://your.textpattern.site/images/1.jpg” alt=“some description” width=“400” height=“300” />
</div>
<ul> <!— this is the navigation element —>
<li><a class=“prev”></a></li>
<li><a></a></li>
<li><a class=“active”></a></li>
<li><a></a></li>
<li><a class=“next”></a></li>
</ul>
<p></p> <!— this is the captions element —>
</div>
Anyway, this should give you some idea of how the slideshow can be styled. Further examples can be found here.
Examples
<txp:aro_slideshow category="landscape" limit="10" type="combo" duration="[2000, 8000]" height="300" width="600" />
A panoramic slideshow (twice as wide as high), with images in the landscape category slowly animating (over 8 seconds) with a combination of panning and zooming movement (Ken Burns Effect).
<txp:aro_slideshow category="dogs, birds" orderby="name:desc" show="caption" type="wipe" duration="[1000, 3000]" transition="Fx.Transitions.backInOut" />
A slideshow with all the images in the dogs and birds categories, without limit, in descending order by name. As no dimensions where specified the slideshow will take the dimensions of the first image in the series. The slideshow will feature a wipe type movement (one image wiping over another from right to left) using Robert Penner’s backInOut easing equation. Movement is rapid (1 second for the wipe animation, 3 seconds for each image to appear staticly). Captions for each image will appear associated with the slideshow.
<txp:aro_slideshow category="fixed, ?id" imageid="23, 19, 75" limit="20" type="fade" resize="false" width="400" height="300" navigation="thumbnails fast" />
A slideshow of up to 20 images from the fixed category, including images with ID’s 23, 19 and 75, and a category based on the article’s ID (if the user was browsing article ID 67, all the images from the category article-67). A fading slideshow in standard 4:3 format – note that resizing has also been turned off, as such all images would need to be greater than the dimensions of the slideshow in order for their edges not to appear. The slideshow is using thumbnails based navigation – thumbnails will appear using the actual image thumbnails in Textpattern. How the thumbnails appear and their dimensions would be determined by external CSS (the thumbnails are applied as background images to an unordered list).
Changes
- 2.0 – initial public release
- 2.0.1 – fixed conflict with smd_slimbox and corrected inline help
Thanks And Stuff
Thanks of course to everyone who suggested features / enhancements for the previous version of the plugin and then waiting patiently for half a year or so until I was able to deliver! I hope the plugin was worth the wait! Special thanks of course to Stef Dawson for doing all the hard work for me!
If you like the plugin and find it useful please digg it!.
Last edited by rloaderro (2007-03-02 01:22:39)
Travel Atlas * Org | Start Somewhere
Offline
Re: aro_slideshow v2
Magnifico! Can’t wait to jump in.
Does this support recursive subcategories? That is calling “ParentImageCat” would call all images associated with it, and “Child#1Cat” and “Child#2Cat”?
Many thanks…
Offline
Re: aro_slideshow v2
At the moment it only supports whatever smd_slimbox supports as far as filtering images – and from reading the other thread it looks like it would take some hacking to get what you are after.
On a positive note, I did fix this bug though.
Travel Atlas * Org | Start Somewhere
Offline
Re: aro_slideshow v2
Just tried it out, and what can I say. It works really well. I dugg it.
Getting beyond the basics I’m discovering some issues.
[edit] Issues I’m having…- I don’t seem to be able to get the orderby working. Whatever I specify with this attribute results in the same image order.
- Captiions don’t display when I use show=“caption”. When I examine this with firebug I see an interesting self-closing p-tag with dynamic opacity settings.
- Thumbnail nav produces a-tags with an incorrect image href, ie, “http://tldt.com/images/123.jpg” I suspect it’s replacing the “t” for thumbnail before the first “.” instead of the second “.”
Thanks so much. This is really great.
Last edited by mrdale (2007-03-01 19:31:49)
Offline
#5 2007-03-01 19:17:13
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Re: aro_slideshow v2
@rloaderro, magnificant. I’ll check that out some time later.
regards, marios
⌃ ⇧ < ⎋ ⌃ ⇧ >
Offline
Re: aro_slideshow v2
Very nice. I am really looking forward to using this.
I would like to use this alongside smd_slimbox, but when I have both plugins active, the whole site throws this error:
Fatal error: Cannot redeclare addquerystringvar() (previously declared in /var/www/html/textpattern/lib/txplib_misc.php(512) : eval()'d code:452) in /var/www/html/textpattern/lib/txplib_misc.php(512) : eval()'d code on line 350And I also can’t get the captions to work.
Last edited by mtprell (2007-03-01 23:42:37)
Offline
Re: aro_slideshow v2
mrdale wrote:
I don’t seem to be able to get the orderby working. Whatever I specify with this attribute results in the same image order.
I will check this out. I checked this out and didn’t have any problems here. What are you using for this parameter exactly?
Captiions don’t display when I use show=“caption”. When I examine this with firebug I see an interesting self-closing p-tag with dynamic opacity settings.
Actually I messed up the syntax in the help. It should be show="caption" exactly as you have written in fact, and not show="captions" (plural) as I wrote earlier. I corrected the help and tested it locally, but if you are still having problems let me know.
Thumbnail nav produces a-tags with an incorrect image href, ie, “http://tldt.com/images/123.jpg” I suspect it’s replacing the “t” for thumbnail before the first “.” instead of the second “.”
Yes. I discovered this bug and corrected it with a new version of the JS when I released the plugin. Just make sure to update your copy (it should say RC2 at the top of the file).
Don’t you just love firebug ;)
Last edited by rloaderro (2007-03-02 01:03:27)
Travel Atlas * Org | Start Somewhere
Offline
Re: aro_slideshow v2
mtprell wrote:
I would like to use this alongside smd_slimbox, but when I have both plugins active, the whole site throws this error:
Fixed this – thanks! Please update your copy of the plugin from the server (latest is v2.0.1)
And I also can’t get the captions to work.
show="caption" (corrected in the plugin help too)
Travel Atlas * Org | Start Somewhere
Offline
Re: aro_slideshow v2
>eronA
Ok got the captions working, but found out that an empty caption field will produce an error. (add an to the end of the attribute?)
[edit] second thoughts, I think the problem is with double quotes in a caption which transfer into the javascript call that the plugin generates. Any ideas for a fix other than not using double quotes?
I was loading categories like this orderby=“id,desc” and this still doesn’t wanna work…
Last edited by mrdale (2007-03-02 03:28:18)
Offline
Re: aro_slideshow v2
This is great!
Another question: is it possible to have the picture area resize like slimbox, i.e., transition between landscape and portrait images? I have both in the slideshow and the portrait will be cut off at the landscape dimension.
Last edited by mtprell (2007-03-02 21:53:49)
Offline
Re: aro_slideshow v2
>eronA
I’m solving/understanding some of my earlier problems…
- Calling captions when there are some empty captions, produces js errors
- Calling captions with quotes in them produces js errors
- [edit: solved!] orderby requires a colon (and not a comma. My mistake) between the type of sort and asc/desc example orderby=“date:asc,”
Offline
Re: aro_slideshow v2
I am having problems using this plugin along with smd_slimbox. Basically, I get either of the two working, but not both. I think its an issue either with the mootools.js or with the calling of mootools.
Is there one mootool.js script that we can use for both plugins?
I use stm_javascript to store the JS.
Example of my “header” form:
<!— CSS —>
<link rel=“stylesheet” href=”<txp:css />” type=“text/css” media=“screen” />
<txp:css format=“link” n=“livesearch” />
<!— Slimbox —>
<txp:js n=“mootools” />
<txp:js n=“slimbox” />
<txp:css format=“link” n=“Slimbox” />
<txp:smd_slimbox_inc skip=“3” />
<txp:js n=“livesearch” />
<txp:js n=“slideshow” />
In the page where I want both to display:
<txp:smd_slimbox category=“On-Tour” limit=“10” />
<txp:output_form form=“slideshow” />
In the “slideshow” form:
<txp:aro_slideshow category=“On-Tour” limit=“10” type=“combo” duration=”[2000, 4000]” />
Sigh. Been working on this for hours….think it could be the transition effects not getting loaded in mootools….all I get with the slideshow is a big picture that just sits there. The slideshow does get loaded in the page source, so its got to be the mootools…
Last edited by jstubbs (2007-03-03 21:21:01)
Offline