images show before jquery and cycle plugin work their magic

[thoraddict]

Hi,
I am looking for assistance with a loading problem and my apologies if
this is beyond the scope of this group.

I am running the lastest jQuery and Jquery cycle plugin. I haven't
done any customization per se only trying to get the two components to
work.  I am at the point where things "seem" to work, however when the
page loads all 4 images in my DIV span down the page and then merge
into one at the end of the page load.

I've seen other implementation of these 2 components but the images
don't flash first and then merge.

Do you believe I need to create another function or put some more
logic into my page to have it load correctly.  My goal would be to
have everything seemlessly loaded from the start.  I've explored the
document.ready function and believe I have it in the correct location
of my site.  No matter what though other parts of the page load
first....

I realize there are a lot of unknown variables but maybe someone has
an idea?

My site is clippervacations.com and I am going to change out the
current homepage banners with jquery functionality.  Nothing is LIVE
right now, but perhaps someone can get an idea.

Thanks,
Thor

[Karl Swedberg-2]

If you have large images, they would take longer to load. No way around that. One thing you can do to avoid having the images "span down the page" is to add a style declaration for them in your stylesheet: position:absolute; I believe the cycle plugin sets the cycled elements to position:absolute as a safeguard in case it hasn't been done in the css already, but you should really do that yourself in the stylesheet. Also, make sure you set the container element to position: relative (if it's position: absolute, you can keep it that way) and set its overflow property hidden and give it explicit height and width. You still might see images loading one after the other, but at least they'll be overlapping, confined within the same space as dictated by the height and width of the container element. There are ways to get around this last issue, too, but first see how my suggestions so far work for you.

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Oct 20, 2009, at 7:38 PM, thor wrote:

Hi,
I am looking for assistance with a loading problem and my apologies if
this is beyond the scope of this group.

I am running the lastest jQuery and Jquery cycle plugin. I haven't
done any customization per se only trying to get the two components to
work.  I am at the point where things "seem" to work, however when the
page loads all 4 images in my DIV span down the page and then merge
into one at the end of the page load.

I've seen other implementation of these 2 components but the images
don't flash first and then merge.

Do you believe I need to create another function or put some more
logic into my page to have it load correctly.  My goal would be to
have everything seemlessly loaded from the start.  I've explored the
document.ready function and believe I have it in the correct location
of my site.  No matter what though other parts of the page load
first....

I realize there are a lot of unknown variables but maybe someone has
an idea?

My site is clippervacations.com and I am going to change out the
current homepage banners with jquery functionality.  Nothing is LIVE
right now, but perhaps someone can get an idea.

Thanks,
Thor

[Sam-188]

I am having the same issue that Thor describes, and although I have
tried the fixes suggested by Karl I have been unable to fix the issue.

Maybe there is a different way to achieve the goal? Perhaps there is a
way to pre-load the entire jcarousel container and then place it in
the page rather then have it build the carousel as it loads?

Cheers,

Sam

On Oct 20, 6:35 pm, Karl Swedberg <k...@...> wrote:

> If you have large images, they would take longer to load. No way  
> around that. One thing you can do to avoid having the images "span  
> down the page" is to add a style declaration for them in your  
> stylesheet: position:absolute; I believe the cycle plugin sets the  
> cycled elements to position:absolute as a safeguard in case it hasn't  
> been done in the css already, but you should really do that yourself  
> in the stylesheet. Also, make sure you set the container element to  
> position: relative (if it's position: absolute, you can keep it that  
> way) and set its overflow property hidden and give it explicit height  
> and width. You still might see images loading one after the other, but  
> at least they'll be overlapping, confined within the same space as  
> dictated by the height and width of the container element. There are  
> ways to get around this last issue, too, but first see how my  
> suggestions so far work for you.
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Oct 20, 2009, at 7:38 PM, thor wrote:
>
>
>
> > Hi,
> > I am looking for assistance with a loading problem and my apologies if
> > this is beyond the scope of this group.
>
> > I am running the lastest jQuery and Jquery cycle plugin. I haven't
> > done any customization per se only trying to get the two components to
> > work.  I am at the point where things "seem" to work, however when the
> > page loads all 4 images in my DIV span down the page and then merge
> > into one at the end of the page load.
>
> > I've seen other implementation of these 2 components but the images
> > don't flash first and then merge.
>
> > Do you believe I need to create another function or put some more
> > logic into my page to have it load correctly.  My goal would be to
> > have everything seemlessly loaded from the start.  I've explored the
> > document.ready function and believe I have it in the correct location
> > of my site.  No matter what though other parts of the page load
> > first....
>
> > I realize there are a lot of unknown variables but maybe someone has
> > an idea?
>
> > My site is clippervacations.com and I am going to change out the
> > current homepage banners with jquery functionality.  Nothing is LIVE
> > right now, but perhaps someone can get an idea.
>
> > Thanks,
> > Thor

