Skip to content
Browse files

new syntax for configure & run, with legacy support

  • Loading branch information...
1 parent 5c22abd commit c1d104b67192066b74d22140155597e4f3e9c0a0 @davidhellsing davidhellsing committed Mar 10, 2012
View
32 docs/api/events.rst
@@ -8,20 +8,36 @@ similar to jQuery's event model, except that it adds event.scope that refers to
the current gallery scope of each event. Some events will add even further
properties to the event object, specified here.
+In the callback, the ``this`` keyword inside the callback always refers to the gallery scope.
+
.. highlight:: javascript
-Use ``.bind()`` to listen to the Galleria events. In the callback, the this
-keyword inside the callback always refers to the same gallery scope. Example::
+=====================
+How to use the events
+=====================
+
+You can use the global ``Galleria.on()`` function to bind functions to events, f.ex::
- this.bind("thumbnail", function(e) {
+ Galleria.on('image', function(e) {
Galleria.log(this); // the gallery scope
- Galleria.log(e) // the event object
+ Galleria.log(e.imageTarget); // the currently active IMG element
});
- this.bind("loadstart", function(e) {
- if ( !e.cached ) {
- Galleria.log(e.target + ' is not cached. Begin preload...');
- }
+Or you can use ``.bind()`` inside the ``Galleria.ready`` or ``extend`` to listen to
+the Galleria events. Example::
+
+ Galleria.ready(function() {
+
+ this.bind("thumbnail", function(e) {
+ Galleria.log(this); // the gallery scope
+ Galleria.log(e) // the event object
+ });
+
+ this.bind("loadstart", function(e) {
+ if ( !e.cached ) {
+ Galleria.log(e.target + ' is not cached. Begin preload...');
+ }
+ });
});
=======================
View
77 docs/api/utilities.rst
@@ -9,17 +9,64 @@ Static methods are exposed using ``Galleria.fn()``.
.. highlight:: javascript
+Galleria.run( selector, options )
+--------------------------
+
+ | returns Galleria
+
+This function initializes the gallery. The first argument is the jQuery selector of
+element(s) you want to load the gallery to. The second argument (optional) is an object
+of configuration options::
+
+ Galleria.run('#galleria');
+ Galleria.run('#galleria', {
+ imageCrop: true,
+ transition: 'fade'
+ });
+
+
+Galleria.configure( options )
+--------------------------
+
+ | returns Galleria
+
+This function configures options to the gallery. The options you specify here will be
+applied to all instances on the page. If you want to apply options for a specific gallery,
+use the ``.setOptions()`` API call, or apply the options when calling ``Galleria.run()``.
+
+You can add multiple options like this::
+
+ Galleria.configure({
+ thumbCrop: true,
+ lightbox: true
+ });
+
+Or single options using key/value::
+
+ Galleria.configure('imageCrop', false);
+
+The options will be applied to the gallery no matter when it’s called. If the gallery
+is not yet ready, they will be applied when it is. If the gallery is already running,
+the options will be applied at run-time.
+
+
Galleria.ready( function )
-----------------------------------------
+--------------------------
- | returns null
+ | returns Galleria
+
+Use this function to bind bind custom functionality to each gallery instance
+when the gallery is loaded. Example::
+
+ Galleria.ready(function() {
+ Galleria.log('Gallery ready', this); // the Galleria instance
+ });
-Use this to bind custom functionality to each gallery instance onload. Works the same way as the extend option.
Galleria.log( msg [,msg,...] )
------------------------------
- | returns null
+ | returns Galleria
A helper metod for cross-browser logging. It uses the console log if available
otherwise it falls back to the opera debugger and finally ``alert()``
@@ -28,37 +75,27 @@ otherwise it falls back to the opera debugger and finally ``alert()``
Galleria.raise( msg )
---------------------
- | returns null
+ | returns Galleria
This method will raise an error message if Galleria.debug is true. Useful if
you have sensitive code that needs to throw an error if not completed when
developing.
-.. _galleria_get:
-
Galleria.get( [index] )
-----------------------
- | returns Galleria
+ | returns instance or array of instances
Use this to fetch a galleria instance from anywhere on your page. If you only
have one galleria gallery, ``Galleria.get(0)`` will return the first (and only)
gallery. If you call ``Galleria.get()`` without specifying an index, it will
return an array with all galleries initiated. Example::
- $('#images').galleria(); // initialize the galleria
+ Galleria.run('#galleria'); // initialize the galleria
- var gallery = Galleria.get(0); // gallery is now the first galleria instance
$('#play').click(function() {
- gallery.play(); // will start slideshow when the element #play is clicked
- });
-
- $('#images2').galleria() // initialize another gallery
-
- var galleries = Galleria.get(); // galleries is now an array of all galleria instances
- $('#fullscreen').click(function() {
- galleries[1].enterFullscreen(); // will enter fullscreen mode for the second gallery
+ Galleria.get(0).play(); // will start slideshow when the element #play is clicked
});
@@ -67,7 +104,7 @@ return an array with all galleries initiated. Example::
Galleria.loadTheme( url[, options] )
------------------------------------
- | returns null
+ | returns Galleria
This methods loads a theme into galleria. It will insert the necessary scripts
and styles into the document and provide a event that will hold the galleria
@@ -79,7 +116,7 @@ absolute path to the theme .js file. Example::
Galleria.loadTheme('galleria/themes/classic/galleria.classic.js'):
// initiate the gallery
- $('#images').galleria();
+ Galleria.run('#galleria');
// when the theme is fully loaded, galleria will run.
View
14 docs/getting_started/beginners_guide.rst
@@ -107,7 +107,7 @@ but the simplest one is probably to just add images as HTML.
Add the following markup inside the ``<body>`` tag::
- <div id="gallery">
+ <div id="galleria">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
@@ -132,10 +132,7 @@ Set dimensions and fire up the gallery
All we need to do now is set dimensions and apply Galleria.
Add the following script after the loadTheme function we just inserted::
- $("#gallery").galleria({
- width: 500,
- height: 500
- });
+ Galleria.run('#galleria');
</script>
As you can see, we just applied galleria to the '#gallery' container where the images are, and set dimensions to 500x500 pixels.
@@ -155,17 +152,14 @@ The complete code example:
<script src="galleria/galleria-1.2.7.min.js"></script>
</head>
<body>
- <div id="gallery">
+ <div id="galleria">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
- $("#gallery").galleria({
- width: 500,
- height: 500
- });
+ Galleria.run('#galleria');
</script>
</body>
</html>
View
36 docs/getting_started/quick_start.rst
@@ -23,28 +23,28 @@ There are several ways of adding image data to your gallery, but the simplest
way is probably to add some HTML. Just put the images inside any container on
the site. You can also add titles and descriptions using data attributed on the IMG tag::
- <div id="gallery">
+ <div id="galleria">
<img src="/img/pic1.jpg" data-title="My title" data-description="My description">
<img src="/img/pic2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
If you want separate thumbnails (recommended), just add them as a link::
- <div id="gallery">
+ <div id="galleria">
<a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-title="My title" data-description="My description"></a>
<a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>
You may also add a separate larger image for fullscreen using the data-big attribute::
- <div id="gallery">
+ <div id="galleria">
<a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
<a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>
Adding video from YouTube, Vimeo or Dailymotion is easy - just link an image to the video page. If you want Galleria to fetch a thumbnail, add an element with the class 'video' instead of a thumbnail::
- <div id="gallery">
+ <div id="galleria">
<a href="http://www.youtube.com/watch?v=GCZrz8siv4Q"><img src="/img/thumb1.jpg"></a>
<a href="http://vimeo.com/12309423"><span class="video">Watch this on Vimeo!</span></a>
</div>
@@ -80,22 +80,27 @@ Use the Galleria.loadTheme and then the galleria() function on the selected jQue
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
- $('#gallery').galleria();
+ Galleria.run('#galleria');
</script>
Adding options
===============
-The galleria function takes one arguments, *options*. The options argument is
-an object with Galleria options that you can use, please visit :doc:`/options/index` for a complete list.
+Use the Galleria.confirgure function to apply options. You can define an object to apply
+multiple options, or two arguments (key/value) to apply a single option.
+Please visit :doc:`/options/index` for a complete list.
Example options::
- $('#gallery').galleria({
- imageCrop: true,
- transition: 'fade'
- });
+ Galleria.configure({
+ imageCrop: true,
+ transition: 'fade'
+ });
+
+Configuring a single options::
+
+ Galleria.configure('imageCrop', true);
Optimize Galleria
@@ -107,7 +112,8 @@ We strongly recommend you to read through :doc:`/references/optimize` to optimiz
Using the API
=============
-Further customizations can be done using the :doc:`/api/methods` and :doc:`/api/events`. You’ll have access to them using the Galleria.ready function::
+Further customizations can be done using the :doc:`/api/methods` and :doc:`/api/events`.
+You’ll have access to them using the Galleria.ready function::
Galleria.ready(function(options) {
@@ -119,6 +125,12 @@ Further customizations can be done using the :doc:`/api/methods` and :doc:`/api/
});
});
+Another option if you just want to listen to events is using the Galleria.on() function:
+
+ Galleria.on('image', function(e) {
+ Galleria.log('Now viewing ' + e.imageTarget.src);
+ });
+
You can also access the methods inside the jQuery.data object of the element you attached the gallery to, f.ex::
$('#galleria').data('galleria').enterFullscreen();
View
4 docs/options/dataConfig.rst
@@ -38,7 +38,7 @@ Example on how to alter the extraction logic:
<span class="desc">My picture</span>
</div>
<script>
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataConfig: function(img) {
// img is now the image element
// the function should return an object with the new data
@@ -65,7 +65,7 @@ Example on how to add rich HTML captions:
</div>
</div>
<script>
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataConfig: function(img) {
return {
title: $(img).next('h2').html(), // tell Galleria to use the h2 as title
View
2 docs/options/dataSelector.rst
@@ -25,7 +25,7 @@ Example::
</div>
<script>
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataSelector: "a",
dataConfig: function(a) {
// a is now the anchor element
View
8 docs/options/dataSource.rst
@@ -18,11 +18,11 @@ Examples:
::
// Galleria will look for images in '#galleria':
- $('#galleria').galleria();
+ Galleria.run('#galleria');
// Galleria will look for images in '#images'
// but use '#galleria' as gallery container:
- $('#galleria').galleria({dataSource: '#images'});
+ Galleria.run('#galleria', { dataSource: '#images' });
.. highlight:: html
@@ -38,7 +38,7 @@ Using custom data Array:
{ image: "/path/to/myimage2.jpg" },
];
- $('#gallery').galleria({
+ Galleria.run('#galleria', {
dataSource: data,
});
</script>
@@ -55,7 +55,7 @@ Placing the Galleria gallery in a different place and keep the thumbnails:
<a href="myimg2.jpg"><img src="mythumb2.jpg"></a>
</div>
<script>
- $('#gallery').galleria({
+ Galleria.run('#galleria', {
dataSource: "#source",
keepSource: true // this prevents galleria from clearing the data source container
});
View
2 docs/options/debug.rst
@@ -13,6 +13,6 @@ For deployment you can turn debug off to generate a more generic error message i
Example::
- $('#galleria').galleria({
+ Galleria.configure({
debug: false // debug is now off for deployment
});
View
2 docs/options/dummy.rst
@@ -10,6 +10,6 @@ Think of it as a 404 for Galleria.
Example::
- $('#galleria').galleria({
+ Galleria.configure({
dummy: '/images/noimage.jpg'
});
View
6 docs/options/extend.rst
@@ -19,12 +19,10 @@ Example on how to add a play link by extending the theme:
<a id="play" href="#">Play</a>
<script>
- $('#galleria').galleria({
- extend: function(options) {
-
+ Galleria.run('#galleria', {
+ extend: function() {
var gallery = this; // "this" is the gallery instance
$('#play').click(function() {
-
gallery.play(); // call the play method
});
}
View
4 docs/options/height.rst
@@ -17,13 +17,13 @@ This is very useful when programming responsive layouts.
Setting a fixed height example::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
height: 400
});
Setting a relative height (16/9 ratio) example::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
height: 0.5625
});
View
12 docs/options/index.rst
@@ -20,10 +20,16 @@ These options are the standard options that you can use for all themes. However,
Using options
=============
-Galleria options are defined using a flat object during initialization.::
+Galleria options are configured at anytime using the ``Galleria.configure`` function::
- $('#galleria').galleria({
- preload: 3,
+ Galleria.configure({
+ transition: 'fade',
+ imageCrop: true
+ });
+
+Or when calling ``Galleria.run``:
+
+ Galleria.run('#galleria', {
transition: 'fade',
imageCrop: true
});
View
4 docs/options/keepSource.rst
@@ -20,13 +20,13 @@ Example of placing the Galleria gallery outside the source and keep the thumbnai
::
- <div id="gallery"></div>
+ <div id="galleria"></div>
<div id="source">
<a href="myimg1.jpg"><img src="mythumb1.jpg"></a>
<a href="myimg2.jpg"><img src="mythumb2.jpg"></a>
</div>
<script>
- $('#gallery').galleria({
+ Galleria.run('#galleria', {
dataSource: "#source", // fetch images from "#source"
keepSource: true // this prevents galleria from clearing the data source container
});
View
2 docs/options/lightbox.rst
@@ -14,6 +14,6 @@ Example on how to attach a lightbox to each image:
::
- $('#galleria').galleria({
+ Galleria.configure({
lightbox: true
});
View
2 docs/options/thumbnails.rst
@@ -17,7 +17,7 @@ Example on how to create numbered elements instead of thumbnails
::
<script>
- $('#galleria').galleria({
+ Galleria.configure({
thumbnails: "numbers"
});
</script>
View
6 docs/plugins/flickr.rst
@@ -20,15 +20,15 @@ Examples
::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
flickr: 'search:galleria'
});
**Example on how to fetch a flickr photoset into Galleria and sort using date ascending**
::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
flickr: 'set:308783',
flickrOptions: {
sort: 'date-posted-asc'
@@ -43,7 +43,7 @@ When using the flickr plugin as a Galleria option like this, you simply apply a
var flickr = new Galleria.Flickr();
flickr.search('sweden', function(data) {
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataSource: data
});
});
View
6 docs/plugins/picasa.rst
@@ -20,15 +20,15 @@ Examples
::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
picasa: 'search:galleria'
});
**Example on how to fetch a picasa useralbum into Galleria and sort using date ascending**
::
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
picasa: 'useralbum:galleriajs/Demo', // 'galleriajs' is the username and 'Demo' is the album ID
picasaOptions: {
sort: 'date-posted-asc'
@@ -43,7 +43,7 @@ When using the picasa plugin as a Galleria option like this, you simply apply a
var picasa = new Galleria.Picasa();
picasa.search('sweden', function(data) {
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataSource: data
});
});
View
4 docs/references/data.rst
@@ -186,7 +186,7 @@ An example on how to use the dataConfig option to extract HTML captions from ``<
</li>
</div>
<script>
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataConfig: function(img) {
return {
description: $(img).next('p').html()
@@ -228,7 +228,7 @@ Providing JSON data to Galleria is really easy::
title: 'My third title'
}
];
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
dataSource: data
});
View
10 docs/references/extending.rst
@@ -41,7 +41,7 @@ Example on how to print out the current image index::
// now call galleria on all containers with the className 'galleria'
// the method above will be called on all galleries when initialized
- $('.galleria').galleria();
+ Galleria.run('#galleria');
Fetching the Galleria instance
@@ -55,12 +55,12 @@ Use **Galleria.ready** if you are uncertain whether the gallery is initialized o
The simplest way is to use the jQuery.data() method on the jQuery object since Galleria saves it’s instance inside it::
- $('#galleria').galleria(); // initialize the galleria
+ Galleria.run('#galleria'); // initialize the galleria
// do something when someone clicks an element with the ID 'mylink'
$('#play').click(function() {
- $('#gallery').data('galleria').play(); // will start slideshow attached to #image when the element #play is clicked
+ $('#galleria').data('galleria').play(); // will start slideshow attached to #image when the element #play is clicked
});
@@ -71,7 +71,7 @@ index, it will return an array with all galleries initiated.
Example::
- $('#galleria').galleria(); // initialize the galleria
+ Galleria.run('#galleria'); // initialize the galleria
// do something when someone clicks an element with the ID 'mylink'
$('#play').click(function() {
@@ -89,7 +89,7 @@ Yet another way of accessing the instance, the extend option is a function that
after the theme init. Use this option to extend an existing theme with custom
functionality. Example::
- $('#images').galleria({
+ Galleria.run('#galleria', {
extend: function(options) {
View
2 docs/themes/creating_a_theme.rst
@@ -68,7 +68,7 @@ Creata a simple theme step by step
After the theme is created you can use the theme when calling Galleria::
Galleria.loadTheme('/path/to/themes/galleria.my_theme.js');
- $('#images').galleria();
+ Galleria.run('#galleria');
The theme object explained:
View
14 docs/themes/using_themes.rst
@@ -32,13 +32,13 @@ There are two ways of loading a theme in your document:
-------------------------------
This is probably the easiest way to load a theme. The theme path should be relative to the url you are loading the theme from, so assuming the previously defined structure, we would use the following JavaScript command to load the classic theme from the **index.html** file::
-
+
Galleria.loadTheme('galleria/themes/classic/galleria.classic.js');
This command loads all theme specific files and holds the gallery initialization until all files are loaded and ready. So now we just have to fire upp Galleria::
- $('#gallery').galleria();
-
+ Galleria.run('#galleria');
+
2. Loading a theme manually using ``<script>``
----------------------------------------------
@@ -63,13 +63,13 @@ You can switch themes at runtime, just fire another ``Galleria.loadTheme()`` fun
<script>
Galleria.loadTheme('galleria/classic/galleria.classic.js');
- $('#galleria').galleria();
-
+ Galleria.run('#galleria');
+
$('<a>').click(function(e) {
-
+
e.preventDefault();
Galleria.loadTheme('galleria/fullscreen/galleria.fullscreen.js');
-
+
}).text('Switch to fullscreen').appendTo('body');
</script>
View
163 src/galleria.js
@@ -1,5 +1,5 @@
/**
- * @preserve Galleria v 1.2.7b5 2012-03-01
+ * @preserve Galleria v 1.2.7b6 2012-03-09
* http://galleria.aino.se
*
* Copyright (c) 2012, Aino
@@ -17,6 +17,9 @@ var undef,
$doc = $( doc ),
$win = $( window ),
+// native prototypes
+ protoArray = Array.prototype,
+
// internal constants
VERSION = 1.27,
DEBUG = true,
@@ -247,7 +250,7 @@ var undef,
return {
array : function( obj ) {
- return Array.prototype.slice.call(obj, 0);
+ return protoArray.slice.call(obj, 0);
},
create : function( className, nodeName ) {
@@ -1102,7 +1105,7 @@ Galleria = function() {
this._target = undef;
// instance id
- this._id = Math.random();
+ this._id = parseInt(Math.random()*10000, 10);
// add some elements
var divs = 'container stage images image-nav image-nav-left image-nav-right ' +
@@ -2233,7 +2236,7 @@ Galleria.prototype = {
color: 'aaaaaa'
},
wait: 5000, // 1.2.7
- width: 0,
+ width: 'auto',
youtube: {
modestbranding: 1,
autohide: 1,
@@ -2297,7 +2300,7 @@ Galleria.prototype = {
}
// merge the theme & caller options
- $.extend( true, options, Galleria.theme.defaults, this._original.options );
+ $.extend( true, options, Galleria.theme.defaults, this._original.options, Galleria.configure.options );
// check for canvas support
(function( can ) {
@@ -2346,7 +2349,6 @@ Galleria.prototype = {
// keep trying to get the value
num = self._getWH();
$container.width( num.width ).height( num.height );
-
return testHeight() && num.width && num.height > 50;
},
@@ -2616,6 +2618,11 @@ Galleria.prototype = {
// optimize touch for container
Utils.optimizeTouch( this.get( 'container' ) );
+ // bind the ons
+ $.each( Galleria.on.binds, function(i, bind) {
+ self.bind( bind.type, bind.callback );
+ });
+
return this;
},
@@ -3021,7 +3028,7 @@ Galleria.prototype = {
Defaults to 'img'.
@param {Function} [config] Optional function to modify the data extraction proceedure from the selector.
- See the data_config option for more information.
+ See the dataConfig option for more information.
@returns Instance
*/
@@ -3049,7 +3056,7 @@ Galleria.prototype = {
// use selector set by option
selector = selector || this._options.dataSelector;
- // use the data_config set by option
+ // use the dataConfig set by option
config = config || this._options.dataConfig;
// if source is a true object, make it into an array
@@ -3201,8 +3208,13 @@ Galleria.prototype = {
*/
splice: function() {
- Array.prototype.splice.apply( this._data, Utils.array( arguments ) );
- return this._parseData()._createThumbnails();
+ var self = this,
+ args = Utils.array( arguments );
+ window.setTimeout(function() {
+ protoArray.splice.apply( self._data, args );
+ self._parseData()._createThumbnails();
+ },2);
+ return self;
},
/**
@@ -3216,8 +3228,13 @@ Galleria.prototype = {
*/
push: function() {
- Array.prototype.push.apply( this._data, Utils.array( arguments ) );
- return this._parseData()._createThumbnails();
+ var self = this,
+ args = Utils.array( arguments );
+ window.setTimeout(function() {
+ protoArray.push.apply( self._data, args );
+ self._parseData()._createThumbnails();
+ },2);
+ return self;
},
_getActive: function() {
@@ -3960,7 +3977,7 @@ this.prependChild( 'info', 'myElement' );
this._active = index;
- Array.prototype.push.call( this._queue, {
+ protoArray.push.call( this._queue, {
index : index,
rewind : rewind
});
@@ -4066,7 +4083,7 @@ this.prependChild( 'info', 'myElement' );
}
// remove the queued image
- Array.prototype.shift.call( self._queue );
+ protoArray.shift.call( self._queue );
// if we still have images in the queue, show it
if ( self._queue.length ) {
@@ -4737,6 +4754,8 @@ Galleria.addTheme = function( theme ) {
@param {string} src The relative path to the theme source file
@param {Object} [options] Optional options you want to apply
+
+ @returns Galleria
*/
Galleria.loadTheme = function( src, options ) {
@@ -4792,6 +4811,8 @@ Galleria.loadTheme = function( src, options ) {
}
});
+
+ return Galleria;
};
/**
@@ -4814,6 +4835,87 @@ Galleria.get = function( index ) {
};
/**
+
+ Configure Galleria options via a static function.
+ The options will be applied to all instances
+
+ @param {string|object} key The options to apply or a key
+
+ @param [value] If key is a string, this is the value
+
+ @returns Galleria
+
+*/
+
+Galleria.configure = function( key, value ) {
+
+ var opts = {};
+
+ if( typeof key == 'string' && value ) {
+ opts[key] = value;
+ key = opts;
+ } else {
+ $.extend( opts, key );
+ }
+
+ Galleria.configure.options = opts;
+
+ $.each( Galleria.get(), function(i, instance) {
+ instance.setOptions( opts );
+ });
+
+ return Galleria;
+};
+
+Galleria.configure.options = {};
+
+/**
+
+ Bind a Galleria event to the gallery
+
+ @param {string} type A string representing the galleria event
+
+ @param {function} callback The function that should run when the event is triggered
+
+ @returns Galleria
+
+*/
+
+Galleria.on = function( type, callback ) {
+ if ( !type ) {
+ return;
+ }
+ Galleria.on.binds.push({
+ type: type,
+ callback: callback || F
+ });
+ $.each( Galleria.get(), function(i, instance) {
+ instance.bind( type, callback );
+ });
+ return Galleria;
+};
+
+Galleria.on.binds = [];
+
+/**
+
+ Run Galleria
+ Alias for $(selector).galleria(options)
+
+ @param {string} selector A selector of element(s) to intialize galleria to
+
+ @param {object} options The options to apply
+
+ @returns Galleria
+
+*/
+
+Galleria.run = function( selector, options ) {
+ $( selector || '#galleria' ).galleria( options );
+ return Galleria;
+};
+
+/**
Creates a transition to be used in your gallery
@param {string} name The name of the transition that you will use as an option
@@ -4822,10 +4924,13 @@ Galleria.get = function( index ) {
The function contains two arguments, params and complete.
Use the params Object to integrate the transition, and then call complete when you are done.
+ @returns Galleria
+
*/
Galleria.addTransition = function( name, fn ) {
_transitions[name] = fn;
+ return Galleria;
};
/**
@@ -4839,6 +4944,8 @@ Galleria.utils = Utils;
It uses the console log if available otherwise it falls back to alert
@example Galleria.log("hello", document.body, [1,2,3]);
+
+ @returns Galleria
*/
Galleria.log = (function() {
@@ -4849,20 +4956,24 @@ Galleria.log = (function() {
window.alert( Utils.array( arguments ).join(', ') );
};
}
+ return Galleria;
}());
/**
A ready method for adding callbacks when a gallery is ready
Each method is call before the extend option for every instance
@param {function} callback The function to call
+
+ @returns Galleria
*/
Galleria.ready = function( fn ) {
$.each( _galleries, function( i, gallery ) {
fn.call( gallery, gallery._options );
});
Galleria.ready.callbacks.push( fn );
+ return Galleria;
};
Galleria.ready.callbacks = [];
@@ -4881,6 +4992,14 @@ Galleria.raise = function( msg, fatal ) {
self = this,
+ css = {
+ color: '#fff',
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ zIndex: 100000
+ },
+
echo = function( msg ) {
var html = '<div style="padding:4px;margin:0 0 2px;background:#' +
@@ -4897,18 +5016,15 @@ Galleria.raise = function( msg, fatal ) {
target.css( 'position', 'relative' );
- cont = this.addElement( 'errors' ).appendChild( 'target', 'errors' ).$( 'errors' ).css({
- color: '#fff',
- position: 'absolute',
- top: 0,
- left: 0,
- zIndex: 100000
- });
+ cont = this.addElement( 'errors' ).appendChild( 'target', 'errors' ).$( 'errors' ).css(css);
}
-
cont.append( html );
});
+
+ if ( !_instances.length ) {
+ $('<div>').css( css ).append( html ).appendTo( DOM().body );
+ }
};
// if debug is on, display errors and throw exception if fatal
@@ -4939,13 +5055,16 @@ Galleria.version = VERSION;
@param {number} version The minimum version required
@param {string} [msg] Optional message to display. If not specified, Galleria will throw a generic error.
+
+ @returns Galleria
*/
Galleria.requires = function( version, msg ) {
msg = msg || 'You need to upgrade Galleria to version ' + version + ' to use one or more components.';
if ( Galleria.version < version ) {
Galleria.raise(msg, true);
}
+ return Galleria;
};
/**
View
22 src/plugins/flickr/flickr-demo.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Galleria Flickr Plugin</title>
<style>
-
+
/* Demo styles */
html,body{background:#222;margin:0;}
body{border-top:4px solid #000;}
@@ -13,18 +13,18 @@
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}
-
+
/* This rule is read by Galleria to define the gallery height: */
#galleria{height:320px;}
-
+
</style>
-
+
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
-
+
<!-- load Galleria -->
<script src="../../galleria.js"></script>
-
+
<!-- load flickr plugin -->
<script src="galleria.flickr.js"></script>
@@ -33,20 +33,20 @@
<div class="content">
<h1>Galleria Flickr Plugin Demo</h1>
<p>Demonstrating a basic gallery example with a Flickr search.</p>
-
+
<!-- Adding gallery images. This is just a container for the dynamic flickr images -->
-
+
<div id="galleria"></div>
-
+
<p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
</div>
<script>
// Load the classic theme
Galleria.loadTheme('../../themes/classic/galleria.classic.js');
-
+
// Initialize Galleria
- $('#galleria').galleria({
+ Galleria.run('#galleria', {
flickr: 'search:cityscape',
flickrOptions: {
sort: 'interestingness-desc'
View
14 src/plugins/history/history-demo.html
@@ -38,10 +38,10 @@
<div id="galleria">
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/800px-Locomotives-Roundhouse2.jpg">
- <img title="Locomotives Roundhouse"
- alt="Steam locomotives of the Chicago &amp; North Western Railway."
- src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg">
- </a>
+ <img title="Locomotives Roundhouse"
+ alt="Steam locomotives of the Chicago &amp; North Western Railway."
+ src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg">
+ </a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg">
<img title="Icebergs in the High Arctic"
alt="”The debris loading isn't particularly extensive, but the color is usual.”"
@@ -90,10 +90,10 @@
<script>
// Load the classic theme
- Galleria.loadTheme('../../themes/classic/galleria.classic.js');
+ Galleria.loadTheme('../../themes/classic/galleria.classic.js');
- // Initialize Galleria
- $('#galleria').galleria();
+ // Initialize Galleria
+ Galleria.run('#galleria');
</script>
</body>
View
22 src/plugins/picasa/picasa-demo.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Galleria Flickr Plugin</title>
<style>
-
+
/* Demo styles */
html,body{background:#222;margin:0;}
body{border-top:4px solid #000;}
@@ -13,18 +13,18 @@
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}
-
+
/* This rule is read by Galleria to define the gallery height: */
#galleria{height:320px;}
-
+
</style>
-
+
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
-
+
<!-- load Galleria -->
<script src="../../galleria.js"></script>
-
+
<!-- load picasa plugin -->
<script src="galleria.picasa.js"></script>
@@ -33,19 +33,19 @@
<div class="content">
<h1>Galleria Picasa Plugin Demo</h1>
<p>Demonstrating a basic gallery example with photos from a Picasa album.</p>
-
+
<!-- Adding gallery images. This is just a container for the dynamic picasa images -->
-
+
<div id="galleria"></div>
-
+
<p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
</div>
<script>
// Load the classic theme
Galleria.loadTheme('../../themes/classic/galleria.classic.js');
-
- $('#galleria').galleria({
+
+ Galleria.run('#galleria', {
// The user & album. This example fetches the album "Demo" from the user "galleriajs"
picasa: 'useralbum:galleriajs/Demo'
});
View
14 src/themes/classic/classic-demo.html
@@ -35,10 +35,10 @@
<div id="galleria">
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/800px-Locomotives-Roundhouse2.jpg">
- <img title="Locomotives Roundhouse"
- alt="Steam locomotives of the Chicago &amp; North Western Railway."
- src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg">
- </a>
+ <img title="Locomotives Roundhouse"
+ alt="Steam locomotives of the Chicago &amp; North Western Railway."
+ src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg">
+ </a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg">
<img title="Icebergs in the High Arctic"
alt="”The debris loading isn't particularly extensive, but the color is usual.”"
@@ -87,10 +87,10 @@
<script>
// Load the classic theme
- Galleria.loadTheme('galleria.classic.js');
+ Galleria.loadTheme('galleria.classic.js');
- // Initialize Galleria
- $('#galleria').galleria();
+ // Initialize Galleria
+ Galleria.run('#galleria');
</script>
</body>

0 comments on commit c1d104b

Please sign in to comment.
Something went wrong with that request. Please try again.