$('#notification').notification('icon', './test/icon01.png');
});
+ $('#gallery-demo').bind('pageshow', function () {
+ $('#gallery').gallery('add', './test/01.jpg');
+ $('#gallery').gallery('add', './test/02.jpg');
+ $('#gallery').gallery('add', './test/03.jpg');
+ $('#gallery').gallery('add', './test/04.jpg');
+ $('#gallery').gallery('add', './test/05.jpg');
+ $('#gallery').gallery('add', './test/06.jpg');
+ $('#gallery').gallery('add', './test/07.jpg');
+ $('#gallery').gallery('add', './test/08.jpg');
+ $('#gallery').gallery('add', './test/09.jpg');
+ $('#gallery').gallery('refresh', 3);
+ });
+
+ $('#gallery-demo').bind('pagebeforehide', function () {
+ $('#gallery').gallery('empty');
+ });
+
$('#gallery-add').bind('vmouseup', function ( e ) {
$('#gallery').gallery('add', './test/10.jpg');
$('#gallery').gallery('add', './test/11.jpg');
<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="gallery-demo" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Gallery</h1>
</div>
<div data-role="content" data-scroll="none">
- <div data-role="gallery" id="gallery" data-index="3" data-vertical-align="middle">
- <img src="./test/01.jpg">
- <img src="./test/02.jpg">
- <img src="./test/03.jpg">
- <img src="./test/04.jpg">
- <img src="./test/05.jpg">
- <img src="./test/06.jpg">
- <img src="./test/07.jpg">
- <img src="./test/08.jpg">
- <img src="./test/09.jpg">
+ <div data-role="gallery" id="gallery" data-vertical-align="middle">
</div>
</div> <!-- /content -->
<div data-role="footer"data-position ="fixed">
* add(file): add the image (parameter: url of iamge)
* remove(index): remove the image (parameter: index of image)
* refresh(index): refresh the widget, should be called after add or remove. (parameter: start index)
+ * empty: remove all of images from the gallery
+ * length: get length of images
+ * value: get current index of gallery
*
* Events
*
/**
@class Gallery
- The image slider widget shows images in a gallery on the screen. <br/><br/> To add an image slider widget to the application, use the following code:
+ The gallery widget shows images in a gallery on the screen. <br/><br/> To add an gallery widget to the application, use the following code:
<div data-role="gallery" id="gallery" data-vertical-align="middle" data-index="3">
<img src="01.jpg">
*/
/**
@method add
- The add method is used to add an image to the image slider. The image_file attribute defines the image file URL.
+ The add method is used to add an image to the gallery. The image_file attribute defines the image file URL.
<div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
$("#gallery").gallery('add', [image_file]);
*/
/**
@method remove
- The remove method is used to delete an image from the image slider. The image_index attribute defines the index of the image to be deleted.
+ The remove method is used to delete an image from the gallery. The image_index attribute defines the index of the image to be deleted. If not set removes current image.
<div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
$("#gallery").gallery('remove', [image_index]);
*/
/**
@method refresh
- The refresh method is used to refresh the image slider. This method must be called after adding images to the image slider.
+ The refresh method is used to refresh the gallery. This method must be called after adding images to the gallery.
<div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
$("#gallery").gallery('refresh');
*/
+/**
+ @method empty
+ The empty method is used to remove all of images from the gallery.
+
+ <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+ $("#gallery").gallery('empty');
+*/
+/**
+ @method length
+ The length method is used to get length of images.
+
+ <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+ length = $("#gallery").gallery('length');
+*/
+/**
+ @method value
+ The value method is used to get current index of gallery.
+
+ <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
+ value = $("#gallery").gallery('value');
+*/
(function ( $, window, undefined ) {
$.widget( "tizen.gallery", $.mobile.widget, {
options: {
var img = this.images[index],
img_top = 0;
- if ( !obj) {
+ if ( !obj ) {
return;
}
if ( !obj.length ) {
self._align( index, obj );
};
- if ( !obj) {
+ if ( !obj ) {
return;
}
if ( !obj.length ) {
},
_detach: function ( index, obj ) {
- if ( !obj) {
+ if ( !obj ) {
return;
}
if ( !obj.length ) {
clearInterval( this.loader[index] );
},
+ _detach_all: function () {
+ var i;
+
+ for ( i = 0; i < this.images.length; i++ ) {
+ this.images[i].detach();
+ }
+ },
+
_drag: function ( _x ) {
var delta,
coord_x;
i++;
}
- for ( i = 0; i < this.images.length; i++ ) {
- this.images[i].detach();
- }
+ this._detach_all();
index = parseInt( $( this.element ).jqmData( 'index' ), 10 );
if ( !index ) {
this.container.append( bg_html );
this.images.push( temp_img );
}
+
+ this._detach_all();
},
refresh: function ( start_index ) {
this.index = start_index;
this._show();
+
+ return this.index;
},
add: function ( file ) {
this.images.splice( index, 1 );
temp_img.detach();
+ },
+
+ empty: function () {
+ this.images.splice( 0, this.images.length );
+ this.container.find('.ui-gallery-bg').detach();
+ },
+
+ length: function () {
+ return this.images.length;
+ },
+
+ value: function () {
+ return this.index;
}
}); /* End of widget */
$( e.target ).find( ":jqmData(role='gallery')" ).gallery();
});
- $( document ).bind( "pageshow", function ( e ) {
+ $( document ).bind( "pagebeforeshow", function ( e ) {
$( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'show' );
});