View source for Using Global Javascript Assets

A number of Javascript frameworks and components have been installed on the Spiffy Stores servers and are available for use in the store themes.

These software components are maintained and kept up to date for you, so that you don't need to include them in your theme.

All components can be accessed from your theme using the liquid tag

<pre>
global_asset_url(input)
</pre>

This tag should be included in your ''theme.liquid'' file under the ''<head>'' tag.

=== jQuery ===

The jQuery framework is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Further documentation is available from the jQuery website at http://jquery.com/

Current version: 1.11.2

<pre>
{{ 'jquery.js' | global_asset_url | script_tag }}
</pre>

=== Prototype ===

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Further documentation is available from the Prototype website at http://www.prototypejs.org/

Current version: 1.7

<pre>
{{ 'prototype.js' | global_asset_url | script_tag }}
</pre>

=== Scriptaculous ===

Scriptaculous provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

It includes an animation framework, drag and drop, Ajax controls, DOM utilities and unit testing.

Scriptaculous requires the Prototype Javascript framework.

Further documentation is available from the Sciptaculous website at http://script.aculo.us/

Current version: 1.9.0

<pre>
{{ 'sciptaculous.js' | global_asset_url | script_tag }}
{{ 'builder.js' | global_asset_url | script_tag }}
{{ 'controls.js' | global_asset_url | script_tag }}
{{ 'dragdrop.js' | global_asset_url | script_tag }}
{{ 'effects.js' | global_asset_url | script_tag }}
{{ 'slider.js' | global_asset_url | script_tag }}
{{ 'sound.js' | global_asset_url | script_tag }}
{{ 'unittest.js' | global_asset_url | script_tag }}
</pre>

=== Moo Tools ===

Moo Tools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Further documentation is available from the Moo Tools website at http://mootools.net/

Current version: 1.3

<pre>
{{ 'mootools.js' | global_asset_url | script_tag }}
</pre>

=== Slimbox ===

Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the compact Moo Tools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

This script can be used to provide a lightbox that will allow customers to view product images in greater detail.

Further documentation is available from the Slimbox website at http://www.digitalia.be/software/slimbox

Current version: 1.71

<pre>
{{ 'slimbox.js' | global_asset_url | script_tag }}
</pre>

The following CSS must be included before the theme CSS file

<pre>
{{ 'slimbox.css' | global_asset_url | stylesheet_tag }}
</pre>

To include a set of images in a lightbox, add the tag ''rel="lightbox-images"'' on the image links.

<pre>
<a href="images/image-1.jpg" rel="lightbox-images">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-images">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-images">image #3</a>
</pre>

=== Slimbox 2 ===

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

This script can be used to provide a lightbox that will allow customers to view product images in greater detail.

Further documentation is available from the Slimbox website at http://www.digitalia.be/software/slimbox2

Current version: 2.04

<pre>
{{ 'slimbox2.js' | global_asset_url | script_tag }}
</pre>

The following CSS must be included before the theme CSS file

<pre>
{{ 'slimbox2.css' | global_asset_url | stylesheet_tag }}
</pre>

To include a set of images in a lightbox, add the tag ''rel="lightbox-images"'' on the image links.

<pre>
<a href="images/image-1.jpg" rel="lightbox-images">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-images">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-images">image #3</a>
</pre>