@@ -2,28 +2,35 @@ var GalleryScroller = Class.create(); GalleryScroller.prototype = { - initialize: function(container, previous_button, next_button, count_per_page, center_on) { + initialize: function(container, previous_button, next_button, center_on) { this.previous_button = $(previous_button); this.next_button = $(next_button); this.container = $(container); - this.count_per_page = count_per_page; this.disable_buttons = false; - this.total_count = Element.childElements(this.container).length; - this.position = count_per_page; - this.position = (center_on || 1) + parseInt(count_per_page/2); - if (this.position < this.count_per_page) this.position = this.count_per_page; - if (this.position > this.total_count) this.position = this.total_count; // gotta wait for everything to load so sizing is right Event.observe(window, "load", function(evt) { this.width = Element.getWidth(this.container.parentNode); + this.widths = Element.childElements(this.container).map(function(e) { + return Element.getWidth(e) + + parseInt(Element.getStyle(e, 'margin-left')||0) + + parseInt(Element.getStyle(e, 'margin-right')||0); + }); var w = 0; - this.widths = Element.childElements(this.container).map(function(e) { return Element.getWidth(e) + parseInt(Element.getStyle(e, 'margin-left')||0) + parseInt(Element.getStyle(e, 'margin-right')||0); }); this.widths.each(function(e) {w = w + e}); this.total_width = w; + this.total_count = Element.childElements(this.container).length; + average = w/this.total_count; + this.count_per_page = Math.round(this.width / average); + this.position = this.count_per_page; + this.position = (center_on || 1) + parseInt(this.count_per_page/2); + if (this.position > this.total_count) this.position = this.total_count; var new_position = 0; - for (var i = 0; i < this.position; i++) new_position = new_position + this.widths[i]; - // need to start flush - if (this.position == this.count_per_page) new_position = this.width; + if (this.position <= this.count_per_page) { + // starting flush + new_position = this.width; + } else { + for (var i = 0; i < this.position; i++) new_position = new_position + this.widths[i]; + } Element.setStyle(this.container, { width:this.total_width + 'px', left:-(new_position - this.width || 0) + 'px' }); Event.observe(this.next_button, 'click', this.next.bindAsEventListener(this)); Event.observe(this.previous_button, 'click', this.previous.bindAsEventListener(this)); lib/gallery_scroller.js @@ -353,7 +353,7 @@ a.gallery_textlink { font-weight:bold; font-size:110%; } <script type="text/javascript"> //<![CDATA[ - new GalleryScroller('gallery_container', 'gallery_previous', 'gallery_next', 4) + new GalleryScroller('gallery_container', 'gallery_previous', 'gallery_next') //]]> </script> test/index.html 915f4ec32339836e216afc9e352850434318414e Doug McInnes doug@dougmcinnes.com http://github.com/latimes/gallery_scroller/commit/68a2d8b40900ba470584a067cc373d98e5c55dc3 68a2d8b40900ba470584a067cc373d98e5c55dc3 2008-11-07T15:31:06-08:00 2008-11-07T15:31:06-08:00 no longer needs the count_per_page parameter figures it out from the sizes of the elements git-svn-id: http://svn.latimesdev.com/svn/repos/shared/javascript/gallery_scroller/trunk@13602 a06862d0-bf29-e17f-e302-fbc15f989f17 d154713cb34741c8a6a3c4cdd218adc7af0d49d0 Doug McInnes doug@dougmcinnes.com