Cycle plugin an absolute positioning

classic Classic list List threaded Threaded
23 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Cycle plugin an absolute positioning

caruso_g

Hi all guys,
I have a problem with the fantastic Cycle plugin.
I have a group on images links whose I can't know their dimensions in
advance.
So the images sizes the customer will use will vary.
The Cycle plugin give the element an absolute positioning (so left 0
and top 0).
Since I need to center those images link in their container, I have
the problem to dynamically know their width to give the image link a
left position 50% and a left-margin -"the-image-size"/2 just to center
it.
Well, as you can see, I can say it in words, but sadly I am not able
to translate it in jQuery language.
Can someone help me? And above all, can try to explain me the "modus
operandi" on how to arrive to the code? I would like to learn the
"pattern" to find these kind of solutions and be able to do it myself.
Btw, thanks to Remy Sharp the author of jQuery For Designers[http://
jqueryfordesigners.com/] he is quite prefect in his tutorial, and
above all doesn't jump any step, and show us the code verbose before
to short it! Great resource!

This is the online example page:
http://www.bonsai-studio.net/clients/lamoy/wessel04/speed/

Thanks to anyone that can help me.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

caruso_g

May anyone help me, please?
Mike...?

Thank you all!

On Mar 13, 10:49 pm, caruso_g <[hidden email]> wrote:

> Hi all guys,
> I have a problem with the fantastic Cycle plugin.
> I have a group on images links whose I can't know their dimensions in
> advance.
> So the images sizes the customer will use will vary.
> The Cycle plugin give the element an absolute positioning (so left 0
> and top 0).
> Since I need to center those images link in their container, I have
> the problem to dynamically know their width to give the image link a
> left position 50% and a left-margin -"the-image-size"/2 just to center
> it.
> Well, as you can see, I can say it in words, but sadly I am not able
> to translate it in jQuery language.
> Can someone help me? And above all, can try to explain me the "modus
> operandi" on how to arrive to the code? I would like to learn the
> "pattern" to find these kind of solutions and be able to do it myself.
> Btw, thanks to Remy Sharp the author of jQuery For Designers[http://
> jqueryfordesigners.com/] he is quite prefect in his tutorial, and
> above all doesn't jump any step, and show us the code verbose before
> to short it! Great resource!
>
> This is the online example page:http://www.bonsai-studio.net/clients/lamoy/wessel04/speed/
>
> Thanks to anyone that can help me.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

Rick-107

