Center image

[GoogleCodeExporter]

Center image

[GoogleCodeExporter]

The centering will not work if you are specifying an absolute position in your 
image
transition. Can you please post the classes you are using to define the 
transitions
and the JS you are using to initialize the show?

Original comment by [email protected] on 13 May 2008 at 1:58

[GoogleCodeExporter]

I am using the exact same setup as the default CSS file.

Original comment by [email protected] on 14 May 2008 at 7:35

[GoogleCodeExporter]

I modified the show function to be able to handle absolute positioning. But this
removes the flexibility of customizing a css class.
I found another bug also. The image is not centered on initialize. The first 
image is
always set to 0,0.

show: function(fast){
        if (!this.image.retrieve('morph')){
            var options = (this.options.overlap) ? {'duration': this.options.duration, 'link':
'cancel'} : {'duration': this.options.duration / 2, 'link': 'chain'};
            $$(this.a, this.b).set('morph', $merge(options, {'transition':
this.options.transition}));
        }
        //this._center(this.image);
        var hidden = this.classes.get('images', ((this.direction == 'left') ? 'next' :
'prev'));
        var visible = this.classes.get('images', 'visible');
        if (fast)
            this.image.get('morph').cancel().set(visible);          
        else {
            var img = (this.counter % 2) ? this.a : this.b;
            if (this.options.overlap){  
                img.get('morph').set(visible);
                this.image.get('morph').set(hidden).start(visible);
            } else {
                var size = this.image.getSize();
                var fn = function(hidden, visible){
                    this.image.get('morph').set(hidden).start({left: (size.x - this.width) / -2,
top: (size.y - this.height) / -2, opacity: 1});
                }.pass([hidden, visible], this);
                var hidden = this.classes.get('images', ((this.direction == 'left') ? 'prev' :
'next'));
                img.get('morph').set({left: (size.x - this.width) / -2, top: (size.y -
this.height) / -2, opacity: 1}).start(hidden).chain(fn);
            }
        }
    },

Original comment by [email protected] on 14 May 2008 at 8:30

[GoogleCodeExporter]

Regarding centering on initialize, I haven't found a way to do this as the 
image must
be centered after the first image has loaded.

Original comment by [email protected] on 14 May 2008 at 2:28

[GoogleCodeExporter]

Centering on initialize can be done by adding the following after line 104
(anchor.clone().grab(this.a).inject(images);)of the slideshow.js file:

this._center(this.a);

Original comment by [email protected] on 15 May 2008 at 9:11

[GoogleCodeExporter]

Thanks for your feedback but this does not work as sometimes the image isn't 
loaded
fast enough to be able to set the top and left.
Centering must be done after we have confirmation that the first image has 
loaded or
some other CSS solution. 
Obviously this works if the image is already loaded, but this scenario does not 
work
when you load an image dynamically.

Original comment by [email protected] on 15 May 2008 at 9:21

[GoogleCodeExporter]

What about centering the first image in your CSS? That seems like the safest 
bet.

Original comment by [email protected] on 15 May 2008 at 9:42

[GoogleCodeExporter]

I tried that without success. Any suggestions on the CSS needed for the first 
image?
I also needs to centered vertically.

Original comment by [email protected] on 16 May 2008 at 8:54

[GoogleCodeExporter]

http://www.google.com/search?q=css+center+vertical

Original comment by [email protected] on 19 May 2008 at 3:33

[GoogleCodeExporter]

Setting CSS attributes on the first image will cause those attributes to be
duplicated in the "a" and "b" images (those are the names in the code), which 
most
likely will have undesired results.  For example, I used the old "top: 50%; 
left:
50%; width: 400px; height: 300px; margin-left: -200px; margin-top: -150px" 
negative
margins trick.  This worked great for displaying the first image, but the 
subsequent
images had their top and left attributes set to 0, so the negative margins 
pushed the
images out of the slideshow window.  I imagine other centering techniques would 
also
cause the subsequent images to display out of kilter.

It seems whatever solution is found for Defect #10 could also solve this one. 
Ultimately, the image to be displayed first, be it the first image or one 
specified
by the "slide" option, needs to be completely loaded so that size attributes are
correctly set and the image can then be centered and resized.

Original comment by [email protected] on 22 May 2008 at 9:51

[GoogleCodeExporter]

Original comment by [email protected] on 12 Jun 2008 at 10:39

[GoogleCodeExporter]

Testing locally and the patch suggested in comment #5 seems to work. I would 
recommend making sure to set 
the height and width for the default image in the HTML so the class has the 
necessary info to calculate the 
centering before the media loads.

Original comment by [email protected] on 16 Jun 2008 at 12:20

• Changed state: Fixed