Center image

[GoogleCodeExporter]

On my local installation I have not been able to get centering to work.

I am using the normal transition and my slideshow size is the size of the
largest image I have. When the slideshow displays a vertical photo (same
height but half the width) I can see in firebug that the image is displayed
with "left: 0px". By placing an alert in the _center function I can see how
the image is given the correct value of left 145px, but then how it after
the alert box is transitioned to 0px. 

I am using the latest mootools trunk and firefox 3.0b5.

Original issue reported on code.google.com by m...@theglide.com on 13 May 2008 at 9:16

[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 aeron.gl...@gmail.com on 13 May 2008 at 1:58

[GoogleCodeExporter]

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

Original comment by m...@theglide.com 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 m...@theglide.com 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 m...@theglide.com 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 carqu...@cox.net 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 m...@theglide.com 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 aeron.gl...@gmail.com 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 m...@theglide.com on 16 May 2008 at 8:54

[GoogleCodeExporter]

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

Original comment by aeron.gl...@gmail.com 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 ourcarqu...@cox.net on 22 May 2008 at 9:51

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com 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 aeron.gl...@gmail.com on 16 Jun 2008 at 12:20

• Changed state: Fixed