2 Author: Minkyu Kang <mk7.kang@samsung.com>
10 * data-role: set to 'imageslider'
11 * data-start-index: start index
12 * data-vertical-align: set to top or middle or bottom.
16 * add(image_file): add the image (parameter: url of iamge)
17 * del(image_index): delete the image (parameter: index of image)
18 * refresh(): refresh the widget, should be called after add or del.
26 * <div data-role="imageslider" id="imageslider" data-start-index="3" data-vertical-align="middle">
35 * $('#imageslider-add').bind('vmouseup', function ( e ) {
36 * $('#imageslider').imageslider('add', '9.jpg');
37 * $('#imageslider').imageslider('add', '10.jpg');
38 * $('#imageslider').imageslider('refresh');
41 * $('#imageslider-del').bind('vmouseup', function ( e ) {
42 * $('#imageslider').imageslider('del');
47 (function ($, window, undefined) {
48 $.widget("tizen.imageslider", $.mobile.widget, {
70 _resize: function ( obj ) {
75 var img_max_width = this.max_width - margin;
76 var img_max_height = this.max_height - margin;
78 height = obj.height();
81 ratio = height / width;
83 if ( width > img_max_width ) {
84 obj.width( img_max_width );
85 obj.height( img_max_width * ratio );
88 height = obj.height();
90 if ( height > img_max_height ) {
91 obj.height( img_max_height );
92 obj.width( img_max_height / ratio );
96 _align: function ( obj, img ) {
102 if ( this.align_type == "middle" ) {
103 img_top = (this.max_height - img.height()) / 2;
104 } else if ( this.align_type == "bottom" ) {
105 img_top = this.max_height - img.height();
110 obj.css( 'top', img_top + 'px' );
113 _detach: function ( image_index, obj ) {
117 if ( image_index < 0 ) {
120 if ( image_index >= this.images.length ) {
124 this.images[image_index].detach();
125 obj.css( "display", "none" );
128 _attach: function ( image_index, obj ) {
132 if ( image_index < 0 ) {
135 if ( image_index >= this.images.length ) {
139 obj.css( "display", "block" );
140 obj.append( this.images[image_index] );
141 this._resize( this.images[image_index] );
142 this._align( obj, this.images[image_index] );
145 _drag: function ( _x ) {
146 if ( !this.dragging ) {
150 if ( this.options.photoFlicking === false ) {
151 var delta = this.org_x - _x;
154 if ( delta < 0 && !this.prev_img.length ) {
158 if ( delta > 0 && !this.next_img.length ) {
163 var coord_x = _x - this.org_x;
165 this.cur_img.css( 'left', coord_x + 'px' );
166 if ( this.next_img.length ) {
167 this.next_img.css('left',
168 coord_x + this.max_width + 'px');
170 if ( this.prev_img.length ) {
171 this.prev_img.css('left',
172 coord_x - this.max_width + 'px');
176 _move: function ( _x ) {
177 var delta = this.org_x - _x;
185 flip = delta < (this.max_width * 0.45) ? 0 : 1;
187 flip = -delta < (this.max_width * 0.45) ? 0 : 1;
191 var date = new Date();
192 var drag_time = date.getTime() - this.org_time;
194 if ( Math.abs(delta) / drag_time > 1 ) {
200 if ( delta > 0 && this.next_img.length ) {
202 this._detach( this.index - 1, this.prev_img );
204 this.prev_img = this.cur_img;
205 this.cur_img = this.next_img;
206 this.next_img = this.next_img.next();
210 if ( this.next_img.length ) {
211 this.next_img.css( 'left',
212 this.max_width + 'px' );
213 this._attach( this.index + 1,
219 } else if ( delta < 0 && this.prev_img.length ) {
221 this._detach( this.index + 1, this.next_img );
223 this.next_img = this.cur_img;
224 this.cur_img = this.prev_img;
225 this.prev_img = this.prev_img.prev();
229 if ( this.prev_img.length ) {
230 this.prev_img.css( 'left',
231 -this.max_width + 'px' );
232 this._attach( this.index - 1,
245 this.interval = setInterval(function () {
247 clearInterval( self.interval );
250 this.cur_img.animate({left: 0}, sec);
251 if ( this.next_img.length ) {
252 this.next_img.animate({left: this.max_width}, sec);
254 if ( this.prev_img.length ) {
255 this.prev_img.animate({left: -this.max_width}, sec);
259 _add_event: function () {
262 this.container.bind('vmousemove', function ( e ) {
268 if ( !self.dragging ) {
272 self._drag( e.pageX );
275 this.container.bind('vmousedown', function ( e ) {
282 self.dragging = true;
284 self.org_x = e.pageX;
286 var date = new Date();
287 self.org_time = date.getTime();
290 this.container.bind('vmouseup', function (e) {
295 self.dragging = false;
297 self._move( e.pageX );
300 this.container.bind('vmouseout', function (e) {
304 if ( !self.dragging ) {
308 if ( (e.pageX < 20) ||
309 (e.pageX > (self.max_width - 20)) ) {
310 self._move( e.pageX );
311 self.dragging = false;
316 _del_event: function () {
317 this.container.unbind('vmousemove');
318 this.container.unbind('vmousedown');
319 this.container.unbind('vmouseup');
320 this.container.unbind('vmouseout');
324 this.cur_img = $('div').find(
325 '.ui-imageslider-bg:eq(' + this.index + ')');
326 this.prev_img = this.cur_img.prev();
327 this.next_img = this.cur_img.next();
329 this._attach( this.index - 1, this.prev_img );
330 this._attach( this.index, this.cur_img );
331 this._attach( this.index + 1, this.next_img );
333 if ( this.prev_img.length ) {
334 this.prev_img.css( 'left', -this.max_width + 'px' );
337 this.cur_img.css( 'left', 0 + 'px' );
339 if ( this.next_img.length ) {
340 this.next_img.css( 'left', this.max_width + 'px' );
350 this._detach( this.index - 1, this.prev_img );
351 this._detach( this.index, this.cur_img );
352 this._detach( this.index + 1, this.next_img );
360 _get_height: function () {
361 var $page = $('.ui-page');
362 var $content = $page.children('.ui-content');
363 var $header = $page.children('.ui-header');
364 var $footer = $page.children('.ui-footer');
366 var header_h = $header.outerHeight();
367 var footer_h = $footer.outerHeight();
368 var padding = parseFloat($content.css('padding-top')) +
369 parseFloat($content.css('padding-bottom'));
371 var content_h = window.innerHeight - header_h -
372 footer_h - padding * 2;
377 _create: function () {
378 this.images = new Array();
379 this.images_hold = new Array();
381 $( this.element ).wrapInner('<div class="ui-imageslider"></div>');
382 $('img').wrap('<div class="ui-imageslider-bg"></div>');
384 this.container = $( this.element ).find('.ui-imageslider');
386 this.max_width = window.innerWidth;
387 this.max_height = this._get_height();
388 this.container.css( 'height', this.max_height );
390 var temp_img = $('div').find('.ui-imageslider-bg:first');
392 for ( i = 0; ; i++ ) {
393 if ( !temp_img.length ) {
397 this.images[i] = temp_img.find('img');
399 temp_img = temp_img.next();
402 for ( i = 0; i < this.images.length; i++ ) {
403 this.images[i].detach();
406 var start_index = parseInt( $(this.element).attr('data-start-index') );
407 if ( start_index === undefined ) {
410 if ( start_index < 0 ) {
413 if ( start_index >= this.images.length ) {
414 start_index = this.images.length - 1;
417 this.index = start_index;
419 this.align_type = $( this.element ).attr('data-vertical-align');
422 _update: function () {
424 if ( !this.images_hold.length ) {
428 var image_file = this.images_hold.shift();
430 var bg_html = $('<div class="ui-imageslider-bg"></div>');
431 var temp_img = $('<img src="' + image_file + '"></div>');
433 bg_html.append( temp_img );
434 this.container.append( bg_html );
435 this.images.push( temp_img );
439 refresh: function ( start_index ) {
444 if ( start_index === undefined ) {
445 start_index = this.index;
447 if ( start_index < 0 ) {
450 if ( start_index >= this.images.length ) {
451 start_index = this.images.length - 1;
454 this.index = start_index;
459 add: function ( image_file ) {
460 this.images_hold.push( image_file );
463 del: function ( image_index ) {
466 if ( image_index === undefined ) {
467 image_index = this.index;
470 if ( image_index < 0 || image_index >= this.images.length ) {
474 if ( image_index == this.index ) {
475 temp_img = this.cur_img;
477 if ( this.index == 0 ) {
479 } else if ( this.index == this.images.length - 1 ) {
483 if ( this.direction < 0 ) {
484 this.cur_img = this.prev_img;
485 this.prev_img = this.prev_img.prev();
486 if ( this.prev_img.length ) {
487 this.prev_img.css( 'left', -this.max_width );
488 this._attach( image_index - 2, this.prev_img );
492 this.cur_img = this.next_img;
493 this.next_img = this.next_img.next();
494 if ( this.next_img.length ) {
495 this.next_img.css( 'left', this.max_width );
496 this._attach( image_index + 2, this.next_img );
500 this.cur_img.animate({left: 0}, 500);
502 } else if ( image_index == this.index - 1 ) {
503 temp_img = this.prev_img;
504 this.prev_img = this.prev_img.prev();
505 if ( this.prev_img.length ) {
506 this.prev_img.css( 'left', -this.max_width );
507 this._attach( image_index - 1, this.prev_img );
511 } else if ( image_index == this.index + 1 ) {
512 temp_img = this.next_img;
513 this.next_img = this.next_img.next();
514 if ( this.next_img.length ) {
515 this.next_img.css( 'left', this.max_width );
516 this._attach( image_index + 1, this.next_img );
520 temp_img = $('div').find('.ui-imageslider-bg:eq('+ image_index + ')');
523 this.images.splice( image_index, 1 );
526 }); /* End of widget */
528 // auto self-init widgets
529 $( document ).bind("pagecreate", function (e) {
530 $( e.target ).find(":jqmData(role='imageslider')").imageslider();
533 $( document ).bind("pageshow", function (e) {
534 $( e.target ).find(":jqmData(role='imageslider')").imageslider('show');
537 $( document ).bind("pagebeforehide", function (e) {
538 $ (e.target ).find(":jqmData(role='imageslider')").imageslider('hide');