Posted By

pdswan on 07/30/09


Tagged

javascript prototype gallery


Versions (?)

Prototype.js Image Gallery


 / Published in: JavaScript
 

  1. var SlideShow = Class.create({
  2. initialize: function(container, images){
  3. this.container = $(container);
  4. if( !this.container ){
  5. throw "SlideShow: Invalid container element";
  6. return null;
  7. }
  8. this.images = [];
  9. images.each(function(e, i){
  10. this.images.push({
  11. info: e,
  12. element: null
  13. });
  14. }, this);
  15. this.options = Object.extend({
  16. template: '<div id="#{id}" class="SlideShowItem" style="display: none; position: absolute; top: 0px; left: 0px;">' +
  17. '<img alt="#{caption}" src="#{src}" />' +
  18. '<div class="image_caption">#{caption}</div>' +
  19. '</div>',
  20. swap: function(container, current, swap, scope){
  21. if( current ){
  22. new Effect.Parallel([
  23. new Effect.Fade(current, {
  24. sync: true
  25. }),
  26. new Effect.Appear(swap, {
  27. sync: true
  28. })
  29. ], {queue: {position: 'end', scope: scope}});
  30. }else{
  31. new Effect.Appear(swap, {queue: {position: 'end', scope: scope}});
  32. }
  33. },
  34. active_class: 'active'
  35. }, arguments[2] || {});
  36. this.options.template = new Template(this.options.template);
  37.  
  38. /* wire up all the elements */
  39. this.id = this.container.identify();
  40. var gotos = $$('[class*=' + this.id + '_goto_]');
  41. this.gotos = $H();
  42. gotos.each(function(g){
  43. var re = new RegExp(this.id + '_goto_([0-9]+)');
  44. var matches = re.exec(g.className);
  45. if( matches ){
  46. var m = parseInt(matches[1]);
  47. g.observe('click', this.gotoIndex.bindAsEventListener(this, m));
  48. this.gotos.set( m, (this.gotos.get(m) || []).concat([g]) );
  49. }
  50. }, this);
  51.  
  52. this.prev_elements = $$('.' + this.id + '_action_previous');
  53. this.next_elements = $$('.' + this.id + '_action_next');
  54. this.prev_elements.invoke('observe', 'click', this.previous.bindAsEventListener(this));
  55. this.next_elements.invoke('observe', 'click', this.next.bindAsEventListener(this));
  56.  
  57. this.loaders = $$('.' + this.id + '_loading');
  58. this.current_index = null;
  59. this.to_animate = null;
  60. this.gotoIndex(0);
  61. },
  62. gotoIndex: function(){
  63. var index = null;
  64. if( arguments.length == 2){
  65. try{
  66. arguments[0].stop();
  67. }catch(e){}
  68. index = arguments[1];
  69. }else{
  70. index = arguments[0];
  71. }
  72. index = this._getIndex(index);
  73. var add = this.to_animate!=null?this.gotos.get(this.to_animate):null;
  74. if( this.current_index != null ){
  75. add.concat(this.gotos.get(this.current_index)||[]);
  76. }
  77. this.to_animate = index;
  78. var remove = this.gotos.get(index);
  79. if( add ) add.invoke('removeClassName', this.options.active_class);
  80. if( remove ) remove.invoke('addClassName', this.options.active_class);
  81.  
  82. if( !this.images[index].loaded){
  83. if (!this.images[index].loading) {
  84. this.doLoad(index);
  85. }
  86. }else{
  87. this.doIt(index);
  88. }
  89. },
  90. next: function(){
  91. var args = this._assembleArguments(arguments, [this.to_animate + 1]);
  92. this.gotoIndex.apply(this, args);
  93. },
  94. previous: function(){
  95. var args = this._assembleArguments(arguments, [this.to_animate - 1]);
  96. this.gotoIndex.apply(this, args);
  97. },
  98. _assembleArguments: function(){
  99. return $A(arguments[0]||[]).concat(arguments[1]||[]);
  100. },
  101. doLoad: function(index){
  102. this.images[index].loading = true;
  103. this._toggleLoading(true);
  104. this.images[index].info.id = 'image' + index;
  105. this.container.insert(this.options.template.evaluate(this.images[index].info));
  106. this._processElement.bind(this).defer(index);
  107. },
  108. doIt: function(index){
  109. this.images[index].loading = false;
  110. this.images[index].loaded = true;
  111. this._toggleLoading(false);
  112. if( index == this.to_animate && index != this.current_index ){
  113. var current_element = this.current_index!=null?this.images[this.current_index].element:null;
  114. var new_element = this.images[index].element;
  115. var dir = this.current_index==null||index>this.current_index?1:-1;
  116. this.current_index = index;
  117. this.options.swap(this.container, current_element, new_element, dir, this.id);
  118. }
  119. },
  120. _processElement: function(index){
  121. var elm = $(this.images[index].info.id);
  122. this.images[index].element = elm;
  123. if( !this.images[index].element ){
  124. throw "SlideShow: image element was not properly created";
  125. }
  126. var i = new Image();
  127. i.onload = this.doIt.bind(this, index);
  128. i.src = this.images[index].info.src;
  129. },
  130. _getIndex: function(index){
  131. if( index > this.images.length - 1){
  132. return 0;
  133. }else if( index < 0 ){
  134. return this.images.length - 1;
  135. }else{
  136. return index;
  137. }
  138. },
  139. _toggleLoading: function(s){
  140. this.loaders.invoke((s?'show':'hide'));
  141. }
  142. });

Report this snippet  

You need to login to post a comment.