Hi Thor,

I've had this issue before. As Karl suggests, I was able to fix it by
giving the parent element (the one calling the cycle plugin) a fixed
height (the height of the images you're cycling) and an overflow of
hidden in the CSS. If the slides are of different heights, set the
height to the height of the first slide.

Marcus

On Oct 20, 7:38 pm, thor <bry...@...> wrote:

> Hi,
> I am looking for assistance with a loading problem and my apologies if
> this is beyond the scope of this group.
>
> I am running the lastest jQuery and Jquery cycle plugin. I haven't
> done any customization per se only trying to get the two components to
> work.  I am at the point where things "seem" to work, however when the
> page loads all 4 images in my DIV span down the page and then merge
> into one at the end of the page load.
>
> I've seen other implementation of these 2 components but the images
> don't flash first and then merge.
>
> Do you believe I need to create another function or put some more
> logic into my page to have it load correctly.  My goal would be to
> have everything seemlessly loaded from the start.  I've explored the
> document.ready function and believe I have it in the correct location
> of my site.  No matter what though other parts of the page load
> first....
>
> I realize there are a lot of unknown variables but maybe someone has
> an idea?
>
> My site is clippervacations.com and I am going to change out the
> current homepage banners with jquery functionality.  Nothing is LIVE
> right now, but perhaps someone can get an idea.
>
> Thanks,
> Thor

[malsup]

> I've had this issue before. As Karl suggests, I was able to fix it by
> giving the parent element (the one calling the cycle plugin) a fixed
> height (the height of the images you're cycling) and an overflow of
> hidden in the CSS. If the slides are of different heights, set the
> height to the height of the first slide.

Another approach is to have a CSS rule that hides all but the first
slide.

[Sam-188]

I'm not entirely sure that some of these fixes apply to my situation
as I'm not using cycle plugin.

I am having the same issue as the original poster however, please see
for yourself.

http://samgabellshoots.com/

Any pointers on how to fix or at least 'hide' the issue until after
load would be greatly appreciated :)

On Oct 21, 4:40 pm, Mike Alsup <mal...@...> wrote:
> > I've had this issue before. As Karl suggests, I was able to fix it by
> > giving the parent element (the one calling the cycle plugin) a fixed
> > height (the height of the images you're cycling) and an overflow of
> > hidden in the CSS. If the slides are of different heights, set the
> > height to the height of the first slide.
>
> Another approach is to have a CSS rule that hides all but the first
> slide.

[Charlie Tomlinson]

try giving the carousel UL a huge width , say 10,000 px, and carousel wrapper set height, width and overflow : hidden

this is done by the script also but until script fully fires your css should make up for it

Sam wrote:

I'm not entirely sure that some of these fixes apply to my situation
as I'm not using cycle plugin.

I am having the same issue as the original poster however, please see
for yourself.

http://samgabellshoots.com/

Any pointers on how to fix or at least 'hide' the issue until after
load would be greatly appreciated :)

On Oct 21, 4:40 pm, Mike Alsup mal...@... wrote:
  

I've had this issue before. As Karl suggests, I was able to fix it by
giving the parent element (the one calling the cycle plugin) a fixed
height (the height of the images you're cycling) and an overflow of
hidden in the CSS. If the slides are of different heights, set the
height to the height of the first slide.
      

Another approach is to have a CSS rule that hides all but the first
slide.
    

[Sam-188]

Charlie,

Thanks for the reply, unfortunately the changes you suggested do not
seem to make a difference. Please refer to my previous link to see the
same issue happening with the changes applied.


On Oct 22, 7:21 am, Charlie <charlie...@...> wrote:
> try giving the carousel UL a huge width , say 10,000 px, and carousel wrapper set height, width and overflow : hidden
> this is done by the script also but until script fully fires your css should make up for it
> Sam wrote:I'm not entirely sure that some of these fixes apply to my situation as I'm not using cycle plugin. I am having the same issue as the original poster however, please see for yourself.http://samgabellshoots.com/Any pointers on how to fix or at least 'hide' the issue until after load would be greatly appreciated :) On Oct 21, 4:40 pm, Mike Alsup<mal...@...>wrote:I've had this issue before. As Karl suggests, I was able to fix it by giving the parent element (the one calling the cycle plugin) a fixed height (the height of the images you're cycling) and an overflow of hidden in the CSS. If the slides are of different heights, set the height to the height of the first slide.Another approach is to have a CSS rule that hides all but the first slide.

[joe-271]

Thor I am having the exact same problem - have you found a solution??
can someone explain overflow and overflow of hidden?
poundcommapound@...  your message is cryptic - can you
elaborate.  I am not calling the plug-in from a parent element,
unless <head> would be the parent element?

Joe

On Oct 20, 4:38 pm, thor <bry...@...> wrote:

> Hi,
> I am looking for assistance with a loading problem and my apologies if
> this is beyond the scope of this group.
>
> I am running the lastestjQueryandJquerycycle plugin. I haven't
> done any customization per se only trying to get the two components to
> work.  I am at the point where things "seem" to work, however when the
> page loads all 4 images in my DIV span down the page and then merge
> into one at the end of the page load.
>
> I've seen other implementation of these 2 components but the images
> don't flash first and then merge.
>
> Do you believe I need to create another function or put some more
> logic into my page to have it load correctly.  My goal would be to
> have everything seemlessly loaded from the start.  I've explored the
> document.ready function and believe I have it in the correct location
> of my site.  No matter what though other parts of the page load
> first....
>
> I realize there are a lot of unknown variables but maybe someone has
> an idea?
>
> My site is clippervacations.com and I am going to change out the
> current homepage banners withjqueryfunctionality.  Nothing is LIVE
> right now, but perhaps someone can get an idea.
>
> Thanks,
> Thor

[thoraddict]

Hi,
Sorry for the late response.  For some reason I thought I had this
thread tagged when someone replied.

Anyways, good news.  My problem is resolved per your suggestion.  I
changed the container <div> to position:relative, set the dimensions,
and set overflow:hiddne and whoa-la -- everything looks great

Thanks for the help,
Thor

On Oct 20, 5:35 pm, Karl Swedberg <k...@...> wrote:

> If you have large images, they would take longer to load. No way  
> around that. One thing you can do to avoid having the images "span  
> down the page" is to add a style declaration for them in your  
> stylesheet: position:absolute; I believe the cycle plugin sets the  
> cycled elements to position:absolute as a safeguard in case it hasn't  
> been done in the css already, but you should really do that yourself  
> in the stylesheet. Also, make sure you set the container element to  
> position: relative (if it's position: absolute, you can keep it that  
> way) and set its overflow property hidden and give it explicit height  
> and width. You still might see images loading one after the other, but  
> at least they'll be overlapping, confined within the same space as  
> dictated by the height and width of the container element. There are  
> ways to get around this last issue, too, but first see how my  
> suggestions so far work for you.
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Oct 20, 2009, at 7:38 PM, thor wrote:
>
>
>
> > Hi,
> > I am looking for assistance with a loading problem and my apologies if
> > this is beyond the scope of this group.
>
> > I am running the lastest jQuery and Jquery cycle plugin. I haven't
> > done any customization per se only trying to get the two components to
> > work.  I am at the point where things "seem" to work, however when the
> > page loads all 4 images in my DIV span down the page and then merge
> > into one at the end of the page load.
>
> > I've seen other implementation of these 2 components but the images
> > don't flash first and then merge.
>
> > Do you believe I need to create another function or put some more
> > logic into my page to have it load correctly.  My goal would be to
> > have everything seemlessly loaded from the start.  I've explored the
> > document.ready function and believe I have it in the correct location
> > of my site.  No matter what though other parts of the page load
> > first....
>
> > I realize there are a lot of unknown variables but maybe someone has
> > an idea?
>
> > My site is clippervacations.com and I am going to change out the
> > current homepage banners with jquery functionality.  Nothing is LIVE
> > right now, but perhaps someone can get an idea.
>
> > Thanks,
> > Thor

[thoraddict]

Hi, Yes I found a solution.  I changed the <div> that holds the
images.  The position is now "relative" and the overflow is set to
hidden.  Looks great.

hope that helps.

On Oct 23, 8:26 pm, joe <joel...@...> wrote:

> Thor I am having the exact same problem - have you found a solution??
> can someone explain overflow and overflow of hidden?
> poundcommapo...@...  your message is cryptic - can you
> elaborate.  I am not calling the plug-in from a parent element,
> unless <head> would be the parent element?
>
> Joe
>
> On Oct 20, 4:38 pm, thor <bry...@...> wrote:
>
> > Hi,
> > I am looking for assistance with a loading problem and my apologies if
> > this is beyond the scope of this group.
>
> > I am running the lastestjQueryandJquerycycle plugin. I haven't
> > done any customization per se only trying to get the two components to
> > work.  I am at the point where things "seem" to work, however when the
> > page loads all 4imagesin my DIV span down the page and then merge
> > into one at the end of the pageload.
>
> > I've seen other implementation of these 2 components but theimages
> > don't flash first and then merge.
>
> > Do you believe I need to create another function or put some more
> > logic into my page to have itloadcorrectly.  My goal would be to
> > have everything seemlessly loaded from the start.  I've explored the
> > document.ready function and believe I have it in the correct location
> > of my site.  No matter what though other parts of the pageload
> > first....
>
> > I realize there are a lot of unknown variables but maybe someone has
> > an idea?
>
> > My site is clippervacations.com and I am going to change out the
> > current homepage banners withjqueryfunctionality.  Nothing is LIVE
> > right now, but perhaps someone can get an idea.
>
> > Thanks,
> > Thor