Well you can try using:
margin-left:auto;
margin-right auto;
this does not work in msie, but in msie you can do a expression
left:50%
elm.style.setExpression("marginLeft","-"+this.parentNode.offsetHeight/
2")

On 14 mrt, 12:57, caruso_g <[hidden email]> wrote:

> May anyone help me, please?
> Mike...?
>
> Thank you all!
>
> On Mar 13, 10:49 pm, caruso_g <[hidden email]> wrote:
>
> > Hi all guys,
> > I have a problem with the fantastic Cycle plugin.
> > I have a group on images links whose I can't know their dimensions in
> > advance.
> > So the images sizes the customer will use will vary.
> > The Cycle plugin give the element an absolute positioning (so left 0
> > and top 0).
> > Since I need to center those images link in their container, I have
> > the problem to dynamically know their width to give the image link a
> > left position 50% and a left-margin -"the-image-size"/2 just to center
> > it.
> > Well, as you can see, I can say it in words, but sadly I am not able
> > to translate it in jQuery language.
> > Can someone help me? And above all, can try to explain me the "modus
> > operandi" on how to arrive to the code? I would like to learn the
> > "pattern" to find these kind of solutions and be able to do it myself.
> > Btw, thanks to Remy Sharp the author of jQuery For Designers[http://
> > jqueryfordesigners.com/] he is quite prefect in his tutorial, and
> > above all doesn't jump any step, and show us the code verbose before
> > to short it! Great resource!
>
> > This is the online example page:http://www.bonsai-studio.net/clients/lamoy/wessel04/speed/
>
> > Thanks to anyone that can help me.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

caruso_g

Hi Rick,
thanks a lot for your reply.
The problem is that auto margins don't work since the elements are
absolute positioned.
The absolute positioning is necessary to let elements be one on the
other one when animating.

The good new is that I found the solution.
I know that for all the devs out there is stupid but to me it took
half day of work and attempts... :P

Here it is my solution:

        $('div.pics a').each(function() {
                $(this).css({left: '50%', marginLeft: -$(this).width()/2});
        });

If someone wants to comment it, or if it could be improved in any way,
I would love to read your posts.

Thank you all again.

On Mar 14, 2:24 pm, Rick <[hidden email]> wrote:

> Well you can try using:
> margin-left:auto;
> margin-right auto;
> this does not work in msie, but in msie you can do a expression
> left:50%
> elm.style.setExpression("marginLeft","-"+this.parentNode.offsetHeight/
> 2")
>
> On 14 mrt, 12:57, caruso_g <[hidden email]> wrote:
>
> > May anyone help me, please?
> > Mike...?
>
> > Thank you all!
>
> > On Mar 13, 10:49 pm, caruso_g <[hidden email]> wrote:
>
> > > Hi all guys,
> > > I have a problem with the fantastic Cycle plugin.
> > > I have a group on images links whose I can't know their dimensions in
> > > advance.
> > > So the images sizes the customer will use will vary.
> > > The Cycle plugin give the element an absolute positioning (so left 0
> > > and top 0).
> > > Since I need to center those images link in their container, I have
> > > the problem to dynamically know their width to give the image link a
> > > left position 50% and a left-margin -"the-image-size"/2 just to center
> > > it.
> > > Well, as you can see, I can say it in words, but sadly I am not able
> > > to translate it in jQuery language.
> > > Can someone help me? And above all, can try to explain me the "modus
> > > operandi" on how to arrive to the code? I would like to learn the
> > > "pattern" to find these kind of solutions and be able to do it myself.
> > > Btw, thanks to Remy Sharp the author of jQuery For Designers[http://
> > > jqueryfordesigners.com/] he is quite prefect in his tutorial, and
> > > above all doesn't jump any step, and show us the code verbose before
> > > to short it! Great resource!
>
> > > This is the online example page:http://www.bonsai-studio.net/clients/lamoy/wessel04/speed/
>
> > > Thanks to anyone that can help me.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

flex-6

thanks ! i was in need for that..

Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

Ken Gregg-2
In reply to this post by caruso_g

Thanks helped a lot.

An added note. For Firefox the

        $('div.pics a').each(function() {
                $(this).css({left: '50%', marginLeft: -$(this).width()/
2});
        });

needs to happen before you start the cycle plugin. Otherwise for some
reason only the first photo is centered.

On Mar 14, 8:56 am, caruso_g <[hidden email]> wrote:

> Hi Rick,
> thanks a lot for your reply.
> The problem is that auto margins don't work since the elements are
> absolute positioned.
> The absolute positioning is necessary to let elements be one on the
> other one when animating.
>
> The good new is that I found the solution.
> I know that for all the devs out there is stupid but to me it took
> half day of work and attempts... :P
>
> Here it is my solution:
>
>         $('div.pics a').each(function() {
>                 $(this).css({left: '50%', marginLeft: -$(this).width()/2});
>         });
>
> If someone wants to comment it, or if it could be improved in any way,
> I would love to read your posts.
>
> Thank you all again.
>
> On Mar 14, 2:24 pm, Rick <[hidden email]> wrote:
>
> > Well you can try using:
> > margin-left:auto;
> > margin-right auto;
> > this does not work in msie, but in msie you can do a expression
> > left:50%
> > elm.style.setExpression("marginLeft","-"+this.parentNode.offsetHeight/
> > 2")
>
> > On 14 mrt, 12:57, caruso_g <[hidden email]> wrote:
>
> > > May anyone help me, please?
> > > Mike...?
>
> > > Thank you all!
>
> > > On Mar 13, 10:49 pm, caruso_g <[hidden email]> wrote:
>
> > > > Hi all guys,
> > > > I have a problem with the fantastic Cycle plugin.
> > > > I have a group on images links whose I can't know their dimensions in
> > > > advance.
> > > > So the images sizes the customer will use will vary.
> > > > The Cycle plugin give the element an absolute positioning (so left 0
> > > > and top 0).
> > > > Since I need to center those images link in their container, I have
> > > > the problem to dynamically know their width to give the image link a
> > > > left position 50% and a left-margin -"the-image-size"/2 just to center
> > > > it.
> > > > Well, as you can see, I can say it in words, but sadly I am not able
> > > > to translate it in jQuery language.
> > > > Can someone help me? And above all, can try to explain me the "modus
> > > > operandi" on how to arrive to the code? I would like to learn the
> > > > "pattern" to find these kind of solutions and be able to do it myself.
> > > > Btw, thanks to Remy Sharp the author of jQuery For Designers[http://
> > > > jqueryfordesigners.com/] he is quite prefect in his tutorial, and
> > > > above all doesn't jump any step, and show us the code verbose before
> > > > to short it! Great resource!
>
> > > > This is the online example page:http://www.bonsai-studio.net/clients/lamoy/wessel04/speed/
>
> > > > Thanks to anyone that can help me.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

Ken Gregg-2

Another follow up. I ran into cases where the first few photos were
centered fine but the later ones were not. When you refreshed the page
they were all centered.

If the code is run in jquery ready() the photos may not all be loaded
yet. Fix for this is to make sure they have width and height tags.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

cherry.austin@gmail.com

Cycle needs all of the images to be in the DOM - but M. Alsup made an
'add images' option to load images after Cycle has set itself up. I
couldn't get it to work right, but I think it was my fault for trying
to be clever ;)

Thread in this group here: http://tinyurl.com/6s2e2s . It has a link
to Mike's 'add' page :)
Cherry

On Apr 24, 8:56 pm, Ken Gregg <[hidden email]> wrote:
> Another follow up. I ran into cases where the first few photos were
> centered fine but the later ones were not. When you refreshed the page
> they were all centered.
>
> If the code is run in jquery ready() the photos may not all be loaded
> yet. Fix for this is to make sure they have width and height tags.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

jtnix
Thanks for this thread - I was looking for a way to center images in the container using malsup's brilliant cycle plugin, and these were the answers I was looking for.

FYI, I ended up doing the following to keep things simple - using the 'before' callback option of cycle:

before: function() {
        $(this).css({left: '50%', marginLeft: -$(this).width()/2});
        $(this).css({top: '50%', marginTop: -$(this).height()/2});
}

this will center the img on both axes when it's ready in the DOM, and keeps the code at a minimum.

also, this doesn't work so well if you are cycling an unordered list of elements with the img tags embedded in li's.  

Cheers,

  Jt


cherry.austin@gmail.com wrote
Cycle needs all of the images to be in the DOM - but M. Alsup made an
'add images' option to load images after Cycle has set itself up. I
couldn't get it to work right, but I think it was my fault for trying
to be clever ;)

Thread in this group here: http://tinyurl.com/6s2e2s . It has a link
to Mike's 'add' page :)
Cherry

On Apr 24, 8:56 pm, Ken Gregg <ken.gr...@rwre.com> wrote:
> Another follow up. I ran into cases where the first few photos were
> centered fine but the later ones were not. When you refreshed the page
> they were all centered.
>
> If the code is run in jquery ready() the photos may not all be loaded
> yet. Fix for this is to make sure they have width and height tags.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78
Very useful article but have you guys checked to see if it works in IE7 or IE6 - dont work there for me. just stacks the images there.

also how and where to put in your codes if i have the slides in <div class="slideshow" id="jQuerySlideshow"> and my script is as follows:

$(function() {
        $('#jQuerySlideshow').cycle({
                fx:    'fade',
                speed:  1000
         });
});

Hoping for help - i'm very new to this:)

illuminati78
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

malsup

> also how and where to put in your codes if i have the slides in <div
> class="slideshow" id="jQuerySlideshow"> and my script is as follows:
>
> $(function() {
>         $('#jQuerySlideshow').cycle({
>                 fx:    'fade',
>                 speed:  1000
>          });
>
> });

I don't understand the question.  Is the above code not working?  Are
jQuery and Cycle loaded prior to that code?
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78
Ok - I got the centering thing working on FF Opera and IE7 - not tested in IE6 yet - but now i have another problem - the slideshow dont work when using with Lightbox2 - i made a test page - anyone have an idea on how to fix this? test
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

malsup

> Ok - I got the centering thing working on FF Opera and IE7 - not tested in
> IE6 yet - but now i have another problem - the slideshow dont work when
> using with Lightbox2 - i made a test page - anyone have an idea on how to
> fix this?  http://test.ywn.no/jQuery/test

Looks to me like the slideshow is working but the Lightbox is not.
The Lightbox runs on Prototype and since you're loading jQuery after
prototype you need to use the $.noConflict().

http://docs.jquery.com/Core/jQuery.noConflict
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78
I'm sorry but where would i put the: $.noConflict() - and is that all it has to say/type where it should be? - as i said I'm not good at this, in wich script and where?
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78

illuminati78 wrote
I'm sorry but where would i put the: $.noConflict() - and is that all it has to say/type where it should be? - as i said I'm not good at this, in wich script and where?
I've put this script in the top after all other scripts have loaded:
<script> jQuery.noConflict(); // Put all your code in your document ready area jQuery(document).ready(function($){ // Do jQuery stuff using $ $("div").hide(); }); // Use Prototype with $(...), etc. $('album').hide(); </script>what would the div in $("div").hide(); be for me?
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

malsup

> > I'm sorry but where would i put the: $.noConflict() - and is that all it
> > has to say/type where it should be? - as i said I'm not good at this, in
> > wich script and where?

In your case your custom jQuery code is all in an external script,
slideshow.js.  In that file you can simply replace all the references
to $ with jQuery.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78

malsup wrote
> > I'm sorry but where would i put the: $.noConflict() - and is that all it
> > has to say/type where it should be? - as i said I'm not good at this, in
> > wich script and where?

In your case your custom jQuery code is all in an external script,
slideshow.js.  In that file you can simply replace all the references
to $ with jQuery.
i changed them all but still did not help - the slideshow started working but the lightbox stopped working
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

illuminati78

illuminati78 wrote
malsup wrote
> > I'm sorry but where would i put the: $.noConflict() - and is that all it
> > has to say/type where it should be? - as i said I'm not good at this, in
> > wich script and where?

In your case your custom jQuery code is all in an external script,
slideshow.js.  In that file you can simply replace all the references
to $ with jQuery.
i changed them all but still did not help - the slideshow started working but the lightbox stopped working
It WORKS:) :) :) - thanks - i changed only some of them - so now both of them works great in all browsers
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

