Transitions with different sized images

[gregory]

Hi

If a slideshow (cross fade transition) has two images where the first
image is smaller than the second, the second image is still visible. I
understand WHY you would want to set up the second image for
performance and the effect is really simple but this side effect
occurs.

Any thoughts or feelings towards this? I'm looking at the code and see
where it is set to visible. Maybe it should be set to transition with
(1 - current_transition)?

Greg

[gregory]

I should add..

There are also assumptions made in the push slideshow. The main
assumption being that all images are the same width as the show. This
results in images that are not as wide as the show being left or right
aligned instead of centered.

Again, I can understand originally why this was done. I'm curious if
it is necessary or should be enhanced?

Thanks
Greg

[Aeron Glemann]

Just use the overlap: false option

--
You received this message because you are subscribed to the Google Groups "Mootools Slideshow" group.
To post to this group, send email to mootools-...@googlegroups.com.
To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mootools-slideshow?hl=en.

[Aeron Glemann]

That was how push was originally designed. ... an argument could be made that it should support different sized images... for the moment you can achieve a similar effect using CSS:

http://www.electricprism.com/aeron/slideshow/example3.html

On Jun 16, 2010 7:25 AM, "gregory" <gregory....@gmail.com> wrote:

I should add..

There are also assumptions made in the push slideshow. The main
assumption being that all images are the same width as the show. This
results in images that are not as wide as the show being left or right
aligned instead of centered.

Again, I can understand originally why this was done. I'm curious if
it is necessary or should be enhanced?

Thanks
Greg

On Jun 16, 8:19 am, gregory <gregory.barch...@gmail.com> wrote:
> Hi
>

> If a slideshow (cross fade...

[gregory]

hi

thanks for the reply.

The overlap: false does work except it is no longer a cross fade
between the two images? is this correct? I am seeing a fade-out, fade-
in

thanks
greg

On Jun 16, 10:38 am, Aeron Glemann <aeron.glem...@gmail.com> wrote:
> Just use the overlap: false option
>

> On Jun 16, 2010 6:19 AM, "gregory" <gregory.barch...@gmail.com> wrote:
>
> Hi
>
> If a slideshow (cross fade transition) has two images where the first
> image is smaller than the second, the second image is still visible. I
> understand WHY you would want to set up the second image for
> performance and the effect is really simple but this side effect
> occurs.
>
> Any thoughts or feelings towards this? I'm looking at the code and see
> where it is set to visible. Maybe it should be set to transition with
> (1 - current_transition)?
>
> Greg
>
> --
> You received this message because you are subscribed to the Google Groups
> "Mootools Slideshow" group.
> To post to this group, send email to mootools-...@googlegroups.com.
> To unsubscribe from this group, send email to

> mootools-slides...@googlegroups.com<mootools-slideshow%2Bunsubs cr...@googlegroups.com>
> .

[gregory]

quick question on the custom css:

if I have the classes defined as such:
[ 'slideshow-page0', '', '', '','', '', '', '', '', '', '', '', '',
'', '', '']

I tried:
.slideshow-page0-images-visible {
margin-left: 0;
}
.slideshow-page0-images-prev {
margin-left: 400px !important;
}
.slideshow-page0-images-next {
margin-left: -400px !important;
}

but I don't see my images centered (show is 400x400px). am i missing
something?

thanks
greg

On Jun 16, 10:43 am, Aeron Glemann <aeron.glem...@gmail.com> wrote:
> That was how push was originally designed. ... an argument could be made
> that it should support different sized images... for the moment you can
> achieve a similar effect using CSS:
>
> http://www.electricprism.com/aeron/slideshow/example3.html
>

[Aeron Glemann]

I'd have to see an example to know for sure... but possibly the !important is making it impossible to animate.

--
You received this message because you are subscribed to the Google Groups "Mootools Slideshow" group.
To post to this group, send email to mootools-...@googlegroups.com.

To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.

[Aeron Glemann]

Right.... if I understand what you are asking... you would like one image to fade in while the fades out... Personally I've done this... but I did not like the effect... there is a moment where both images are 50% transparent - and it has a kind of pulsing effect to the transition... not smooth like the single image fading in over the other... anyway if that absolutely is the effect you must have than there is nothing stopping you from coding it as plugin...

To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.

[Daiv Mowbray]

Just remove the !important clause,
this over-rules anything else

On Jun 17, 2010, at 3:08 AM, gregory wrote:

> I tried:
> .slideshow-page0-images-visible {
> margin-left: 0;
> }
> .slideshow-page0-images-prev {
> margin-left: 400px !important;

You can not cross fade from one to another if they don't overlap.
no overlap means remove image A before showing image B.
So a cross fade is impossible.

You will need to make your images the same size, or set resize to
true, or length
which ever works for you.

> The overlap: false does work except it is no longer a cross fade
> between the two images? is this correct? I am seeing a fade-out, fade-
> in

Sincerely,

Daiv Mowbray
daiv.m...@gmail.com
========

[kyle]

I was trying to achieve the same thing as Gregory because I have
different size images and I dont want the fade in fade out effect.
Crossfading different sized images would be a nice feature for this
slideshow.

On Jun 17, 9:46 am, Daiv Mowbray <daiv.mowb...@gmail.com> wrote:

> You can not cross fade from one to another if they don't overlap.
> no overlap means remove image A before showing image B.
> So a cross fade is impossible.
>
> You will need to make your images the same size, or set resize to  
> true, or length
> which ever works for you.
>
> > The overlap: false does work except it is no longer a cross fade
> > between the two images? is this correct? I am seeing a fade-out, fade-
> > in
>
> Sincerely,
>
> Daiv Mowbray

> daiv.mowb...@gmail.com
> ========

[gregory]

Hi

I'd like to propose a resize: "both" option. This option would be
equivalent to resizing both the width and length.

The _resize function would then be:

_resize: function(img){
if (this.options.resize){
var h = this.preloader.get('height'), w =
this.preloader.get('width');
var dh = this.height / h, dw = this.width / w, d;

var length = (this.options.resize ==
'length');
var both = (this.options.resize == 'both');
if (length || both)
d = (dh > dw) ? dw : dh;
else if (both || !length)
d = (dh > dw) ? dh : dw;
img.set('styles', {height: Math.ceil(h * d), width: Math.ceil(w *
d)});
}
},

Thoughts?

-Greg

[bpm1975]

I'm interested in seeing the one-in/one-out cross fade in action. Any chance anyone has an example of code that does this or can point me in the right direction? Thanks -bpm