Agile Carousel Instructions

Requires PHP 5.2 and JQuery 1.2.6+

b2.1 Released 7/16/09

For Users Upgrading from b2.0 to b2.1

Take a look at the new settings marked in red below. There are new settings/requirements that must be entered in order for the carousel to work properly:

• “slide_directory” setting: Specify the path from the php document "make_slides.php" to the directory containing yoru slides. For increased security, this value must be relative and contain the phrase “agile_carousel” and must be a relative path.
• "path_to_slides" setting: This is a new setting where you must specify the path from the html document to the directory containing the slides.

Agile Carousel is a JavaScript carousel and a JQuery plugin. Just enter the name of the folder containing your slides, upload the related files and your carousel is built to order. Slides can be html documents, images or .swf’s (flash). Many different settings and transition types are available to allow for the maximum amount of customization. As an added bonus, some JQuery UI effects are available as transitions.

Download

http://code.google.com/p/agile-carousel/downloads/list

Currently in beta version. Please report any bugs you may find.

Downloadable Files Include

The file "carousel.css" is included and contains the styles for the carousel. Please modify as needed. The included file "page.css" contains rules for styling the page such as h1, body background-color etc.

Agile Carousel is a Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Example Plugin Usage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="slide_behavior_min.js"></script>
<script type="text/javascript">
$('#slide_holder').agile_carousel({
path_to_slides: "agile_carousel_slides",
slide_directory: "agile_carousel_slides"
});
</script>

View the Full Example

Plugin Options

• alt_attributes: New b2.1 Enter a comma separated list of alt attributes per slide.
• custom_data: New b2.1 Allows you to use data from other sources instead of a directory. Gives you the ability to gather data from your database or web service. See more information below. Must contain the phrase "agile_carousel". The relative path to a file that will be included in make_slides.php.
• disable_on_first_last: "yes" or "no"
• first_last_buttons: "yes" or "no"
• first_slide_is_intro: "yes" or "no". If "yes", then first slide will play only once.
• hover_next_prev_buttons: "yes" or "no"
• intro_timer_length: enter length in milliseconds (surrounded by quotes) that the intro should play
• intro_transtion: "fade" or do not declare
• next_prev_buttons: "yes" or "no"
• number_slides_visible: enter the number of slides (surrounded by quotes) that should be visible on the stage
• path_to_slides: New b2.1 Required. The path from the html/xhtml document where the carousel is displayed to the directory containing the slide files,
• pause_button: "yes" or "no"
• php_doc_location: New b2.1 the location of the server side script that powers this plugin. Default is make_slides.php.
• remove_content: New b2.1 "yes" or "no". If "no", then any content within the carousels container that is included in the html/xhtml document will not be removed when the carousel is rendered. This is useful if you would like some static html elements (ex = images) to placed within the carousel.
• slide_buttons: "yes" or "no"
• slide_captions: enter list of slide captions in this format: cap 1 | cap 2 | etc.
• slide_directory: enter path to directory containing slide files. New Requirement: Slide Directory Name must contain the phrase "agile_carousel". Must be a relative path.
• slide_doctype: "html" or "xhtml"
• slide_links: enter comma separated list of links to apply to jpg, gif or png slides (only)
• slide_number_display: "yes" or "no"
• slide_timer_length: enter length in milliseconds that each slide should appear on stage
• slide_timer_on: "yes" or "no"
• stop_rotate_on_hover: New b2.1 "yes" or "no". If "yes" then the timed slide rotation will stop when the user mouses over the carousel. The timer will resume when the user mouses off the carousel.
• target_attributes: New b2.1 Enter a comma separated list of html target attributes per slide.
• transition_duration: enter length in milliseconds for all slide transition
• transition_easing: enter easing type (see below list of choices)
• transition_type: enter transition type (see below list of choices)
• jquery_ui_effect_param: for UI effect transitions. Enter option name
• jquery_ui_effect_value: for UI effect transitions. Enter option value
• water_mark: enter text that will appear in the carousel and not be affected by transitions.

Standard Jquery transition types that do not require JQuery UI

• carousel
• fade
• no_transition_effect
• scroll_right

Transition Types That Do Require Jquery UI

• (direction | "horizontal", "vertical")

• (direction | "horizontal", "vertical")

• (direction | "down", "up", "left", "right")

• (number | integer… the number of pieces)

• (size | integer… height of fold)

• (times | integer… times to pulsate)

• (percent | integer… percentage of size to scale to)

• (from | default = { height: .., width: .. }, …state at beginning, usually not needed.), (direction | ‘both’, ‘vertical’, ‘horizontal’… dimensions that will be scales), (origin | default = ['middle','center']… the vanishing point, default for show/hide), (percent | integer …the percentage to scale to, number)

• (direction | "up", "down", "left", "right")
  (distance | integer… distance to shake)
  (times | integer… number of times to shake)

• (direction | "down", "up", "left", "right")

Transition Types That Do Not Require JQuery UI

• linear
• swing

Transition Types that do require JQuery UI

• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Ability to Add External Controls New b2.1

Ability to add your own user interface outside of the carousel. For example, you can add buttons for play, pause, next, etc anywhere on the page. Or you could cause the carousel to change when an image on the page (and outside of the carousel) is clicked. See this example.

<script>
// external controls example
$('#next_o').click(function(){
$.fn.agile_carousel.next();
});
$('#prev_o').click(function(){
$.fn.agile_carousel.prev();
});
$('#first_o').click(function(){
$.fn.agile_carousel.first();
});
$('#last_o').click(function(){
$.fn.agile_carousel.last();
});
$('#pause_play').click(function(){
$.fn.agile_carousel.pause_play();
});
$('#goto_3').click(function(){
$.fn.agile_carousel.go_to(3);
});
</script>

Custom Data Setting New b2.1

Ability to include a file in the server side script that creates the carousel. Gives you the ability to gather data from a custom source rather than the default way of specifying a directory. For example, this setting allows you to gather data for your carousel from your data base, a web service, etc. For increased security, file name of the included file must contain the phrase "agile_carousel".

To use this setting, the included file must have a variable named "$custom_data_arr" whose value is an array. The array should contain at least one of the members from the below example. Any values defined in the array will override the default settings. Your script should contain its own logic to gather data and add values to the array.

$custom_data_arr Members:

• custom_slide_files: comma separated list of paths to slide files (img, swf or html/xhtml).
• custom_slide_links: comma separated list of links per slide (image slides) .
• custom_target_attributes: comma separated list of target attributes per slide (image slides).
• custom_alt_attributes: comma separated list of alt attributes per slide (image slides).
• custom_slide_captions: pipe ("|") separated list of captions per slide.

Example of file included by the custom_data Setting

<?php
	$custom_data_arr = array(
	'custom_slide_files'       => "http://www.agilecarousel.com/agile_carousel_slides_w_intro/00_agile_intro.swf,http://www.agilecarousel.com/agile_carousel_slides_w_intro/01_slide.jpg,http://www.agilecarousel.com/agile_carousel_slides_w_intro/02_slide.jpg,http://www.agilecarousel.com/agile_carousel_slides_w_intro/03_slide.jpg",
	'custom_slide_links'       => "NA,http://www.agile_carousel.com,http://www.agile_carousel.com,http://www.agile_carousel.com",
	'custom_target_attributes' => "NA,_self,_blank,_self",
	'custom_alt_attributes'    => "NA,Slide 1,Slide 2,Slide 3",
	'custom_slide_captions'    => "Customize with a wide assortment of settings|Use JQuery UI Effects &amp; Easing|Automated Setup"
	);
?>