loworbit
This post was updated on .
In reply to this post by jtnix
Hi folks… I am using the Cycle plugin with captions, http://jquery.malsup.com/cycle/caption.html. I need to center images of different widths and heights. But ran into the same problem as others with the plugin's use of absolute positioning top:0; left:0;. I am trying to employ jtnix's solution…do have this right?

$(function() {
    $('#slideshow').cycle({
        fx:       'fade',
        timeout:   2000,
        before: function() {
        $(this).css({left: '50%', marginLeft: -$(this).width()/2});
        $(this).css({top: '50%', marginTop: -$(this).height()/2});
}
        after:     function() {
            $('#caption').html(this.alt);
        }
    });
});




jtnix wrote
Thanks for this thread - I was looking for a way to center images in the container using malsup's brilliant cycle plugin, and these were the answers I was looking for.

FYI, I ended up doing the following to keep things simple - using the 'before' callback option of cycle:

before: function() {
        $(this).css({left: '50%', marginLeft: -$(this).width()/2});
        $(this).css({top: '50%', marginTop: -$(this).height()/2});
}

this will center the img on both axes when it's ready in the DOM, and keeps the code at a minimum.

also, this doesn't work so well if you are cycling an unordered list of elements with the img tags embedded in li's.  

Cheers,

  Jt


