+
+ 
greenishSlides + by greenish
+ +Authors
+Philipp C. Adrian (philippcadrian@greenish.ch)
Contact
+Philipp C. Adrian (philippcadrian@greenish.ch)
Download
++ You can download this project in either + zip or + tar formats. +
+You can also clone the project with Git + by running: +
$ git clone git://github.com/greenish/greenishSlides+ + + + +
- greenishSlides
+ greenishSlides
by greenish
@@ -52,19 +52,21 @@ greenishSlides
-
+
Authors
-
Philipp C. Adrian (philippcadrian@greenish.ch)
+ Philipp C. Adrian (philippcadrian@greenish.ch)
+
Contact
- Philipp C. Adrian (philippcadrian@greenish.ch)
+ Philipp C. Adrian (philippcadrian@greenish.ch)
+
Download
From cff422d8f7749a631a8c132426761a508273126a Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Mon, 12 Mar 2012 23:57:39 +0100
Subject: [PATCH 03/32] index.markdown test
---
index.markdown | 525 ++++++++++++++++++++++++++++++++++++
index.html => indexbkp.html | 0
2 files changed, 525 insertions(+)
create mode 100644 index.markdown
rename index.html => indexbkp.html (100%)
diff --git a/index.markdown b/index.markdown
new file mode 100644
index 0000000..0419d99
--- /dev/null
+++ b/index.markdown
@@ -0,0 +1,525 @@
+#greenishSlides jQuery slideshow plugin - v0.2 - beta (5/13/2011)
+
+This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
+
+This plugin is inspired by the [jQuery UI Accordion](http://jqueryui.com/demos/accordion/) and [Kwicks for Mootools](http://davidwalsh.name/mootools-kwicks) / [Kwicks for jQuery](http://www.jeremymartin.name/projects.php?project=kwicks).
+
+The main reason to start to develop this plugin where a certain set of specifications and customizaitions I needed for [The Book in Motion](http://thebookinmotion.greenish.ch) website i've been developing, that none of the above where quite offering.
+
+----------------
+
+So here are these specifications and features that this plugin provides - plus some others (I kinda got into it):
+
+* The Slideshow is resizable without javascript -> so no jittering even when using a fullscreen slideshow.
+* There are NO gaps and spaces between the slides during the animation.
+* Limits (max-/min-width) can be set for all slides but also for one single slide (or two).
+* The plugin doesn't require a predefined markup like an unordered list or h3 headers and divs.. it just takes what it gets.
+* You can mess around with the css on runtime and the plugin still finds the proper position for each slide when its next event is triggered.
+* Lots of options to turn things on and off..
+* And a lots of callbacks and events that allow to customize, extend and manipulate the plugins behaviour to make it really flexible. Also its easy to add new callbacks where they're needed.
+* Fully browser compatible: IE 7.0+ (haven't tested on IE6 - screw it!), Firefox 3+, Safari 3.1+, Opera 9.6+ and Google Chrome.
+
+----------------
+
+So as said above, this plugin has been developed for [The Book in Motion](http://thebookinmotion.greenish.ch) website and this website is probably the best way to see what this plugin is capable of.
+
+Also it's used on the frontpage of the [City University of New York - Graduate Center](http://www.gc.cuny.edu) as well as image gallery on some subpages.
+
+What follows here is FINALLY the documentation of the plugin. It's been a lot of work that went into it and I'm very happy to finally make available for everybody.
+
+I'm happy for any feedback, suggestions and bug reports (well not happy, but grateful in the last case :) )
+
+__And when you come to use the plugin: SHOW ME! I would love to see what you're doing with it!__
+
+#Documentation
+
+1. General
+----------------
+
+ To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder.
+
+ Include the file into your HTML and you're ready to go:
+
+ ``` javascript
+ jQuery(document).ready(function(){
+ $(".myElement").greenishSlides();
+ });
+ ```
+
+ All child elements of _.myElement_ element will be turned into slides.
+
+ So the code above will turn each one of these:
+
+ ``` html
+
+
+
+
+ ```
+ ``` html
+
+
+
+
+ ```
+
+ ``` html
+
+ ```
+
+ Into a slideshow that's markup will look (in the first case: ``) like this:
+
+ ``` html
+
+
+
+
+ ```
+
+1. Methods
+----------------
+
+ ``` javascript
+ $(".myElement").greenishSlides([Object options]);
+ ```
+
+ > ####Initialize / Update Options
+ >
+ > Initialize the greenishSlides plugin on a set of HTML Elements.
+ >
+ > Optional you cann pass an object with options (see below) to the function.
+ >
+ > Also you can change options with this at any time after initialisation.
+
+ -------------------------
+
+ ``` javascript
+ $(".mySlide",".myElement").greenishSlides("activate");
+ ```
+
+ > #### Activate Slide
+ >
+ > Activates the slide this method is called on.
+
+ -------------------------
+
+ ``` javascript
+ $(".mySlide", ".myElement").greenishSlides("deactivate");
+ ```
+
+ > #### Deactivate Slide
+ >
+ > Deactivates the slide this method is called on.
+
+ -------------------------
+
+ ``` javascript
+ $(".myElement").greenishSlides("update");
+ ```
+
+ > #### Update Slide Positions.
+ >
+ > Updates the position of all slides.
+ >
+ > Needs to be called adding a new slide or after a resize happened without the resize option enabled.
+
+ -------------------------
+
+ ``` javascript
+ $(".myElement").greenishSlides("next", [Integer goFromSlideId]);
+ ```
+ > #### Activates Next Slide.
+ >
+ > Activates the next slide to the left/bottom of the active slide.
+ > Optionaly you can pass the index of a slide to take its next.
+
+ -------------------------
+
+ ``` javascript
+ $(".myElement").greenishSlides("prev", [Integer goFromSlideId]);
+ ```
+
+ > #### Activates Previous Slide.
+ >
+ > Activates the next slide to the right/top of the active slide.
+ > Optionaly you can pass the index of a slide to take its previous.
+
+ -------------------------
+
+ ``` javascript
+ $(".myElement").greenishSlides("bindCallback", Function);
+ ```
+
+ > #### Bind a Callback/Event
+ >
+ > Registers or binds a callback function to a certain event. (see below).
+
+ -------------------------
+
+ ``` javascript
+ $(".myElement").greenishSlides("clearCache");
+ ```
+
+ > #### Clear Cache
+ >
+ > Removes all cached informations. (Caching can be enabled by option).
+
+ -------------------------
+
+1. Options
+----------------
+
+ Options can be set or changed by passing an object to the greenishSlides function. This can be done on initialisation or afterwards to change any value (for example limits).
+
+ Here are all the possibile options (set to their __default values__):
+
+ ``` javascript
+ $(".myElement").greenishSlides({
+ vertical:false,
+ resizable:false,
+ active:false,
+ transitionSpeed: 400,
+ easing:"swing",
+ events: {
+ activate:"click",
+ deactivate:"click"
+ },
+ handle:".gsSlide",
+ stayOpen: false,
+ keyEvents:false,
+ circle : false,
+ classes:{
+ active:"gsAactive",
+ vertical:"gsVertical",
+ horizontal:"gsHorizontal",
+ slide:"gsSlide",
+ deactivating:"gsDeactivating",
+ positionActive:"gsPositionActive"
+ },
+ cache:false,
+ limits : {},
+ callbacks : {}
+ });
+ ```
+
+ ###Option Details
+
+ ``` javascript
+ vertical: Boolean Default: false
+ ```
+
+ > Defines the orientation of the greenishSlides element.
+
+ -------------------------
+
+ ``` javascript
+ resizable: Boolean Default: false
+ ```
+
+ > Defines if the greenishSlides element can be resized on runtime.
+ >
+ > If __true__ slides on the left side of the active slide will be positioned differently from the ones on the right, to allow resizing without javascript.
+ >
+ > Still if there are limits set to any slide, resizing may need an event handler that will also be set if necessary.
+ >
+ > Be aware that this needs some extra calculations and (more important) some DOM changes which will influence the performance so only switch this on if you really need it.
+
+ -------------------------
+
+ ``` javascript
+ active: Boolean Default: false
+ Object (jQuery Object)
+ String (jQuery Selector)
+ Integer (Slide Index)
+ ```
+
+ > Defines the active Slide after initialisation.
+ >
+ > __false__: No Slide (or the first Slide if stayOpen:true) is active.
+ >
+ > __true__: The first Slide is active.
+ >
+ > __0__ : The first Slide is active.
+ >
+ > __-1__ : The last Slide is active.
+
+ -------------------------
+
+ ``` javascript
+ transitionSpeed: Integer (ms) Default: 400
+ ```
+
+ > Defines the duration of the animations in milliseconds.
+
+ -------------------------
+
+ ``` javascript
+ easing: String Default: "swing"
+ ```
+
+ > Defines what kind of easing algorythem should be used in the animations. Works with the jQuery easing plugin.
+
+ -------------------------
+
+ ``` javascript
+ events: {
+ activate: String Default: "click"
+ deactivate: String Default: "click"
+ }
+ ```
+
+ > Lets you define what browser events will trigger the activation/deactivation events of a slide.
+
+ -------------------------
+
+ ``` javascript
+ handle: String (jQuery Selector) Default: ".gSSlide"
+ Object (jQuery Object)
+ ```
+
+ > Defines on which element the activation/deactivation events are bound.
+
+ -------------------------
+
+ ``` javascript
+ stayOpen: Boolean Default: false
+ ```
+
+ > If __true__ the there is always one active slide. No deactivation is possible so none will be triggered.
+
+ -------------------------
+
+ ``` javascript
+ keyEvents: Boolean Default: false
+ ```
+
+ > If __true__ the arrow keys can be used to move from one slide to the next.
+
+ -------------------------
+
+ ``` javascript
+ circle: Boolean Default: false
+ ```
+
+ > Defines if after the last slide follows the first when the "next" event is triggered.
+
+ -------------------------
+
+ ``` javascript
+ classes: {
+ active: String Default: "gsActive"
+ vertical: String Default: "gsVertical"
+ horizontal: String Default: "gsHorizontal"
+ slide: String Default: "gsSlide"
+ deactivating: String Default: "gsDeactivating"
+ positionActive: String Default: "gsPositionActive"
+ }
+ ```
+
+ > Lets you customize the css classes that are set by the plugin.
+
+ -------------------------
+
+ ``` javascript
+ cache: Boolean Default: false
+ ```
+
+ > Enables the caching functionality. Caches certain valus and calucalation. Use this if there are no runtime changes at all (no resizing, adding of slides etc.)
+ >
+ > To be honest I kind of expected more of a speed improvement from this than it actually does.. so its usefulness is questionable.. but it does definitely no harm so why not use it.
+
+ -------------------------
+
+ ``` javascript
+ limits: { Default: {}
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ 0: {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+ "-1": {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+ }
+ ```
+
+ > This allows you to set a minimum height/width and a maximum height/width (in px) for all slides or a single slide.
+ >
+ > __limits.min__: Sets a min width/height for every slide. So no slide can be smaller than i.e. 20px
+ >
+ > __limits[0].min__: Sets a min width/height for the first slide.
+ >
+ > __limits[-1].min__: Sets a min width/height for the last slide.
+ >
+ > All min/max definitions are optional and can be combined in any ways possible.
+ >
+ > Limits can also be set by css with min-width, max-width, min-height, max-height. Css limits always override limits that where set in the options. Also, limits for one single slide override the limits set for all slides.
+ >
+ > __min-width > limits[0].min > limits.min__
+ >
+ > Because min-width doesn't have a default like _none_, __0px is handled as undefined__ and limits[0].min will be used instead. To define __"min-width:0px" use 0%__ which will then override limits[0].min.
+
+ -------------------------
+
+ ``` javascript
+ callbacks: { Default: {}
+ "callbackName": Function(callback function)
+ Object (multiple callback functions)
+ Array (multiple callback functions)
+ }
+ ```
+
+ > Allows to register callback functions during initialisation.
+ >
+ > To learn more about the available callbacks look at the Callbacks/Events chapter below.
+
+ -------------------------
+
+1. Callbacks/Events
+----------------
+
+ During the runtime of the plugin a bunch of callbacks are fired.
+
+ Callbacks can be registered by adding the functions to the options object or by calling the "bindCallback" method.
+
+ Every callback function receives the _data_ object as first parameter while the following parameters can change.
+
+ By returning __false__ in the callback the pluging cancels the current event and stopps its action.
+
+ This is a list of all the callbacks that are available at the moment (to find them in the code search for _#CALLBACK_):
+
+ ``` javascript
+ "preInit" function(data) Context: $(".myElement")
+ ```
+
+ > Called on initialisation before anything else is done.
+
+ -------------------------
+
+ ``` javascript
+ "init" function(data) Context: $(".myElement")
+ ```
+
+ > Called on initialisation after all the classes and styles are set.
+
+ -------------------------
+
+ ``` javascript
+ "postInit" function(data) Context: $(".myElement")
+ ```
+
+ > Called after the initialisation is complete.
+
+ -------------------------
+
+ ``` javascript
+ "activateEvent" function(data) Context: Slide Handle
+ ```
+
+ > Called every time the activation event is triggered.
+
+ -------------------------
+
+ ``` javascript
+ "deactivateEvent" function(data) Context: Slide Handle
+ ```
+
+ > Called every time the deactivation event is triggered.
+
+ -------------------------
+
+ ``` javascript
+ "preActivate" function(data) Context: $(".mySlide", ".myElement")
+ ```
+
+ > Called before a slide is activated.
+
+ -------------------------
+
+ ``` javascript
+ "preDeactivate" function(data) Context: $(".mySlide", ".myElement")
+ ```
+
+ > Called before a slide is deactivated.
+
+ -------------------------
+
+ ``` javascript
+ "preUpdate" function(data) Context: $(".active", ".myElement")
+ ```
+
+ > Called before all slides are updated
+
+ -------------------------
+
+ ``` javascript
+ "preActivateAnimation" function(data) Context: $(".myElement")
+ "preDeactivateAnimation" function(data) Context: $(".myElement")
+ "preUpdateAnimation" function(data) Context: $(".myElement")
+ ```
+
+ > Called after all caculations are done just before the animation starts.
+
+ -------------------------
+
+ ``` javascript
+ "postActivate" function(data) Context: $(".active", ".myElement")
+ ```
+
+ > Called after a slide is activated.
+
+ -------------------------
+
+ ``` javascript
+ "postDeactivate" function(data) Context: Deactivated Slide
+ ```
+
+ > Called after a slide is deactivated.
+
+ -------------------------
+
+ ``` javascript
+ "postUpdate" function(data) Context: $(".active", ".myElement")
+ ```
+
+ > Called after all slides are updated
+
+ -------------------------
+
+ ``` javascript
+ "step" function(data) Context: $(".active", ".myElement")
+ ```
+
+ > Called at every step of the animation function.
+ >
+ >The _data_ object contains the current position of everyslide at that moment of the animation.
+ >
+ >Also have a look at the _step_ callback of the jQuery animation function.
+
+ -------------------------
+
+ ###Add New Callback
+
+ If you need a new callback that is missing, feel free to add it in the code!
+ Just put the following at the place you need the call:
+
+ ``` javascript
+ [context].greenishSlides("_triggerCallback","myCallbackName" [,parameterOne, parameterTwo, ...]);
+ ```
+
+ Notice that the new callback will come with all the features of the default ones:
+ * The _data_ object will always be passed as the first parameter. (And you can add as many additional parameters as you wish.)
+ * return __false__ will stop the further execution of the acutal event.
+
+ __When you added a new callback, tell me about it! So I can consider adding it to the default callbacks.__
\ No newline at end of file
diff --git a/index.html b/indexbkp.html
similarity index 100%
rename from index.html
rename to indexbkp.html
From 6db6297ec172dfd61a6c398a3f7716ecfee8e3af Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Mon, 12 Mar 2012 23:58:41 +0100
Subject: [PATCH 04/32] test again.
---
index.markdown => index.html | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename index.markdown => index.html (100%)
diff --git a/index.markdown b/index.html
similarity index 100%
rename from index.markdown
rename to index.html
From b52282daf8cc0b20283ad1d8b0cbe544ec258b93 Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Tue, 13 Mar 2012 00:00:27 +0100
Subject: [PATCH 05/32] back to default gh-page index..
---
.gitignore | 1 +
index.html | 608 +++++++-------------------------------------------
indexbkp.html | 90 --------
3 files changed, 84 insertions(+), 615 deletions(-)
create mode 100644 .gitignore
delete mode 100644 indexbkp.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/index.html b/index.html
index 0419d99..d41b4b0 100644
--- a/index.html
+++ b/index.html
@@ -1,525 +1,83 @@
-#greenishSlides jQuery slideshow plugin - v0.2 - beta (5/13/2011)
-
-This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
-
-This plugin is inspired by the [jQuery UI Accordion](http://jqueryui.com/demos/accordion/) and [Kwicks for Mootools](http://davidwalsh.name/mootools-kwicks) / [Kwicks for jQuery](http://www.jeremymartin.name/projects.php?project=kwicks).
-
-The main reason to start to develop this plugin where a certain set of specifications and customizaitions I needed for [The Book in Motion](http://thebookinmotion.greenish.ch) website i've been developing, that none of the above where quite offering.
-
-----------------
-
-So here are these specifications and features that this plugin provides - plus some others (I kinda got into it):
-
-* The Slideshow is resizable without javascript -> so no jittering even when using a fullscreen slideshow.
-* There are NO gaps and spaces between the slides during the animation.
-* Limits (max-/min-width) can be set for all slides but also for one single slide (or two).
-* The plugin doesn't require a predefined markup like an unordered list or h3 headers and divs.. it just takes what it gets.
-* You can mess around with the css on runtime and the plugin still finds the proper position for each slide when its next event is triggered.
-* Lots of options to turn things on and off..
-* And a lots of callbacks and events that allow to customize, extend and manipulate the plugins behaviour to make it really flexible. Also its easy to add new callbacks where they're needed.
-* Fully browser compatible: IE 7.0+ (haven't tested on IE6 - screw it!), Firefox 3+, Safari 3.1+, Opera 9.6+ and Google Chrome.
-
-----------------
-
-So as said above, this plugin has been developed for [The Book in Motion](http://thebookinmotion.greenish.ch) website and this website is probably the best way to see what this plugin is capable of.
-
-Also it's used on the frontpage of the [City University of New York - Graduate Center](http://www.gc.cuny.edu) as well as image gallery on some subpages.
-
-What follows here is FINALLY the documentation of the plugin. It's been a lot of work that went into it and I'm very happy to finally make available for everybody.
-
-I'm happy for any feedback, suggestions and bug reports (well not happy, but grateful in the last case :) )
-
-__And when you come to use the plugin: SHOW ME! I would love to see what you're doing with it!__
-
-#Documentation
-
-1. General
-----------------
-
- To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder.
-
- Include the file into your HTML and you're ready to go:
-
- ``` javascript
- jQuery(document).ready(function(){
- $(".myElement").greenishSlides();
- });
- ```
-
- All child elements of _.myElement_ element will be turned into slides.
-
- So the code above will turn each one of these:
-
- ``` html
-
-
-
-
- ```
- ``` html
-
-
-
-
- ```
-
- ``` html
-
- ```
-
- Into a slideshow that's markup will look (in the first case: ``) like this:
-
- ``` html
-
-
-
-
- ```
-
-1. Methods
-----------------
-
- ``` javascript
- $(".myElement").greenishSlides([Object options]);
- ```
-
- > ####Initialize / Update Options
- >
- > Initialize the greenishSlides plugin on a set of HTML Elements.
- >
- > Optional you cann pass an object with options (see below) to the function.
- >
- > Also you can change options with this at any time after initialisation.
-
- -------------------------
-
- ``` javascript
- $(".mySlide",".myElement").greenishSlides("activate");
- ```
-
- > #### Activate Slide
- >
- > Activates the slide this method is called on.
-
- -------------------------
-
- ``` javascript
- $(".mySlide", ".myElement").greenishSlides("deactivate");
- ```
-
- > #### Deactivate Slide
- >
- > Deactivates the slide this method is called on.
-
- -------------------------
-
- ``` javascript
- $(".myElement").greenishSlides("update");
- ```
-
- > #### Update Slide Positions.
- >
- > Updates the position of all slides.
- >
- > Needs to be called adding a new slide or after a resize happened without the resize option enabled.
-
- -------------------------
-
- ``` javascript
- $(".myElement").greenishSlides("next", [Integer goFromSlideId]);
- ```
- > #### Activates Next Slide.
- >
- > Activates the next slide to the left/bottom of the active slide.
- > Optionaly you can pass the index of a slide to take its next.
-
- -------------------------
-
- ``` javascript
- $(".myElement").greenishSlides("prev", [Integer goFromSlideId]);
- ```
-
- > #### Activates Previous Slide.
- >
- > Activates the next slide to the right/top of the active slide.
- > Optionaly you can pass the index of a slide to take its previous.
-
- -------------------------
-
- ``` javascript
- $(".myElement").greenishSlides("bindCallback", Function);
- ```
-
- > #### Bind a Callback/Event
- >
- > Registers or binds a callback function to a certain event. (see below).
-
- -------------------------
-
- ``` javascript
- $(".myElement").greenishSlides("clearCache");
- ```
-
- > #### Clear Cache
- >
- > Removes all cached informations. (Caching can be enabled by option).
-
- -------------------------
-
-1. Options
-----------------
-
- Options can be set or changed by passing an object to the greenishSlides function. This can be done on initialisation or afterwards to change any value (for example limits).
-
- Here are all the possibile options (set to their __default values__):
-
- ``` javascript
- $(".myElement").greenishSlides({
- vertical:false,
- resizable:false,
- active:false,
- transitionSpeed: 400,
- easing:"swing",
- events: {
- activate:"click",
- deactivate:"click"
- },
- handle:".gsSlide",
- stayOpen: false,
- keyEvents:false,
- circle : false,
- classes:{
- active:"gsAactive",
- vertical:"gsVertical",
- horizontal:"gsHorizontal",
- slide:"gsSlide",
- deactivating:"gsDeactivating",
- positionActive:"gsPositionActive"
- },
- cache:false,
- limits : {},
- callbacks : {}
- });
- ```
-
- ###Option Details
-
- ``` javascript
- vertical: Boolean Default: false
- ```
-
- > Defines the orientation of the greenishSlides element.
-
- -------------------------
-
- ``` javascript
- resizable: Boolean Default: false
- ```
-
- > Defines if the greenishSlides element can be resized on runtime.
- >
- > If __true__ slides on the left side of the active slide will be positioned differently from the ones on the right, to allow resizing without javascript.
- >
- > Still if there are limits set to any slide, resizing may need an event handler that will also be set if necessary.
- >
- > Be aware that this needs some extra calculations and (more important) some DOM changes which will influence the performance so only switch this on if you really need it.
-
- -------------------------
-
- ``` javascript
- active: Boolean Default: false
- Object (jQuery Object)
- String (jQuery Selector)
- Integer (Slide Index)
- ```
-
- > Defines the active Slide after initialisation.
- >
- > __false__: No Slide (or the first Slide if stayOpen:true) is active.
- >
- > __true__: The first Slide is active.
- >
- > __0__ : The first Slide is active.
- >
- > __-1__ : The last Slide is active.
-
- -------------------------
-
- ``` javascript
- transitionSpeed: Integer (ms) Default: 400
- ```
-
- > Defines the duration of the animations in milliseconds.
-
- -------------------------
-
- ``` javascript
- easing: String Default: "swing"
- ```
-
- > Defines what kind of easing algorythem should be used in the animations. Works with the jQuery easing plugin.
-
- -------------------------
-
- ``` javascript
- events: {
- activate: String Default: "click"
- deactivate: String Default: "click"
- }
- ```
-
- > Lets you define what browser events will trigger the activation/deactivation events of a slide.
-
- -------------------------
-
- ``` javascript
- handle: String (jQuery Selector) Default: ".gSSlide"
- Object (jQuery Object)
- ```
-
- > Defines on which element the activation/deactivation events are bound.
-
- -------------------------
-
- ``` javascript
- stayOpen: Boolean Default: false
- ```
-
- > If __true__ the there is always one active slide. No deactivation is possible so none will be triggered.
-
- -------------------------
-
- ``` javascript
- keyEvents: Boolean Default: false
- ```
-
- > If __true__ the arrow keys can be used to move from one slide to the next.
-
- -------------------------
-
- ``` javascript
- circle: Boolean Default: false
- ```
-
- > Defines if after the last slide follows the first when the "next" event is triggered.
-
- -------------------------
-
- ``` javascript
- classes: {
- active: String Default: "gsActive"
- vertical: String Default: "gsVertical"
- horizontal: String Default: "gsHorizontal"
- slide: String Default: "gsSlide"
- deactivating: String Default: "gsDeactivating"
- positionActive: String Default: "gsPositionActive"
- }
- ```
-
- > Lets you customize the css classes that are set by the plugin.
-
- -------------------------
-
- ``` javascript
- cache: Boolean Default: false
- ```
-
- > Enables the caching functionality. Caches certain valus and calucalation. Use this if there are no runtime changes at all (no resizing, adding of slides etc.)
- >
- > To be honest I kind of expected more of a speed improvement from this than it actually does.. so its usefulness is questionable.. but it does definitely no harm so why not use it.
-
- -------------------------
-
- ``` javascript
- limits: { Default: {}
- min: Integer (px)
- String
- max: Integer (px)
- String
- 0: {
- min: Integer (px)
- String
- max: Integer (px)
- String
- }
- "-1": {
- min: Integer (px)
- String
- max: Integer (px)
- String
- }
- }
- ```
-
- > This allows you to set a minimum height/width and a maximum height/width (in px) for all slides or a single slide.
- >
- > __limits.min__: Sets a min width/height for every slide. So no slide can be smaller than i.e. 20px
- >
- > __limits[0].min__: Sets a min width/height for the first slide.
- >
- > __limits[-1].min__: Sets a min width/height for the last slide.
- >
- > All min/max definitions are optional and can be combined in any ways possible.
- >
- > Limits can also be set by css with min-width, max-width, min-height, max-height. Css limits always override limits that where set in the options. Also, limits for one single slide override the limits set for all slides.
- >
- > __min-width > limits[0].min > limits.min__
- >
- > Because min-width doesn't have a default like _none_, __0px is handled as undefined__ and limits[0].min will be used instead. To define __"min-width:0px" use 0%__ which will then override limits[0].min.
-
- -------------------------
-
- ``` javascript
- callbacks: { Default: {}
- "callbackName": Function(callback function)
- Object (multiple callback functions)
- Array (multiple callback functions)
- }
- ```
-
- > Allows to register callback functions during initialisation.
- >
- > To learn more about the available callbacks look at the Callbacks/Events chapter below.
-
- -------------------------
-
-1. Callbacks/Events
-----------------
-
- During the runtime of the plugin a bunch of callbacks are fired.
-
- Callbacks can be registered by adding the functions to the options object or by calling the "bindCallback" method.
-
- Every callback function receives the _data_ object as first parameter while the following parameters can change.
-
- By returning __false__ in the callback the pluging cancels the current event and stopps its action.
-
- This is a list of all the callbacks that are available at the moment (to find them in the code search for _#CALLBACK_):
-
- ``` javascript
- "preInit" function(data) Context: $(".myElement")
- ```
-
- > Called on initialisation before anything else is done.
-
- -------------------------
-
- ``` javascript
- "init" function(data) Context: $(".myElement")
- ```
-
- > Called on initialisation after all the classes and styles are set.
-
- -------------------------
-
- ``` javascript
- "postInit" function(data) Context: $(".myElement")
- ```
-
- > Called after the initialisation is complete.
-
- -------------------------
-
- ``` javascript
- "activateEvent" function(data) Context: Slide Handle
- ```
-
- > Called every time the activation event is triggered.
-
- -------------------------
-
- ``` javascript
- "deactivateEvent" function(data) Context: Slide Handle
- ```
-
- > Called every time the deactivation event is triggered.
-
- -------------------------
-
- ``` javascript
- "preActivate" function(data) Context: $(".mySlide", ".myElement")
- ```
-
- > Called before a slide is activated.
-
- -------------------------
-
- ``` javascript
- "preDeactivate" function(data) Context: $(".mySlide", ".myElement")
- ```
-
- > Called before a slide is deactivated.
-
- -------------------------
-
- ``` javascript
- "preUpdate" function(data) Context: $(".active", ".myElement")
- ```
-
- > Called before all slides are updated
-
- -------------------------
-
- ``` javascript
- "preActivateAnimation" function(data) Context: $(".myElement")
- "preDeactivateAnimation" function(data) Context: $(".myElement")
- "preUpdateAnimation" function(data) Context: $(".myElement")
- ```
-
- > Called after all caculations are done just before the animation starts.
-
- -------------------------
-
- ``` javascript
- "postActivate" function(data) Context: $(".active", ".myElement")
- ```
-
- > Called after a slide is activated.
-
- -------------------------
-
- ``` javascript
- "postDeactivate" function(data) Context: Deactivated Slide
- ```
-
- > Called after a slide is deactivated.
-
- -------------------------
-
- ``` javascript
- "postUpdate" function(data) Context: $(".active", ".myElement")
- ```
-
- > Called after all slides are updated
-
- -------------------------
-
- ``` javascript
- "step" function(data) Context: $(".active", ".myElement")
- ```
-
- > Called at every step of the animation function.
- >
- >The _data_ object contains the current position of everyslide at that moment of the animation.
- >
- >Also have a look at the _step_ callback of the jQuery animation function.
-
- -------------------------
-
- ###Add New Callback
-
- If you need a new callback that is missing, feel free to add it in the code!
- Just put the following at the place you need the call:
-
- ``` javascript
- [context].greenishSlides("_triggerCallback","myCallbackName" [,parameterOne, parameterTwo, ...]);
- ```
-
- Notice that the new callback will come with all the features of the default ones:
- * The _data_ object will always be passed as the first parameter. (And you can add as many additional parameters as you wish.)
- * return __false__ will stop the further execution of the acutal event.
-
- __When you added a new callback, tell me about it! So I can consider adding it to the default callbacks.__
\ No newline at end of file
+
+
+
+
+
+ greenish/greenishSlides @ GitHub
+
+
+
+
+
+
+
+
+
+
+
+ greenishSlides
+ by greenish
+
+
+ This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
+
+
+
+
+ Authors
+ Philipp C. Adrian (philippcadrian@greenish.ch)
+
+
+
+
+ Contact
+ Philipp C. Adrian (philippcadrian@greenish.ch)
+
+
+
+ Download
+
+ You can download this project in either
+ zip or
+ tar formats.
+
+ You can also clone the project with Git
+ by running:
+
$ git clone git://github.com/greenish/greenishSlides
+
+
+
+
+
+
+
+
diff --git a/indexbkp.html b/indexbkp.html
deleted file mode 100644
index 2c8cbee..0000000
--- a/indexbkp.html
+++ /dev/null
@@ -1,90 +0,0 @@
-
-
-
-
-
- greenish/greenishSlides @ GitHub
-
-
-
-
-
-
-
-
-
-
-
- greenishSlides
- by greenish
-
-
- This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
-
-
-
-
-
-
-
-
-
-
-
- Authors
- Philipp C. Adrian (philippcadrian@greenish.ch)
-
-
-
-
- Contact
- Philipp C. Adrian (philippcadrian@greenish.ch)
-
-
-
- Download
-
- You can download this project in either
- zip or
- tar formats.
-
- You can also clone the project with Git
- by running:
-
$ git clone git://github.com/greenish/greenishSlides
-
-
-
-
-
-
-
-
From 78d1c2bf0b9ee1aad0f1af1662220d861d96b664 Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Wed, 14 Mar 2012 00:23:50 +0100
Subject: [PATCH 06/32] Documentation Page.
---
all.css | 399 +++++++++++++++++++++++++++++
index.html | 731 +++++++++++++++++++++++++++++++++++++++++++++++++----
2 files changed, 1074 insertions(+), 56 deletions(-)
create mode 100644 all.css
diff --git a/all.css b/all.css
new file mode 100644
index 0000000..2b0a8fb
--- /dev/null
+++ b/all.css
@@ -0,0 +1,399 @@
+body {
+ margin-top: 1.0em;
+ background-color: #f0f0f0;
+ font-family: Helvetica, Arial, FreeSans, san-serif;
+ color: #333333;
+ font-size:13px;
+}
+#container {
+ margin: 100px auto;
+ width: 550px;
+ padding-left:235px;
+}
+h1 {
+ font-size: 3.8em;
+ color: #0f0f0f;
+ margin:0px 0px 50px 10px;
+}
+h1 .small { font-size: 0.4em; }
+h1 a,
+h2 a,
+h3 a {
+ text-decoration: none ;
+ color:#ffffff;
+}
+h2 {
+ font-size: 2em;
+ color: #ffffff;
+ background-color:#0f0f0f;
+ margin:20px 0px;
+ font-weight:normal;
+}
+
+h2 a {
+ padding:10px 0px 10px 10px;
+ display:block;
+}
+
+h3 { color: #0f0f0f; margin-left:10px;}
+h4 { color: #0f0f0f; margin-left:10px;}
+a { color: #0f0f0f; }
+
+p {
+ padding:2px 10px;
+}
+
+.anchor {
+ font-weight:bold;
+ display:block;
+ text-decoration:none;
+
+}
+
+.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
+.download { float: right; margin-top:-10px;}
+pre { background: #000; color: #fff; padding: 15px;}
+hr { border: 0; border-bottom: 1px solid #0f0f0f}
+.footer { text-align:center; padding-top:30px; font-style: italic; }
+
+.donateButton {
+ font-size: 1em;
+ color: #ffffff; background-color:#0f0f0f;
+ padding:10px 10px 10px 10px;
+ border:0px;
+ cursor:pointer;
+ margin:0px;
+ margin-top:10px;
+ margin-right:10px;
+}
+
+ul {
+ list-style:none;
+ padding-left:0px;
+}
+
+ul li, .box {
+ background-color:#ffffff;
+ padding:5px 10px;
+ margin:5px 0px;
+
+}
+
+li.box {
+ margin-top:20px;
+}
+.box {
+ padding:10px;
+}
+
+
+
+.highlight {
+background:#fff;
+margin-left:-225px;
+}
+
+.highlight.fit {
+margin-left:0px;
+}
+
+.highlight pre {
+background-color:#f8f8f8;
+border:1px solid #ccc;
+font-size:12px;
+line-height:19px;
+overflow:auto;
+padding:6px 10px;
+border-radius:3px;
+color:#333333;
+}
+/* GITHUB MARKDOWN HIGHLIGHTING*/
+.highlight .c {
+color:#998;
+font-style:italic;
+}
+
+.highlight .err {
+color:#a61717;
+background-color:#e3d2d2;
+}
+
+.highlight .k {
+font-weight:700;
+}
+
+.highlight .o {
+font-weight:700;
+}
+
+.highlight .cm {
+color:#998;
+font-style:italic;
+}
+
+.highlight .cp {
+color:#999;
+font-weight:700;
+}
+
+.highlight .c1 {
+color:#998;
+font-style:italic;
+}
+
+.highlight .cs {
+color:#999;
+font-weight:700;
+font-style:italic;
+}
+
+.highlight .gd {
+color:#000;
+background-color:#fdd;
+}
+
+.highlight .gd .x {
+color:#000;
+background-color:#faa;
+}
+
+.highlight .ge {
+font-style:italic;
+}
+
+.highlight .gr {
+color:#a00;
+}
+
+.highlight .gh {
+color:#999;
+}
+
+.highlight .gi {
+color:#000;
+background-color:#dfd;
+}
+
+.highlight .gi .x {
+color:#000;
+background-color:#afa;
+}
+
+.highlight .go {
+color:#888;
+}
+
+.highlight .gp {
+color:#555;
+}
+
+.highlight .gs {
+font-weight:700;
+}
+
+.highlight .gu {
+color:purple;
+font-weight:700;
+}
+
+.highlight .gt {
+color:#a00;
+}
+
+.highlight .kc {
+font-weight:700;
+}
+
+.highlight .kd {
+font-weight:700;
+}
+
+.highlight .kn {
+font-weight:700;
+}
+
+.highlight .kp {
+font-weight:700;
+}
+
+.highlight .kr {
+font-weight:700;
+}
+
+.highlight .kt {
+color:#458;
+font-weight:700;
+}
+
+.highlight .m {
+color:#099;
+}
+
+.highlight .s {
+color:#d14;
+}
+
+.highlight .na {
+color:teal;
+}
+
+.highlight .nb {
+color:#0086B3;
+}
+
+.highlight .nc {
+color:#458;
+font-weight:700;
+}
+
+.highlight .no {
+color:teal;
+}
+
+.highlight .ni {
+color:purple;
+}
+
+.highlight .ne {
+color:#900;
+font-weight:700;
+}
+
+.highlight .nf {
+color:#900;
+font-weight:700;
+}
+
+.highlight .nn {
+color:#555;
+}
+
+.highlight .nt {
+color:navy;
+}
+
+.highlight .nv {
+color:teal;
+}
+
+.highlight .ow {
+font-weight:700;
+}
+
+.highlight .w {
+color:#bbb;
+}
+
+.highlight .mf {
+color:#099;
+}
+
+.highlight .mh {
+color:#099;
+}
+
+.highlight .mi {
+color:#099;
+}
+
+.highlight .mo {
+color:#099;
+}
+
+.highlight .sb {
+color:#d14;
+}
+
+.highlight .sc {
+color:#d14;
+}
+
+.highlight .sd {
+color:#d14;
+}
+
+.highlight .s2 {
+color:#d14;
+}
+
+.highlight .se {
+color:#d14;
+}
+
+.highlight .sh {
+color:#d14;
+}
+
+.highlight .si {
+color:#d14;
+}
+
+.highlight .sx {
+color:#d14;
+}
+
+.highlight .sr {
+color:#009926;
+}
+
+.highlight .s1 {
+color:#d14;
+}
+
+.highlight .ss {
+color:#990073;
+}
+
+.highlight .bp {
+color:#999;
+}
+
+.highlight .vc {
+color:teal;
+}
+
+.highlight .vg {
+color:teal;
+}
+
+.highlight .vi {
+color:teal;
+}
+
+.highlight .il {
+color:#099;
+}
+
+.highlight .gc {
+color:#999;
+background-color:#EAF2F5;
+}
+
+.type-csharp .highlight .k {
+color:#00F;
+}
+
+.type-csharp .highlight .kt {
+color:#00F;
+}
+
+.type-csharp .highlight .nf {
+color:#000;
+font-weight:400;
+}
+
+.type-csharp .highlight .nc {
+color:#2B91AF;
+}
+
+.type-csharp .highlight .nn {
+color:#000;
+}
+
+.type-csharp .highlight .s {
+color:#A31515;
+}
+
+.type-csharp .highlight .sc {
+color:#A31515;
+}
diff --git a/index.html b/index.html
index d41b4b0..0ee7af8 100644
--- a/index.html
+++ b/index.html
@@ -1,83 +1,702 @@
-
-
-
- greenish/greenishSlides @ GitHub
-
-
+
+
+ greenishSlides - jQuery slideshow plugin - v0.2
+
+
+
-
- greenishSlides
- by greenish
+ greenishSlides
+
+
+
+ jQuery slideshow plugin - v0.2 - beta
-
- This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
-
-
+ This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
+
+ This plugin is inspired by the jQuery UI Accordion and Kwicks for Mootools / Kwicks for jQuery.
+
+ The main reason to start to develop this plugin where a certain set of specifications and customizaitions I needed for The Book in Motion website i've been developing, that none of the above where quite offering.
+
+
+ So here are these specifications and features that this plugin provides - plus some others (I kinda got into it):
+
+
+ - The Slideshow is resizable without javascript -> so no jittering even when using a fullscreen slideshow.
+ - There are NO gaps and spaces between the slides during the animation.
+ - Limits (max-/min-width) can be set for all slides but also for one single slide (or two).
+ - The plugin doesn't require a predefined markup like an unordered list or h3 headers and divs.. it just takes what it gets.
+ - You can mess around with the css on runtime and the plugin still finds the proper position for each slide when its next event is triggered.
+ - Lots of options to turn things on and off..
+ - And a lots of callbacks and events that allow to customize, extend and manipulate the plugins behaviour to make it really flexible. Also its easy to add new callbacks where they're needed.
+ - Fully browser compatible: IE 7.0+ (haven't tested on IE6 - screw it!), Firefox 3+, Safari 3.1+, Opera 9.6+ and Google Chrome.
+
+
+
+ So as said above, this plugin has been developed for The Book in Motion website and this website is probably the best way to see what this plugin is capable of.
+
+ Also it's used on the frontpage of the City University of New York - Graduate Center as well as image gallery on some subpages.
+
+ What follows here is FINALLY the documentation of the plugin. It's been a lot of work that went into it and I'm very happy to finally make available for everybody.
+
+ I'm happy for any feedback, suggestions and bug reports (well not happy, but grateful in the last case :) )
+
+ And when you come to use the plugin: SHOW ME! I would love to see what you're doing with it!
+
+ General
+
+ To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder.
+
+ Include the file into your HTML and you're ready to go:
+
+
+
+jQuery(document).ready(function(){
+ $(".myElement").greenishSlides();
+});
+
+
+
+
+ All child elements of .myElement element will be turned into slides.
+
+ So the code above will turn each one of these:
+
+
+
+<ul class="myElement">
+ <li></li>
+ <li></li>
+</ul>
+
+
+
+
+
+
+<div class="myElement">
+ <div></div>
+ <div></div>
+</div>
+
+
+
+
+
+
+<div class="myElement">
+ <a></a>
+ <div></div>
+</div>
+
+
+
+ Into a slideshow that's markup will look (in the first case: <ul>) like this:
+
+
+
+<ul class="myElement greenishSlides">
+ <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+ <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+</ul>
+
+
+
+
+
+ Methods
+
+
+
+$(".myElement").greenishSlides([Object options]);
+
+
+
+
+ Initialize / Update Options
+
+ Initialize the greenishSlides plugin on a set of HTML Elements.
+
+ Optional you cann pass an object with options (see below) to the function.
+
+ Also you can change options with this at any time after initialisation.
+
+
+
+
+"activate" $(".mySlide",".myElement").greenishSlides("activate");
+
+
+
+
+ Activate Slide
+
+ Activates the slide this method is called on.
+
+
+
+
+"deactivate" $(".mySlide", ".myElement").greenishSlides("deactivate");
+
+
+
+
+ Deactivate Slide
+
+ Deactivates the slide this method is called on.
+
+
+
+
+"update" $(".myElement").greenishSlides("update");
+
+
+
+
+ Update Slide Positions.
+
+ Updates the position of all slides.
+
+ Needs to be called adding a new slide or after a resize happened without the resize option enabled.
+
+
+
+
+"next" $(".myElement").greenishSlides("next", [Integer goFromSlideId]);
+
+
+
+
+ Activates Next Slide.
+
+ Activates the next slide to the left/bottom of the active slide.
+ Optionaly you can pass the index of a slide to take its next.
+
+
+
+
+"prev" $(".myElement").greenishSlides("prev", [Integer goFromSlideId]);
+
+
+
+
+ Activates Previous Slide.
+
+ Activates the next slide to the right/top of the active slide.
+ Optionaly you can pass the index of a slide to take its previous.
+
+
+
+
+"bindCallback" $(".myElement").greenishSlides("bindCallback", Function);
+
+
+
+
+ Bind a Callback/Event
+
+ Registers or binds a callback function to a certain event. (see below).
+
+
+
+
+"clearCache" $(".myElement").greenishSlides("clearCache");
+
+
+
+
+ Clear Cache
+
+ Removes all cached informations. (Caching can be enabled by option).
+
+
-
- Authors
- Philipp C. Adrian (philippcadrian@greenish.ch)
-
-
+ Options
+
+ Options can be set or changed by passing an object to the greenishSlides function. This can be done on initialisation or afterwards to change any value (for example limits).
+
+ Here are all the possibile options (set to their default values):
+
+
+
+$(".myElement").greenishSlides({
+ vertical:false,
+ resizable:false,
+ active:false,
+ transitionSpeed: 400,
+ easing:"swing",
+ events: {
+ activate:"click",
+ deactivate:"click"
+ },
+ handle:".gsSlide",
+ stayOpen: false,
+ keyEvents:false,
+ circle : false,
+ classes:{
+ active:"gsAactive",
+ vertical:"gsVertical",
+ horizontal:"gsHorizontal",
+ slide:"gsSlide",
+ deactivating:"gsDeactivating",
+ positionActive:"gsPositionActive"
+ },
+ cache:false,
+ limits : {},
+ callbacks : {}
+});
+
+
+
+
+ Option Details
+
+
+
+vertical: Boolean Default: false
+
+
+
+
+ Defines the orientation of the greenishSlides element.
+
+
+
+
+resizable: Boolean Default: false
+
+
+
+
+ Defines if the greenishSlides element can be resized on runtime.
+
+ If true slides on the left side of the active slide will be positioned differently from the ones on the right, to allow resizing without javascript.
+
+ Still if there are limits set to any slide, resizing may need an event handler that will also be set if necessary.
+
+ Be aware that this needs some extra calculations and (more important) some DOM changes which will influence the performance so only switch this on if you really need it.
+
+
+
+
+active: Boolean Default: false
+ Object (jQuery Object)
+ String (jQuery Selector)
+ Integer (Slide Index)
+
+
+
+
+ Defines the active Slide after initialisation.
+
+
+ - false: No Slide (or the first Slide if stayOpen:true) is active.
+
+ - true: The first Slide is active.
+
+ - 0 : The first Slide is active.
+
+ - -1 : The last Slide is active.
+
+
+
+
+transitionSpeed: Integer (ms) Default: 400
+
+
+
+
+ Defines the duration of the animations in milliseconds.
+
+
+
+
+easing: String Default: "swing"
+
+
+
+
+ Defines what kind of easing algorythem should be used in the animations. Works with the jQuery easing plugin.
+
+
+
+
+events: {
+ activate: String Default: "click"
+ deactivate: String Default: "click"
+}
+
+
+
+
+ Lets you define what browser events will trigger the activation/deactivation events of a slide.
+
+
+
+
+handle: String (jQuery Selector) Default: ".gSSlide"
+ Object (jQuery Object)
+
+
+
+
+ Defines on which element the activation/deactivation events are bound.
+
+
+
+
+stayOpen: Boolean Default: false
+
+
+
+
+ If true the there is always one active slide. No deactivation is possible so none will be triggered.
+
+
+
+
+keyEvents: Boolean Default: false
+
+
+
+
+ If true the arrow keys can be used to move from one slide to the next.
+
+
+
+
+circle: Boolean Default: false
+
+
+
+
+ Defines if after the last slide follows the first when the "next" event is triggered.
+
+
+
+
+classes: {
+ active: String Default: "gsActive"
+ vertical: String Default: "gsVertical"
+ horizontal: String Default: "gsHorizontal"
+ slide: String Default: "gsSlide"
+ deactivating: String Default: "gsDeactivating"
+ positionActive: String Default: "gsPositionActive"
+}
+
+
+
+
+ Lets you customize the css classes that are set by the plugin.
+
+
+
+
+cache: Boolean Default: false
+
+
+
+
+ Enables the caching functionality. Caches certain valus and calucalation. Use this if there are no runtime changes at all (no resizing, adding of slides etc.)
+
+ To be honest I kind of expected more of a speed improvement from this than it actually does.. so its usefulness is questionable.. but it does definitely no harm so why not use it.
+
+
+
+
+limits: { Default: {}
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ 0: {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+ "-1": {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+}
+
+
+
+
+ This allows you to set a minimum height/width and a maximum height/width (in px) for all slides or a single slide.
+
+ - limits.min: Sets a min width/height for every slide. No slide can be smaller than i.e. 20px
+
+ - limits[0].min: Sets a min width/height for the first slide.
+
+ - limits[-1].min: Sets a min width/height for the last slide.
+
+ All min/max definitions are optional and can be combined in any ways possible.
+
+ Limits can also be set by css with min-width, max-width, min-height, max-height. Css limits always override limits that where set in the options. Also, limits for one single slide override the limits set for all slides.
+
+ min-width > limits[0].min > limits.min
+
+ Because min-width doesn't have a default like none, 0px is handled as undefined and limits[0].min will be used instead. To define "min-width:0px" use 0% which will then override limits[0].min.
+
+
+
+
+callbacks: { Default: {}
+ "callbackName": Function(callback function)
+ Object (multiple callback functions)
+ Array (multiple callback functions)
+}
+
+
+
+
+ Allows to register callback functions during initialisation.
+
+ To learn more about the available callbacks look at the Callbacks/Events chapter below.
+
+
-
- Contact
- Philipp C. Adrian (philippcadrian@greenish.ch)
-
-
- Download
+
+
+ Callbacks/Events
+
+ During the runtime of the plugin a bunch of callbacks are fired.
+
+ Callbacks can be registered by adding the functions to the options object or by calling the "bindCallback" method.
+
+ Every callback function receives the data object as first parameter while the following parameters can change.
+
+ By returning false in the callback the pluging cancels the current event and stopps its action.
+
+ This is a list of all the callbacks that are available at the moment (to find them in the code search for #CALLBACK):
+
+
+
+"preInit" function(data) Context: $(".myElement")
+
+
+
+
+ Called on initialisation before anything else is done.
+
+
+
+
+"init" function(data) Context: $(".myElement")
+
+
+
+
+ Called on initialisation after all the classes and styles are set.
+
+
+
+
+"postInit" function(data) Context: $(".myElement")
+
+
+
+
+ Called after the initialisation is complete.
+
+
+
+
+"activateEvent" function(data) Context: Slide Handle
+
+
+
+
+ Called every time the activation event is triggered.
+
+
+
+
+"deactivateEvent" function(data) Context: Slide Handle
+
+
+
+
+ Called every time the deactivation event is triggered.
+
+
+
+
+"preActivate" function(data) Context: $(".mySlide", ".myElement")
+
+
+
+
+ Called before a slide is activated.
+
+
+
+
+"preDeactivate" function(data) Context: $(".mySlide", ".myElement")
+
+
+
+
+ Called before a slide is deactivated.
+
+
+
+
+"preUpdate" function(data) Context: $(".active", ".myElement")
+
+
+
+
+ Called before all slides are updated
+
+
+
+
+"preActivateAnimation" function(data) Context: $(".myElement")
+"preDeactivateAnimation" function(data) Context: $(".myElement")
+"preUpdateAnimation" function(data) Context: $(".myElement")
+
+
+
+
+ Called after all caculations are done just before the animation starts.
+
+
+
+
+"postActivate" function(data) Context: $(".active", ".myElement")
+
+
+
+
+ Called after a slide is activated.
+
+
+
+
+"postDeactivate" function(data) Context: Deactivated Slide
+
+
+
+
+ Called after a slide is deactivated.
+
+
+
+
+"postUpdate" function(data) Context: $(".active", ".myElement")
+
+
+
+
+ Called after all slides are updated
+
+
+
+
+"step" function(data) Context: $(".active", ".myElement")
+
+
+
+
+ Called at every step of the animation function.
+
+ The data object contains the current position of everyslide at that moment of the animation.
+
+ Also have a look at the step callback of the jQuery animation function.
+
+
+
+ Add New Callback
+
+ If you need a new callback that is missing, feel free to add it in the code!
+ Just put the following at the place you need the call:
+
+
+
+[context].greenishSlides("_triggerCallback","myCallbackName" [,parameterOne, parameterTwo, ...]);
+
+
+
+
+ Notice that the new callback will come with all the features of the default ones:
+
+
+ - The data object will always be passed as the first parameter. (And you can add as many additional parameters as you wish.)
+ - return false will stop the further execution of the acutal event.
+
+ When you added a new callback, tell me about it! So I can consider adding it to the default callbacks.
+
+ License
+ Copyright © 2011-2012 Philipp C. Adrian
+ Dual licensed under the MIT and GPL licenses.
+
+
Download
You can download this project in either
zip or
tar formats.
- You can also clone the project with Git
- by running:
-
$ git clone git://github.com/greenish/greenishSlides
-
+ You can also clone the project with Git by running:
+
+$ git clone git://github.com/greenish/greenishSlides
+
+ Or get the source code on GitHub : greenish/greenishSlides
-
+
+ Author
+ Philipp C. Adrian (greenish), graphic designer form Basel, Switzerland.
+
+
+
+
+
-
+
From 5f088fe9a68919a6b17332103fca4aedacf4d00b Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Wed, 14 Mar 2012 00:44:46 +0100
Subject: [PATCH 07/32] link targets, google-analytics (setup)
---
all.css | 8 +++++++-
index.html | 27 ++++++++++++++++++---------
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/all.css b/all.css
index 2b0a8fb..57ac751 100644
--- a/all.css
+++ b/all.css
@@ -33,11 +33,15 @@ h2 {
h2 a {
padding:10px 0px 10px 10px;
display:block;
+ font-style:normal;
}
h3 { color: #0f0f0f; margin-left:10px;}
h4 { color: #0f0f0f; margin-left:10px;}
-a { color: #0f0f0f; }
+a {
+ color: #0f0f0f;
+ font-style:italic;
+}
p {
padding:2px 10px;
@@ -47,6 +51,7 @@ p {
font-weight:bold;
display:block;
text-decoration:none;
+ font-style:normal;
}
@@ -82,6 +87,7 @@ ul li, .box {
li.box {
margin-top:20px;
}
+
.box {
padding:10px;
}
diff --git a/index.html b/index.html
index 0ee7af8..fc76f9e 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
+
greenishSlides - jQuery slideshow plugin - v0.2
@@ -9,7 +10,7 @@
-
+
+
From 70c0a49b5c23ecd106b531473d0765c7a970835a Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Wed, 14 Mar 2012 00:46:48 +0100
Subject: [PATCH 08/32] tweak
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index fc76f9e..4765493 100644
--- a/index.html
+++ b/index.html
@@ -666,7 +666,7 @@ Add New Callback
License
Copyright © 2011-2012 Philipp C. Adrian
- Dual licensed under the MIT and GPL licenses.
+
Dual licensed under the MIT and GPL licenses.
Download
From 8d7afb38db4ea570d08da8d97799f63c31677d62 Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian"
Date: Thu, 15 Mar 2012 00:26:06 +0100
Subject: [PATCH 09/32] setting up examples..
plugin needs to accept option changes...
---
all.css | 67 ++-
greenishPlugins.js | 21 +
index.html | 89 +++-
jquery-1.7.1.min.js | 4 +
jquery-ui-1.8.18.custom.min.js | 29 ++
jquery.greenishSlides-v0.2-beta.js | 712 +++++++++++++++++++++++++++++
6 files changed, 911 insertions(+), 11 deletions(-)
create mode 100644 greenishPlugins.js
create mode 100644 jquery-1.7.1.min.js
create mode 100755 jquery-ui-1.8.18.custom.min.js
create mode 100644 jquery.greenishSlides-v0.2-beta.js
diff --git a/all.css b/all.css
index 57ac751..0f8591c 100644
--- a/all.css
+++ b/all.css
@@ -6,14 +6,15 @@ body {
font-size:13px;
}
#container {
+ position:relative;
margin: 100px auto;
width: 550px;
- padding-left:235px;
+ padding-left:370px;
}
h1 {
- font-size: 3.8em;
+ font-size: 2.5em;
color: #0f0f0f;
- margin:0px 0px 50px 10px;
+ margin:0px 0px 20px 10px;
}
h1 .small { font-size: 0.4em; }
h1 a,
@@ -55,6 +56,66 @@ p {
}
+.myElement {
+ position:relative;
+ height:250px;
+ margin:20px -0px 40px -370px;
+ border:5px solid #000000;
+ background-color:#ff3333;
+}
+
+.myElement.gsHorizontal {
+ border-width:5px 2px;
+}
+.gsVertical {
+ border-width:2px 5px;
+}
+.gsSlide {
+ outline:2px solid #000000;
+ background-color:#fefefe;
+}
+
+.gsSlide.even {
+}
+
+
+
+.examples {
+ position:absolute;
+ left:0px;
+ width:306px;
+ padding:0px;
+ margin:0px;
+ margin-top:-40px;
+}
+.examples li {
+ background-color:transparent;
+ margin:5px 0px;
+ padding:0px;
+}
+
+.examples .box {
+ display:block;
+ margin:0px;
+ padding:5px 10px;
+ background-color:#000000;
+ color:#ffffff;
+ font-style:normal;
+ text-decoration:none;
+ font-weight:bold;
+ cursor:pointer;
+ margin-bottom:2px;
+ outline:none;
+}
+
+.examples pre {
+ margin:4px 0px;
+}
+
+
+
+
+
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
.download { float: right; margin-top:-10px;}
pre { background: #000; color: #fff; padding: 15px;}
diff --git a/greenishPlugins.js b/greenishPlugins.js
new file mode 100644
index 0000000..bb44dd2
--- /dev/null
+++ b/greenishPlugins.js
@@ -0,0 +1,21 @@
+(function($){
+ $(document).ready(function() {
+ $(".myElement").greenishSlides({
+ events: {
+ activate:"mouseover",
+ deactivate:"mouseout"
+ },
+ limits: {
+ min:30
+ }
+ });
+
+ $(".examples").accordion({
+ active:1,
+ header:".handle",
+ change: function (event, ui){
+ console.log("hange")
+ }
+ });
+ });
+})(jQuery);
diff --git a/index.html b/index.html
index 4765493..2f7ba6d 100644
--- a/index.html
+++ b/index.html
@@ -15,13 +15,76 @@
greenishSlides
+
+
+
+
+
+
+
+
+
+
+ -
+
+ Example 1: Events, Limits
+
+
+
+$(".myElement").greenishSlides({
+ events: {
+ activate:"mouseover",
+ deactivate:"mouseout"
+ },
+ limits: {
+ min:30
+ }
+});
+
+
+
+ -
+
+ Hellos
+
+
+ -
+
+ Example 1: Events, Limits
+
+
+
+$(".myElement").greenishSlides({
+ events: {
+ activate:"mouseover",
+ deactivate:"mouseout"
+ },
+ limits: {
+ min:30
+ }
+});
+
+
+
+ -
+
+ Hellos
+
+
+ -
+
+ Hellos
+
+
+
+
- jQuery slideshow plugin - v0.2 - beta
+ About
+
+ jQuery slideshow plugin - v0.2 - beta
This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
@@ -77,7 +142,7 @@ jQuery slideshow plugin - v0.2 - beta
General
- To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder.
+ To start off, get the newest version of the greenishSlides plugin (downloads) move it into your project folder.
Include the file into your HTML and you're ready to go:
@@ -127,9 +192,9 @@ General
-<ul class="myElement greenishSlides">
- <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
- <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+<ul class="myElement greenishSlides gsHorizontal/gsVertical">
+ <li class="gsSlide [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+ <li class="gsSlide [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
</ul>
@@ -503,7 +568,7 @@ Callbacks/Events
Every callback function receives the data object as first parameter while the following parameters can change.
- By returning false in the callback the pluging cancels the current event and stopps its action.
+ By returning false in the callback the plugin cancels the current event and stopps its action.
This is a list of all the callbacks that are available at the moment (to find them in the code search for #CALLBACK):
@@ -698,6 +763,14 @@ Author
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
by greenish
greenishSlides
-
+
Authors
-
Philipp C. Adrian (philippcadrian@greenish.ch)
Philipp C. Adrian (philippcadrian@greenish.ch)
+
Contact
-Philipp C. Adrian (philippcadrian@greenish.ch)
Philipp C. Adrian (philippcadrian@greenish.ch)
+
Download
From cff422d8f7749a631a8c132426761a508273126a Mon Sep 17 00:00:00 2001 From: "Philipp C. Adrian"-
+
+
+
- `) like this:
+
+ ``` html
+
- The Slideshow is resizable without javascript -> so no jittering even when using a fullscreen slideshow. +
- There are NO gaps and spaces between the slides during the animation. +
- Limits (max-/min-width) can be set for all slides but also for one single slide (or two). +
- The plugin doesn't require a predefined markup like an unordered list or h3 headers and divs.. it just takes what it gets. +
- You can mess around with the css on runtime and the plugin still finds the proper position for each slide when its next event is triggered. +
- Lots of options to turn things on and off.. +
- And a lots of callbacks and events that allow to customize, extend and manipulate the plugins behaviour to make it really flexible. Also its easy to add new callbacks where they're needed. +
- Fully browser compatible: IE 7.0+ (haven't tested on IE6 - screw it!), Firefox 3+, Safari 3.1+, Opera 9.6+ and Google Chrome. +
- false: No Slide (or the first Slide if stayOpen:true) is active. + +
- true: The first Slide is active. + +
- 0 : The first Slide is active. + +
- -1 : The last Slide is active. +
- limits.min: Sets a min width/height for every slide. No slide can be smaller than i.e. 20px + +
- limits[0].min: Sets a min width/height for the first slide. + +
- limits[-1].min: Sets a min width/height for the last slide. +
- The data object will always be passed as the first parameter. (And you can add as many additional parameters as you wish.) +
- return false will stop the further execution of the acutal event. +
-
+
+
+
-
-
-
-
- `) like this:
-
- ``` html
-
-
-
-
-
+
+ greenishSlides
+ by greenish
+
+ Authors
+Philipp C. Adrian (philippcadrian@greenish.ch)
+
Contact
+Philipp C. Adrian (philippcadrian@greenish.ch)
+
Download
++ You can download this project in either + zip or + tar formats. +
+You can also clone the project with Git + by running: +
$ git clone git://github.com/greenish/greenishSlides+ + + + +
-
- greenishSlides
- by greenish
-
- Authors
-Philipp C. Adrian (philippcadrian@greenish.ch)
-
Contact
-Philipp C. Adrian (philippcadrian@greenish.ch)
-
Download
-- You can download this project in either - zip or - tar formats. -
-You can also clone the project with Git - by running: -
$ git clone git://github.com/greenish/greenishSlides- - - - -
greenishSlides
- by greenish
+ greenishSlides
+ + + +jQuery slideshow plugin - v0.2 - beta
-This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery.
+ +This plugin is inspired by the jQuery UI Accordion and Kwicks for Mootools / Kwicks for jQuery.
+ +The main reason to start to develop this plugin where a certain set of specifications and customizaitions I needed for The Book in Motion website i've been developing, that none of the above where quite offering.
+ ++
So here are these specifications and features that this plugin provides - plus some others (I kinda got into it):
+ +-
+
+
So as said above, this plugin has been developed for The Book in Motion website and this website is probably the best way to see what this plugin is capable of.
+ +Also it's used on the frontpage of the City University of New York - Graduate Center as well as image gallery on some subpages.
+ +What follows here is FINALLY the documentation of the plugin. It's been a lot of work that went into it and I'm very happy to finally make available for everybody.
+ +I'm happy for any feedback, suggestions and bug reports (well not happy, but grateful in the last case :) )
+ +And when you come to use the plugin: SHOW ME! I would love to see what you're doing with it!
+ +General
+ +To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder.
+ +Include the file into your HTML and you're ready to go:
+ +
+jQuery(document).ready(function(){
+ $(".myElement").greenishSlides();
+});
+
+ All child elements of .myElement element will be turned into slides.
+ +So the code above will turn each one of these:
+ +
+<ul class="myElement">
+ <li></li>
+ <li></li>
+</ul>
+
+
+<div class="myElement">
+ <div></div>
+ <div></div>
+</div>
+
+
+<div class="myElement">
+ <a></a>
+ <div></div>
+</div>
+
+ Into a slideshow that's markup will look (in the first case: <ul>) like this:
+<ul class="myElement greenishSlides">
+ <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+ <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+</ul>
+
+ Methods
+ +
+$(".myElement").greenishSlides([Object options]);
+
+ Initialize / Update Options
+ +Initialize the greenishSlides plugin on a set of HTML Elements.
+ +Optional you cann pass an object with options (see below) to the function.
+ +Also you can change options with this at any time after initialisation.
+ ++
+"activate" $(".mySlide",".myElement").greenishSlides("activate");
+
+ Activate Slide
+ +Activates the slide this method is called on.
+ ++
+"deactivate" $(".mySlide", ".myElement").greenishSlides("deactivate");
+
+ Deactivate Slide
+ +Deactivates the slide this method is called on.
+ ++
+"update" $(".myElement").greenishSlides("update");
+
+ Update Slide Positions.
+ +Updates the position of all slides.
+ +Needs to be called adding a new slide or after a resize happened without the resize option enabled.
+ ++
+"next" $(".myElement").greenishSlides("next", [Integer goFromSlideId]);
+
+ Activates Next Slide.
+ +Activates the next slide to the left/bottom of the active slide. + Optionaly you can pass the index of a slide to take its next.
+ ++
+"prev" $(".myElement").greenishSlides("prev", [Integer goFromSlideId]);
+
+ Activates Previous Slide.
+ +Activates the next slide to the right/top of the active slide. + Optionaly you can pass the index of a slide to take its previous.
+ ++
+"bindCallback" $(".myElement").greenishSlides("bindCallback", Function);
+
+ Bind a Callback/Event
+ +Registers or binds a callback function to a certain event. (see below).
+ ++
+"clearCache" $(".myElement").greenishSlides("clearCache");
+
+ Clear Cache
+ +Removes all cached informations. (Caching can be enabled by option).
+ +- -
Authors
-Philipp C. Adrian (philippcadrian@greenish.ch)
-
Options
+ +Options can be set or changed by passing an object to the greenishSlides function. This can be done on initialisation or afterwards to change any value (for example limits).
+ +Here are all the possibile options (set to their default values):
+ +
+$(".myElement").greenishSlides({
+ vertical:false,
+ resizable:false,
+ active:false,
+ transitionSpeed: 400,
+ easing:"swing",
+ events: {
+ activate:"click",
+ deactivate:"click"
+ },
+ handle:".gsSlide",
+ stayOpen: false,
+ keyEvents:false,
+ circle : false,
+ classes:{
+ active:"gsAactive",
+ vertical:"gsVertical",
+ horizontal:"gsHorizontal",
+ slide:"gsSlide",
+ deactivating:"gsDeactivating",
+ positionActive:"gsPositionActive"
+ },
+ cache:false,
+ limits : {},
+ callbacks : {}
+});
+
+ Option Details
+ +
+vertical: Boolean Default: false
+
+ Defines the orientation of the greenishSlides element.
+ ++
+resizable: Boolean Default: false
+
+ Defines if the greenishSlides element can be resized on runtime.
+ +If true slides on the left side of the active slide will be positioned differently from the ones on the right, to allow resizing without javascript.
+ +Still if there are limits set to any slide, resizing may need an event handler that will also be set if necessary.
+ +Be aware that this needs some extra calculations and (more important) some DOM changes which will influence the performance so only switch this on if you really need it.
+ ++
+active: Boolean Default: false
+ Object (jQuery Object)
+ String (jQuery Selector)
+ Integer (Slide Index)
+
+ Defines the active Slide after initialisation.
+ +-
+
+
+transitionSpeed: Integer (ms) Default: 400
+
+ Defines the duration of the animations in milliseconds.
+ ++
+easing: String Default: "swing"
+
+ Defines what kind of easing algorythem should be used in the animations. Works with the jQuery easing plugin.
+ ++
+events: {
+ activate: String Default: "click"
+ deactivate: String Default: "click"
+}
+
+ Lets you define what browser events will trigger the activation/deactivation events of a slide.
+ ++
+handle: String (jQuery Selector) Default: ".gSSlide"
+ Object (jQuery Object)
+
+ Defines on which element the activation/deactivation events are bound.
+ ++
+stayOpen: Boolean Default: false
+
+ If true the there is always one active slide. No deactivation is possible so none will be triggered.
+ ++
+keyEvents: Boolean Default: false
+
+ If true the arrow keys can be used to move from one slide to the next.
+ ++
+circle: Boolean Default: false
+
+ Defines if after the last slide follows the first when the "next" event is triggered.
+ ++
+classes: {
+ active: String Default: "gsActive"
+ vertical: String Default: "gsVertical"
+ horizontal: String Default: "gsHorizontal"
+ slide: String Default: "gsSlide"
+ deactivating: String Default: "gsDeactivating"
+ positionActive: String Default: "gsPositionActive"
+}
+
+ Lets you customize the css classes that are set by the plugin.
+ ++
+cache: Boolean Default: false
+
+ Enables the caching functionality. Caches certain valus and calucalation. Use this if there are no runtime changes at all (no resizing, adding of slides etc.)
+ +To be honest I kind of expected more of a speed improvement from this than it actually does.. so its usefulness is questionable.. but it does definitely no harm so why not use it.
+ ++
+limits: { Default: {}
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ 0: {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+ "-1": {
+ min: Integer (px)
+ String
+ max: Integer (px)
+ String
+ }
+}
+
+ This allows you to set a minimum height/width and a maximum height/width (in px) for all slides or a single slide.
+-
+
All min/max definitions are optional and can be combined in any ways possible.
+ +Limits can also be set by css with min-width, max-width, min-height, max-height. Css limits always override limits that where set in the options. Also, limits for one single slide override the limits set for all slides.
+ +min-width > limits[0].min > limits.min
+ +Because min-width doesn't have a default like none, 0px is handled as undefined and limits[0].min will be used instead. To define "min-width:0px" use 0% which will then override limits[0].min.
+ ++
+callbacks: { Default: {}
+ "callbackName": Function(callback function)
+ Object (multiple callback functions)
+ Array (multiple callback functions)
+}
+
+ Allows to register callback functions during initialisation.
+ +To learn more about the available callbacks look at the Callbacks/Events chapter below.
+ +- -
Contact
-Philipp C. Adrian (philippcadrian@greenish.ch)
-
Download
+ + +Callbacks/Events
+ +During the runtime of the plugin a bunch of callbacks are fired.
+ +Callbacks can be registered by adding the functions to the options object or by calling the "bindCallback" method.
+ +Every callback function receives the data object as first parameter while the following parameters can change.
+ +By returning false in the callback the pluging cancels the current event and stopps its action.
+ +This is a list of all the callbacks that are available at the moment (to find them in the code search for #CALLBACK):
+ +
+"preInit" function(data) Context: $(".myElement")
+
+ Called on initialisation before anything else is done.
+ ++
+"init" function(data) Context: $(".myElement")
+
+ Called on initialisation after all the classes and styles are set.
+ ++
+"postInit" function(data) Context: $(".myElement")
+
+ Called after the initialisation is complete.
+ ++
+"activateEvent" function(data) Context: Slide Handle
+
+ Called every time the activation event is triggered.
+ ++
+"deactivateEvent" function(data) Context: Slide Handle
+
+ Called every time the deactivation event is triggered.
+ ++
+"preActivate" function(data) Context: $(".mySlide", ".myElement")
+
+ Called before a slide is activated.
+ ++
+"preDeactivate" function(data) Context: $(".mySlide", ".myElement")
+
+ Called before a slide is deactivated.
+ ++
+"preUpdate" function(data) Context: $(".active", ".myElement")
+
+ Called before all slides are updated
+ ++
+"preActivateAnimation" function(data) Context: $(".myElement")
+"preDeactivateAnimation" function(data) Context: $(".myElement")
+"preUpdateAnimation" function(data) Context: $(".myElement")
+
+ Called after all caculations are done just before the animation starts.
+ ++
+"postActivate" function(data) Context: $(".active", ".myElement")
+
+ Called after a slide is activated.
+ ++
+"postDeactivate" function(data) Context: Deactivated Slide
+
+ Called after a slide is deactivated.
+ ++
+"postUpdate" function(data) Context: $(".active", ".myElement")
+
+ Called after all slides are updated
+ ++
+"step" function(data) Context: $(".active", ".myElement")
+
+ Called at every step of the animation function.
+ +The data object contains the current position of everyslide at that moment of the animation.
+ +Also have a look at the step callback of the jQuery animation function.
+ ++ +
Add New Callback
+ +If you need a new callback that is missing, feel free to add it in the code! + Just put the following at the place you need the call:
+ +
+[context].greenishSlides("_triggerCallback","myCallbackName" [,parameterOne, parameterTwo, ...]);
+
+ Notice that the new callback will come with all the features of the default ones:
+ +-
+
When you added a new callback, tell me about it! So I can consider adding it to the default callbacks.
+ +License
+Copyright © 2011-2012 Philipp C. Adrian
+Dual licensed under the MIT and GPL licenses.
+ +
Download
You can download this project in either zip or tar formats.
-You can also clone the project with Git - by running: -
$ git clone git://github.com/greenish/greenishSlides- +
You can also clone the project with Git by running:
+$ git clone git://github.com/greenish/greenishSlides
+ Or get the source code on GitHub : greenish/greenishSlides
- + +Author
+Philipp C. Adrian (greenish), graphic designer form Basel, Switzerland.
+ + +
+
Add New Callback
License
Copyright © 2011-2012 Philipp C. Adrian
-Dual licensed under the MIT and GPL licenses.
+
Dual licensed under the MIT and GPL licenses.
Download
From 8d7afb38db4ea570d08da8d97799f63c31677d62 Mon Sep 17 00:00:00 2001
From: "Philipp C. Adrian" jQuery slideshow plugin - v0.2 - beta This is a pretty flexible and highly customizable slideshow/accordion plugin for jQuery. To start off, get the newest version of the greenishSlides plugin from Github and move it into your project folder. To start off, get the newest version of the greenishSlides plugin (downloads) move it into your project folder. Include the file into your HTML and you're ready to go: Every callback function receives the data object as first parameter while the following parameters can change. By returning false in the callback the pluging cancels the current event and stopps its action. By returning false in the callback the plugin cancels the current event and stopps its action. This is a list of all the callbacks that are available at the moment (to find them in the code search for #CALLBACK):greenishSlides
+
+
+
-
+$(".myElement").greenishSlides({
+ events: {
+ activate:"mouseover",
+ deactivate:"mouseout"
+ },
+ limits: {
+ min:30
+ }
+});
+
+
+$(".myElement").greenishSlides({
+ events: {
+ activate:"mouseover",
+ deactivate:"mouseout"
+ },
+ limits: {
+ min:30
+ }
+});
+
+ jQuery slideshow plugin - v0.2 - beta
+ About
+
+ jQuery slideshow plugin - v0.2 - beta
General
- General
-<ul class="myElement greenishSlides">
- <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
- <li class="gsSlide gsHorizontal/gsVertical [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+<ul class="myElement greenishSlides gsHorizontal/gsVertical">
+ <li class="gsSlide [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
+ <li class="gsSlide [gsActive] [gsPositionActive] [top/left] [bottom/right] [gsDeactivating]"></li>
</ul>
Callbacks/Events
Author
-
+
+
+
+
+
+
+
+