aro_slideshow

rloaderro · 2006-05-21 21:08:10

Note: Discussion of the new version of this plugin (v2) for use with Mootools has been moved here.

This plugin creates a streaming, animated slideshow of images. Here is an example.

Download: aro_slideshow.txt
Latest Version: 0.4.1

Setup

<br />
1. Are you currently using the Prototype javascript library?

Or, is the file prototype.js or prototype.lite.js currently linked to from within your HTML document?

If NOT download the file here, and link to it as so from within the head of your HTML document:

<code><script type=“text/javascript” src=”<txp:site_url />prototype.lite.js”></script></code>
<br />

Or YOU MUST use the slideshow plugin with the prototype="1" attribute.

2. Are you currently using the MooFX javascript library?

Or, is the file moo.fx.js currently linked to from within your HTML document?

If NOT download the file here, and link to it as so from within the head of your HTML document:

Or YOU MUST use the slideshow plugin with the moo="1" attribute.

3. Are you currently using the Slideshow javascript library?

Or, is the file slideshow.js currently linked to from within your HTML document?

If NOT download the file here, and link to it as so from within the head of your HTML document:

<code><script type=“text/javascript” src=”<txp:site_url />slideshow.js”></script></code>
<br />

Or YOU MUST use the slideshow plugin with the slideshow="1" attribute.

Usage

<br />
From within an article form ( presentation / forms / form type = article )

The corresponding article must have 1 or more numeric images ID’s, separated by commas, in the article image field ( content / write / advanced options / article image ).

From within a page template or any type of form ( presentation / pages or presentation / forms )

The corresponding image category ( content / organize / image categories ) must have 1 or more associated images for the plugin to work.

Or,

For example: <txp:aro_slideshow img="1,3,5,7,9" />.

Attributes

<br />
<code><txp:aro_slideshow cat=“name_of_image_category” /></code>

was category (depreciated)

Use the tag with this attribute to display a looping slideshow of all the images within the named category.

<code><txp:aro_slideshow class=“CSS_class_name” /></code>

Use the tag with this attribute to attach a CSS class to the bounding div of the slideshow element. See troubleshooting below for more information (default is slideshow).

<code><txp:aro_slideshow fade=“duration_of_fade_effect_in_seconds” /></code>

was ms (depreciated)

Use the tag with this attribute to speed-up or slow-down the slideshow fade effect. Duration is in whole seconds (default is 4).

<code><txp:aro_slideshow img=“list_of_image_ids” /></code>

Use the tag with this attribute to display a looping slideshow of the images specified by their ID. For example: <txp:aro_slideshow img="1,3,5,7,9" />.

<code><txp:aro_slideshow moo=“1” /></code>

was js="2" (depreciated)

Use the tag with this attribute to output the MooFX javascript library inline in your HTML document. See setup above for more information (default is no).

<code><txp:aro_slideshow prototype=“1” /></code>

was js="2" (depreciated)

Use the tag with this attribute to output the Prototype javascript library inline in your HTML document. See setup above for more information (default is no).

<code><txp:aro_slideshow slideshow=“1” /></code>

was js="1" or js="2" (depreciated)

Use the tag with this attribute to output the Slideshow javascript library inline in your HTML document. See setup above for more information (default is no).

<code><txp:aro_slideshow thumb=“1” /></code>

Use the tag with this attribute to display the slideshow using image thumbnails instead of the full-size images.

<code><txp:aro_slideshow wait=“duration_between_fades_in_seconds” /></code>

Use the tag with this attribute to increase or decrease the time between slideshow transitions. Duration is in whole seconds (default is 1).

Troubleshooting

<br />
The effects library has been tested on Internet Explorer 6+, Mozilla (Netscape, Fire Fox, Camino), Opera 9 and Konqueror (Safari). It is recommended to use a Strict doctype. To work as intended, all images must be the same size. The plugin outputs an HTML img within a bounding div. If there are display problems you may need to adjust the CSS of the div and / or the img within the div in your stylesheets. Use the default class slideshow to target the div, or assign your own (see the class attribute above). For example, if your images are floating you will need to set the CSS float property for the bounding div in your stylesheet. Almost all issues with slideshow layout or visual quirks (jumping in position between fades) can be resolved by tweaking the CSS – usually by removing styles from the img and applying them to the div. A final, important note – if you are linking the javascript libraries, they must be linked in the followed order:

Prototype library
Moo library
Slideshow library

If they are not linked in that order the slideshow will not work.

Last edited by rloaderro (2007-03-01 17:27:13)

sthmtc · 2006-05-22 00:55:41

thanks, this will be very useful for me. will report back as soon as i’ve tested it.

mrdale · 2006-05-22 01:55:48

OK, I set up a pretty basic test of this (method 2) and I get a javascript error “this.b has no properties”

The-Exit · 2006-05-22 07:18:08

Is there somewhere a preview, where you have implemented the slideshow?

lee · 2006-05-22 07:19:18

Hi rloaderro, thanks for the plugin – is there an example we can see?

Using 0 1 or 2 I only get the first image displayed. Do we need a copy of metodus.js to use with the link in the head for method 0?

Last edited by lee (2006-05-22 07:26:09)

RUDEWORKS · 2006-05-22 10:38:56

You have the example on its Textpattern resources post: Here it is.

lee · 2006-05-22 12:01:46

Thanks for the link. I now have metodus.js but I still only get the first image displayed.

sthmtc · 2006-05-22 12:22:59

started testing it with option “2” and it immediately worked like a charm.

soulship · 2006-05-22 14:25:15

Thanks for releasing this!

rloaderro · 2006-05-22 15:14:09

lee wrote:

Hi rloaderro, thanks for the plugin – is there an example we can see?
Using 0 1 or 2 I only get the first image displayed. Do we need a copy of metodus.js to use with the link in the head for method 0?

hi Lee!

The javascript stuff is confusing and I probably didn’t explain it very well. The effect on the example site isn’t using the plugin as it was released, so it is not the best example of how to set things up. If the plugin doesn’t work with js=“2” right out-of-the-box then I messed something up. Can you tell me what Browser/Version/OS you are trying this on so I can try to duplicate it here? Also, see the first post for the correct external javascript libraries.

lee · 2006-05-22 15:21:05

Hi, it’s not a Browser/Version/OS issue because I have tested it on a PC and MAC, it’s something I’m doing wrong :(

Does the article with the images have to viewed at a permlink url?
Will it work if each TxP section has just 1 article (with images) and is viewed www.site.com/section

Cheers,
Lee

Last edited by lee (2006-05-22 15:21:51)

rloaderro · 2006-05-22 15:52:14

lee wrote:

Does the article with the images have to viewed at a permlink url?
Will it work if each TxP section has just 1 article (with images) and is viewed www.site.com/section

I have tested this with article lists and individual articles – it seems to work OK in all cases. 2 things are important though to the proper functioning of the plugin, and I probably understated them:

You must call the plugin tag – <txp:aro_slideshow /> – from within an article form (it won’t work if called from within a page template or a misc form – it must be an article form.
In the article_image field of the article you must specifiy 1 or more image ID’s separated by commas.

But if you get the first image to display than you are halfway there. Are you calling the tag with the js="2" option or linking the javascript externally? Maybe you can email me the source from your browser?

Textpattern CMS

Textpattern CMS support forum

#1 2006-05-21 21:08:10

aro_slideshow

Note: Discussion of the new version of this plugin (v2) for use with Mootools has been moved here.

Setup

Usage

Attributes

Troubleshooting

#2 2006-05-22 00:55:41

Re: aro_slideshow

#3 2006-05-22 01:55:48

Re: aro_slideshow

#4 2006-05-22 07:18:08

Re: aro_slideshow

#5 2006-05-22 07:19:18

Re: aro_slideshow

#6 2006-05-22 10:38:56

Re: aro_slideshow

#7 2006-05-22 12:01:46

Re: aro_slideshow

#8 2006-05-22 12:22:59

Re: aro_slideshow

#9 2006-05-22 14:25:15

Re: aro_slideshow

#10 2006-05-22 15:14:09

Re: aro_slideshow

#11 2006-05-22 15:21:05

Re: aro_slideshow

#12 2006-05-22 15:52:14

Re: aro_slideshow

Board footer