cherry.austin@gmail.com wrote
Cycle needs all of the images to be in the DOM - but M. Alsup made an
'add images' option to load images after Cycle has set itself up. I
couldn't get it to work right, but I think it was my fault for trying
to be clever ;)

Thread in this group here: http://tinyurl.com/6s2e2s . It has a link
to Mike's 'add' page :)
Cherry

On Apr 24, 8:56 pm, Ken Gregg <ken.gr...@rwre.com> wrote:
> Another follow up. I ran into cases where the first few photos were
> centered fine but the later ones were not. When you refreshed the page
> they were all centered.
>
> If the code is run in jquery ready() the photos may not all be loaded
> yet. Fix for this is to make sure they have width and height tags.
Reply | Threaded
Open this post in threaded view
|

Re: Cycle plugin an absolute positioning

Phynios
Hi Guys,

Great thread, helped me a lot.  Still one issue though, I'm currently using:

<script type="text/javascript"> $(document).ready(function(){ $('#slideshow1').cycle({ fx: 'fade', timeout: 4000, speed: 1000, before: function() { $(this).css({left: '50%', marginLeft: -$(this).width()/2}); $(this).css({top: '50%', marginTop: -$(this).height()/2}); } }); }); </script> 
But for some reason the first image is always off center, i.e. as though marginLeft and marginTop = 0, but I'm not sure how to change this as I only want any changes to affect the first slide.

Any thoughts?
12