Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

First version of sphinx based documentation

  • Loading branch information...
commit 17e749a8408f1046264d76ac1609e3ceaa73f44a 1 parent d61edea
@jsor authored
View
1  .gitignore
@@ -1,2 +1,3 @@
.DS_Store
+docs/_build
node_modules
View
153 docs/Makefile
@@ -0,0 +1,153 @@
+# Makefile for Sphinx documentation
+#
+
+# You can set these variables from the command line.
+SPHINXOPTS =
+SPHINXBUILD = sphinx-build
+PAPER =
+BUILDDIR = _build
+
+# Internal variables.
+PAPEROPT_a4 = -D latex_paper_size=a4
+PAPEROPT_letter = -D latex_paper_size=letter
+ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
+# the i18n builder cannot share the environment and doctrees with the others
+I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
+
+.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
+
+help:
+ @echo "Please use \`make <target>' where <target> is one of"
+ @echo " html to make standalone HTML files"
+ @echo " dirhtml to make HTML files named index.html in directories"
+ @echo " singlehtml to make a single large HTML file"
+ @echo " pickle to make pickle files"
+ @echo " json to make JSON files"
+ @echo " htmlhelp to make HTML files and a HTML help project"
+ @echo " qthelp to make HTML files and a qthelp project"
+ @echo " devhelp to make HTML files and a Devhelp project"
+ @echo " epub to make an epub"
+ @echo " latex to make LaTeX files, you can set PAPER=a4 or PAPER=letter"
+ @echo " latexpdf to make LaTeX files and run them through pdflatex"
+ @echo " text to make text files"
+ @echo " man to make manual pages"
+ @echo " texinfo to make Texinfo files"
+ @echo " info to make Texinfo files and run them through makeinfo"
+ @echo " gettext to make PO message catalogs"
+ @echo " changes to make an overview of all changed/added/deprecated items"
+ @echo " linkcheck to check all external links for integrity"
+ @echo " doctest to run all doctests embedded in the documentation (if enabled)"
+
+clean:
+ -rm -rf $(BUILDDIR)/*
+
+html:
+ $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
+ @echo
+ @echo "Build finished. The HTML pages are in $(BUILDDIR)/html."
+
+dirhtml:
+ $(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml
+ @echo
+ @echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml."
+
+singlehtml:
+ $(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml
+ @echo
+ @echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml."
+
+pickle:
+ $(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle
+ @echo
+ @echo "Build finished; now you can process the pickle files."
+
+json:
+ $(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json
+ @echo
+ @echo "Build finished; now you can process the JSON files."
+
+htmlhelp:
+ $(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp
+ @echo
+ @echo "Build finished; now you can run HTML Help Workshop with the" \
+ ".hhp project file in $(BUILDDIR)/htmlhelp."
+
+qthelp:
+ $(SPHINXBUILD) -b qthelp $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp
+ @echo
+ @echo "Build finished; now you can run "qcollectiongenerator" with the" \
+ ".qhcp project file in $(BUILDDIR)/qthelp, like this:"
+ @echo "# qcollectiongenerator $(BUILDDIR)/qthelp/jCarousel.qhcp"
+ @echo "To view the help file:"
+ @echo "# assistant -collectionFile $(BUILDDIR)/qthelp/jCarousel.qhc"
+
+devhelp:
+ $(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp
+ @echo
+ @echo "Build finished."
+ @echo "To view the help file:"
+ @echo "# mkdir -p $$HOME/.local/share/devhelp/jCarousel"
+ @echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/jCarousel"
+ @echo "# devhelp"
+
+epub:
+ $(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub
+ @echo
+ @echo "Build finished. The epub file is in $(BUILDDIR)/epub."
+
+latex:
+ $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
+ @echo
+ @echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex."
+ @echo "Run \`make' in that directory to run these through (pdf)latex" \
+ "(use \`make latexpdf' here to do that automatically)."
+
+latexpdf:
+ $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
+ @echo "Running LaTeX files through pdflatex..."
+ $(MAKE) -C $(BUILDDIR)/latex all-pdf
+ @echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex."
+
+text:
+ $(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text
+ @echo
+ @echo "Build finished. The text files are in $(BUILDDIR)/text."
+
+man:
+ $(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man
+ @echo
+ @echo "Build finished. The manual pages are in $(BUILDDIR)/man."
+
+texinfo:
+ $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
+ @echo
+ @echo "Build finished. The Texinfo files are in $(BUILDDIR)/texinfo."
+ @echo "Run \`make' in that directory to run these through makeinfo" \
+ "(use \`make info' here to do that automatically)."
+
+info:
+ $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
+ @echo "Running Texinfo files through makeinfo..."
+ make -C $(BUILDDIR)/texinfo info
+ @echo "makeinfo finished; the Info files are in $(BUILDDIR)/texinfo."
+
+gettext:
+ $(SPHINXBUILD) -b gettext $(I18NSPHINXOPTS) $(BUILDDIR)/locale
+ @echo
+ @echo "Build finished. The message catalogs are in $(BUILDDIR)/locale."
+
+changes:
+ $(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes
+ @echo
+ @echo "The overview file is in $(BUILDDIR)/changes."
+
+linkcheck:
+ $(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck
+ @echo
+ @echo "Link check complete; look for any errors in the above output " \
+ "or in $(BUILDDIR)/linkcheck/output.txt."
+
+doctest:
+ $(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest
+ @echo "Testing of doctests in the sources finished, look at the " \
+ "results in $(BUILDDIR)/doctest/output.txt."
View
242 docs/conf.py
@@ -0,0 +1,242 @@
+# -*- coding: utf-8 -*-
+#
+# jCarousel documentation build configuration file, created by
+# sphinx-quickstart on Thu Jul 26 10:37:30 2012.
+#
+# This file is execfile()d with the current directory set to its containing dir.
+#
+# Note that not all possible configuration values are present in this
+# autogenerated file.
+#
+# All configuration values have a default; values that are commented out
+# serve to show the default.
+
+import sys, os
+
+# If extensions (or modules to document with autodoc) are in another directory,
+# add these directories to sys.path here. If the directory is relative to the
+# documentation root, use os.path.abspath to make it absolute, like shown here.
+#sys.path.insert(0, os.path.abspath('.'))
+
+# -- General configuration -----------------------------------------------------
+
+# If your documentation needs a minimal Sphinx version, state it here.
+#needs_sphinx = '1.0'
+
+# Add any Sphinx extension module names here, as strings. They can be extensions
+# coming with Sphinx (named 'sphinx.ext.*') or your custom ones.
+extensions = []
+
+# Add any paths that contain templates here, relative to this directory.
+templates_path = ['_templates']
+
+# The suffix of source filenames.
+source_suffix = '.rst'
+
+# The encoding of source files.
+#source_encoding = 'utf-8-sig'
+
+# The master toctree document.
+master_doc = 'index'
+
+# General information about the project.
+project = u'jCarousel'
+copyright = u'2012, Jan Sorgalla'
+
+# The version info for the project you're documenting, acts as replacement for
+# |version| and |release|, also used in various other places throughout the
+# built documents.
+#
+# The short X.Y version.
+version = '0.3'
+# The full version, including alpha/beta/rc tags.
+release = '0.3.0beta1'
+
+# The language for content autogenerated by Sphinx. Refer to documentation
+# for a list of supported languages.
+#language = None
+
+# There are two options for replacing |today|: either, you set today to some
+# non-false value, then it is used:
+#today = ''
+# Else, today_fmt is used as the format for a strftime call.
+#today_fmt = '%B %d, %Y'
+
+# List of patterns, relative to source directory, that match files and
+# directories to ignore when looking for source files.
+exclude_patterns = ['_build']
+
+# The reST default role (used for this markup: `text`) to use for all documents.
+#default_role = None
+
+# If true, '()' will be appended to :func: etc. cross-reference text.
+#add_function_parentheses = True
+
+# If true, the current module name will be prepended to all description
+# unit titles (such as .. function::).
+#add_module_names = True
+
+# If true, sectionauthor and moduleauthor directives will be shown in the
+# output. They are ignored by default.
+#show_authors = False
+
+# The name of the Pygments (syntax highlighting) style to use.
+pygments_style = 'sphinx'
+
+# A list of ignored prefixes for module index sorting.
+#modindex_common_prefix = []
+
+
+# -- Options for HTML output ---------------------------------------------------
+
+# The theme to use for HTML and HTML Help pages. See the documentation for
+# a list of builtin themes.
+html_theme = 'default'
+
+# Theme options are theme-specific and customize the look and feel of a theme
+# further. For a list of options available for each theme, see the
+# documentation.
+#html_theme_options = {}
+
+# Add any paths that contain custom themes here, relative to this directory.
+#html_theme_path = []
+
+# The name for this set of Sphinx documents. If None, it defaults to
+# "<project> v<release> documentation".
+#html_title = None
+
+# A shorter title for the navigation bar. Default is the same as html_title.
+#html_short_title = None
+
+# The name of an image file (relative to this directory) to place at the top
+# of the sidebar.
+#html_logo = None
+
+# The name of an image file (within the static path) to use as favicon of the
+# docs. This file should be a Windows icon file (.ico) being 16x16 or 32x32
+# pixels large.
+#html_favicon = None
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+#html_static_path = ['_static']
+
+# If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
+# using the given strftime format.
+#html_last_updated_fmt = '%b %d, %Y'
+
+# If true, SmartyPants will be used to convert quotes and dashes to
+# typographically correct entities.
+#html_use_smartypants = True
+
+# Custom sidebar templates, maps document names to template names.
+#html_sidebars = {}
+
+# Additional templates that should be rendered to pages, maps page names to
+# template names.
+#html_additional_pages = {}
+
+# If false, no module index is generated.
+#html_domain_indices = True
+
+# If false, no index is generated.
+#html_use_index = True
+
+# If true, the index is split into individual pages for each letter.
+#html_split_index = False
+
+# If true, links to the reST sources are added to the pages.
+#html_show_sourcelink = True
+
+# If true, "Created using Sphinx" is shown in the HTML footer. Default is True.
+#html_show_sphinx = True
+
+# If true, "(C) Copyright ..." is shown in the HTML footer. Default is True.
+#html_show_copyright = True
+
+# If true, an OpenSearch description file will be output, and all pages will
+# contain a <link> tag referring to it. The value of this option must be the
+# base URL from which the finished HTML is served.
+#html_use_opensearch = ''
+
+# This is the file name suffix for HTML files (e.g. ".xhtml").
+#html_file_suffix = None
+
+# Output file base name for HTML help builder.
+htmlhelp_basename = 'jCarouseldoc'
+
+
+# -- Options for LaTeX output --------------------------------------------------
+
+latex_elements = {
+# The paper size ('letterpaper' or 'a4paper').
+#'papersize': 'letterpaper',
+
+# The font size ('10pt', '11pt' or '12pt').
+#'pointsize': '10pt',
+
+# Additional stuff for the LaTeX preamble.
+#'preamble': '',
+}
+
+# Grouping the document tree into LaTeX files. List of tuples
+# (source start file, target name, title, author, documentclass [howto/manual]).
+latex_documents = [
+ ('index', 'jCarousel.tex', u'jCarousel Documentation',
+ u'Jan Sorgalla', 'manual'),
+]
+
+# The name of an image file (relative to this directory) to place at the top of
+# the title page.
+#latex_logo = None
+
+# For "manual" documents, if this is true, then toplevel headings are parts,
+# not chapters.
+#latex_use_parts = False
+
+# If true, show page references after internal links.
+#latex_show_pagerefs = False
+
+# If true, show URL addresses after external links.
+#latex_show_urls = False
+
+# Documents to append as an appendix to all manuals.
+#latex_appendices = []
+
+# If false, no module index is generated.
+#latex_domain_indices = True
+
+
+# -- Options for manual page output --------------------------------------------
+
+# One entry per manual page. List of tuples
+# (source start file, name, description, authors, manual section).
+man_pages = [
+ ('index', 'jcarousel', u'jCarousel Documentation',
+ [u'Jan Sorgalla'], 1)
+]
+
+# If true, show URL addresses after external links.
+#man_show_urls = False
+
+
+# -- Options for Texinfo output ------------------------------------------------
+
+# Grouping the document tree into Texinfo files. List of tuples
+# (source start file, target name, title, author,
+# dir menu entry, description, category)
+texinfo_documents = [
+ ('index', 'jCarousel', u'jCarousel Documentation',
+ u'Jan Sorgalla', 'jCarousel', 'Riding carousels with jQuery',
+ 'Miscellaneous'),
+]
+
+# Documents to append as an appendix to all manuals.
+#texinfo_appendices = []
+
+# If false, no module index is generated.
+#texinfo_domain_indices = True
+
+# How to display URL addresses: 'footnote', 'no', or 'inline'.
+#texinfo_show_urls = 'footnote'
View
30 docs/index.rst
@@ -0,0 +1,30 @@
+jCarousel - Riding carousels with jQuery
+========================================
+
+jCarousel is a jQuery plugin for controlling a list of items in horizontal or
+vertical order. It provides you with a full-featured and flexible toolset for
+navigating any HTML based content in a carousel-like fashion.
+
+Contents
+--------
+
+.. toctree::
+ :maxdepth: 2
+
+ reference/installation
+ reference/configuration
+ reference/api
+ reference/usage
+
+Credits
+-------
+
+jCarousel is written on top of `jQuery <http://jquery.com>`_ and was originally
+inspired by the `Carousel Component <http://billwscott.com/carousel/>`_ by
+`Bill Scott <http://looksgoodworkswell.com>`_.
+
+License
+-------
+
+Copyright (c) 2012 Jan Sorgalla.
+Licensed under the MIT, GPL licenses.
View
156 docs/reference/api.rst
@@ -0,0 +1,156 @@
+API
+===
+
+If you have created a carousel like:
+
+.. code-block:: javascript
+
+ $(function() {
+ $('.jcarousel').jcarousel();
+ });
+
+You can later call methods on the jCarousel instance like:
+
+.. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', '+=2');
+
+
+The first argument is the method name. The following arguments are the arguments
+for the called method.
+
+Available methods
+^^^^^^^^^^^^^^^^^
+
+``.jcarousel('scroll', target [, animate [, callback]])``
+ Scrolls to a specific item or relative by a given offset (See section
+ :ref:`reference.usage.navigating-the-carousel` for more information about
+ the target argument).
+
+ If the argument ``animate`` is given and ``false``, it just jumps to the
+ position without animation.
+
+ If the argument ``callback`` is given and a valid callback, it is triggered
+ after the animation is finished.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', '+=1', true, function() {
+ console.log('Animation finished');
+ });
+
+``.jcarousel('reload'[, options])``
+ Reloads the carousel. This method is useful to reinitialize the carousel if
+ you have changed the content of the list from the outside or want to change
+ options that affect appearance of the carousel on runtime.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('reload', {
+ 'animation': 'slow'
+ });
+
+``.jcarousel('destroy')``
+ Removes the jCarousel functionality completely. This will return the element
+ back to its initial state.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('destroy');
+
+``.jcarousel('items')``
+ Returns all items as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var items = $('.jcarousel').jcarousel('items')
+
+ items.on('click', function() {
+ console.log('Item clicked', this);
+ });
+
+``.jcarousel('target')``
+ Returns the *targeted* item as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var target = $('.jcarousel').jcarousel('target')
+
+ target.on('click', function() {
+ console.log('Target item clicked', this);
+ });
+
+``.jcarousel('first')``
+ Returns the *first visible* item as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var first = $('.jcarousel').jcarousel('first')
+
+ first.on('click', function() {
+ console.log('First item clicked', this);
+ });
+
+``.jcarousel('last')``
+ Returns the *last visible* item as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var last = $('.jcarousel').jcarousel('last')
+
+ target.on('click', function() {
+ console.log('Last item clicked', this);
+ });
+
+``.jcarousel('visible')``
+ Returns all *visible* items as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var visible = $('.jcarousel').jcarousel('visible')
+
+ visible.on('click', function() {
+ console.log('Visible item clicked', this);
+ });
+
+``.jcarousel('fullyvisible')``
+ Returns all *fully visible* items as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var fullyvisible = $('.jcarousel').jcarousel('fullyvisible')
+
+ fullyvisible.on('click', function() {
+ console.log('Fully visible item clicked', this);
+ });
+
+``.jcarousel('fullyvisible')``
+ Returns all *fully visible* items as jQuery object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ var fullyvisible = $('.jcarousel').jcarousel('fullyvisible')
+
+ fullyvisible.on('click', function() {
+ console.log('Fully visible item clicked', this);
+ });
View
171 docs/reference/configuration.rst
@@ -0,0 +1,171 @@
+Configuration
+=============
+
+jCarousel accepts a list of options to control the behaviour of the carousel.
+
+Available options
+------------------
+
+``list``
+ A function or a jQuery selector to select the list inside the root element.
+
+ A function will be called in the context of the carousel instance.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'list': '.jcarousel-list'
+ });
+
+ **Default:**
+
+ .. code-block:: javascript
+
+ function() {
+ return this.element().children().eq(0);
+ }
+
+``items``
+ A function or a jQuery selector to select the items inside the list element.
+
+ A function will be called in the context of the carousel instance.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'items': '.jcarousel-item'
+ });
+
+ **Default:**
+
+ .. code-block:: javascript
+
+ function() {
+ return this.list().children();
+ }
+
+``animation``
+ The speed of the scroll animation as string in jQuery terms (``"slow"`` or
+ ``"fast"``) or milliseconds as integer (See the documentation for
+ `jQuery animate <http://api.jquery.com/animate>`_). If set to 0, animation
+ is turned off.
+
+ Alternatively, this can be a map of options like the one `jQuery.animate
+ <http://api.jquery.com/animate/#animate-properties-options>`_
+ accepts as second argument or a function.
+
+ A function will be called in the context of the carousel instance and with
+ 2 arguments: The first is a hash of css properties (ie. ``{left: -400}``)
+ and the second is a function which must be called as a callback.
+
+ The function is then responsible for animating the list and executing the
+ callback after the animation is finished.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'animation': 'slow'
+ });
+
+ $('.jcarousel').jcarousel({
+ 'animation': {
+ 'duration': 800,
+ 'easing': 'linear'
+ }
+ });
+
+ **Default:**
+ ``400``
+
+``wrap``
+ Specifies whether to wrap at the first or last item (or both) and jump back
+ to the start/end. Options are ``"first"``, ``"last"``, ``"both"`` or
+ ``"circular"`` as string.
+
+ If set to null, wrapping is turned off (default).
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'wrap': 'both'
+ });
+
+
+ **Default:**
+ ``null``
+
+``vertical``
+ Specifies whether the carousel appears in vertical orientation. Changes the
+ carousel from a left/right style to a up/down style carousel.
+
+ If set to ``null``, jCarousel tries to auto-detect the orientation by simply
+ checking if the list's height is greater than the list's width.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'vertical': true
+ });
+
+ **Default:**
+ ``null``
+
+``rtl``
+ Specifies wether the carousel appears in RTL (Right-To-Left) mode.
+
+ If set to ``null``, jCarousel looks for ``dir="rtl"`` attribute on the root
+ element (or to any of its parent elements) and if found, automatically sets
+ rtl to true.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'rtl': true
+ });
+
+ **Example with dir attribute:**
+
+ .. code-block:: html
+
+ <div class="jcarousel" dir="rtl">
+ <ul>
+ <li>...</li>
+ </ul>
+ </div>
+
+ <script>
+ $('.jcarousel').jcarousel();
+ </script>
+
+ **Default:**
+ ``null``
+
+``center``
+ Specifies wether the carousel should be centered inside the root element.
+
+ .. warning::
+
+ This feature is **experimental** and may not work with all setups.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ 'center': true
+ });
+
+ **Default:**
+ ``false``
View
90 docs/reference/installation.rst
@@ -0,0 +1,90 @@
+Installation
+============
+
+To use the jCarousel component, include the `jQuery <http://jquery.com>`_
+library and the jCarousel source file into your HTML document:
+
+.. code-block:: html
+
+ <script type="text/javascript"
+ src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
+ </script>
+ <script type="text/javascript"
+ src="/path/to/jquery.jcarousel.js">
+ </script>
+
+jCarousel expects a very basic HTML markup structure inside your HTML document:
+
+.. code-block:: html
+
+ <div class="jcarousel">
+ <ul>
+ <li>...</li>
+ <li>...</li>
+ </ul>
+ </div>
+
+.. note::
+
+ The documentation refers to the elements as **root** element, **list**
+ element and **item** element(s):
+
+ .. code-block:: text
+
+ <div class="jcarousel"> <--------------------------------| Root element
+ <ul> <-------------------------------| List element |
+ <li>...</li> <---| Item element | |
+ <li>...</li> <---| Item element | |
+ </ul> <------------------------------| |
+ </div> <-------------------------------------------------|
+
+ This structure is only an example and not required. You could also use a
+ structure like:
+
+ .. code-block:: text
+
+ <div class="mycarousel"> <-------------------------------| Root element
+ <div> <------------------------------| List element |
+ <p>...</p> <-----| Item element | |
+ <p>...</p> <-----| Item element | |
+ </div> <-----------------------------| |
+ </div> <-------------------------------------------------|
+
+ The only requirement is, that it consists of a root element, list element
+ and item elements.
+
+Setup
+-----
+
+To setup jCarousel, add the following code to your HTML document:
+
+.. code-block:: html
+
+ <script type="text/javascript">
+ $(function() {
+ $('.jcarousel').jcarousel({
+ // Configuration goes here
+ });
+ });
+ </script>
+
+These are the minimal CSS settings for a horizontal carousel:
+
+.. code-block:: css
+
+ .jcarousel {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .jcarousel ul {
+ width: 20000em;
+ position: absolute;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .jcarousel li {
+ float: left;
+ }
View
223 docs/reference/usage.rst
@@ -0,0 +1,223 @@
+Usage
+=====
+
+.. _reference.usage.navigating-the-carousel:
+
+Navigating the carousel
+-----------------------
+
+jCarousel offers no built in controls to navigate through the carousel. But you
+can simply implement navigation controls using the ``scroll`` method.
+
+.. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', target);
+
+Available formats for the *target* argument
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``index``
+ Scrolls to the item at the given index (Note that indexes are 0-based).
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', 0);
+
+``-index``
+ Scrolls to the item at the given index counting backwards from the end of
+ the list.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', -1);
+
+``object``
+ Scrolls to the given object.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', $('.jcarousel li:eq(2)'));
+
+``+=offset``
+ Scrolls the carousel forward by the given offset relatively from the
+ current position.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', '+=1');
+
+``-=offset``
+ Scrolls the carousel backwards by the given offset relatively from the
+ current position.
+
+ **Example:**
+
+ .. code-block:: javascript
+
+ $('.jcarousel').jcarousel('scroll', '-=1');
+
+A simple example for previous and next controls:
+
+.. code-block:: javascript
+
+ $('.jcarousel-prev').click(function() {
+ $('.jcarousel').jcarousel('scroll', '-=1');
+ });
+
+ $('.jcarousel-next').click(function() {
+ $('.jcarousel').jcarousel('scroll', '+=1');
+ });
+
+A more comfortable way is to use a navigation plugins:
+
+* jquery.jcarousel.control.js
+* jquery.jcarousel.pagination.js
+
+Defining the number of visible items
+------------------------------------
+
+You simply define the number of visible items by defining the width (or height
+for a vertical carousel) of the root element (if you use the default from this
+document, you do that with the class `.jcarousel` in your stylesheet).
+
+This offers a lot of flexibility, because you can define the width in pixel for
+a fixed carousel or in percent for a flexible carousel.
+
+Fixed carousel, always 3 visible items:
+
+.. code-block:: css
+
+ .jcarousel {
+ position: relative;
+ overflow: hidden;
+ width: 300px;
+ }
+
+ .jcarousel li {
+ float: left;
+ width: 100px;
+ }
+
+Flexible carousel, the number of visible items depend on the width of the
+root's parent element:
+
+.. code-block:: css
+
+ .jcarousel {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ }
+
+ .jcarousel li {
+ float: left;
+ width: 100px;
+ }
+
+Vertical carousels
+------------------
+
+jCarousel tries to auto-detect the orientation by simply checking if the list
+elements’s height is greater than the list element’s width.
+
+If that doesn't work, you can explicitly pass the `vertical` option:
+
+.. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ vertical: true
+ });
+
+RTL (Right-To-Left) carousels
+-----------------------------
+
+jCarousel tries to auto-detect if the carousel should run in RTL mode by looking
+for a ``dir`` attribute with the value ``rtl`` on the root or any of its parent
+elements.
+
+.. code-block:: html
+
+ <div class="jcarousel" dir="rtl">
+ <ul>
+ <!-- The content goes in here -->
+ </ul>
+ </div>
+
+.. hint::
+
+ When running a carousel in RTL mode, you should ensure to float the items
+ to the right:
+
+ .. code-block:: css
+
+ .jcarousel[dir=rtl] li {
+ float: right;
+ }
+
+Alternatively, you can explicitly pass the ``rtl`` option:
+
+.. code-block:: javascript
+
+ $('.jcarousel').jcarousel({
+ rtl: true
+ });
+
+Manipulating the carousel
+-------------------------
+
+If you manipulate the carousel from the outside (eg. adding or removing items
+from the list), ensure that you call ``.jcarousel('reload')`` afterwards so
+that jCarousel becomes aware of the changes:
+
+.. code-block:: javascript
+
+ $(function() {
+ $('.jcarousel').jcarousel({
+ // Configuration goes here
+ });
+
+ // Append items
+ $('.jcarousel ul')
+ .append('<li>Item 1</li>')
+ .append('<li>Item 2</li>');
+
+ // Reload carousel
+ $('.jcarousel').jcarousel('reload');
+ });
+
+Existing items should only be manipulated, not completely replaced:
+
+.. code-block:: javascript
+
+ $(function() {
+ // Don't do that
+ $('.jcarousel li:eq(0)')
+ .replaceWith('<li class="myclass">Item 1</li>');
+
+ // Do this
+ $('.jcarousel li:eq(0)')
+ .addClass('myclass')
+ .text('Item 1');
+ });
+
+If you are removing items, make sure they are currently not visible:
+
+.. code-block:: javascript
+
+ $(function() {
+ var carousel = $('.jcarousel'),
+ item = carousel.find('li:eq(0)');
+
+ if (carousel.jcarousel('visible').index(items) < 0) {
+ item.remove();
+ carousel.jcarousel('reload');
+ }
+ });
Please sign in to comment.
Something went wrong with that request. Please try again.