Slidepanel showing all images on load

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
6/7/2012 12:02:19 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Slidepanel showing all images on load

I'm using a slidepanel as described here http://www.mojoportal.com/the-slidepanel-user-control.aspx in my layout.master

However when the page loads, all of the images display for a fraction of a second, which is very disruptive. I've seen a similar effect when using the slidepanel in a HTML Content feature too.

Any way of fixing this.  The web site (in prep!!) is http://www.nhe.no-ip.org/home

6/7/2012 3:21:16 PM
Gravatar
Total Posts 18439

Re: Slidepanel showing all images on load

The SlidePanel is kind of a convenience control. It convenient because it will make a slide show out of whatever top level elements are inside the panel. There is a tradeoff between convenience and optimization, an optimal solution for a slide show would not be as convenient and not as easy to use and would require custom javascript.

The issue is that the javascript won't run until after everything in the page is loaded, and since the javascript is what hides the images and turns them into slides then you can briefly see the images before that happens. So if the page has a lot of images it has to load all of those before the javascript for the slide show ever runs. The only optimizations for SlidePanel are to first optimize the images themselves so that they are as small as possible so they load faster, and use fewer of them to reduce the number of http requests needed to load the whole page.

For a custom solution there are ways of loading the images directly from javascript rather than embedding them as markup with <img src=... which means they have to load first. But again the downside of that is you have to write more of the javascript yourself to accomplish a more optimal solution. You can always implement your own custom solution as a UserControll and then embed that inside layout.master instead of using SlidePanel.

Hope that helps,

Joe

6/7/2012 4:59:42 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Slidepanel showing all images on load

Hi Crispin, Slidepanel is using JQuery Cycle behind the scenes. On their FAQ page they illustrate a CSS method for hiding all but the first image, which is supposed to prevent the flash of other photos showing. I've meant to try this myself but haven't had a chance, so if it works for you, please let us know.

Jamie

 

6/8/2012 2:59:15 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: Slidepanel showing all images on load

Thanks Joe and Jamie

After a bit of experimentation I've got this to work. I've change my layout.master markup to this:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer" Sync=True Random=True Speed=3000 TransitionInterval=10000>
  <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitemfirst" AlternateText="Holme beach" />
  <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText="Happisburgh lighthouse" />
  <portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText="Cromer pier" />
  <portal:SkinFolderImage ID="imgs4" runat="server" ImageFileName="head4.jpg" CssClass="rotateitem" AlternateText="Happisburgh church" />
  <portal:SkinFolderImage ID="imgs5" runat="server" ImageFileName="head5.jpg" CssClass="rotateitem" AlternateText="Burgh Castle Roman fort" />
  <portal:SkinFolderImage ID="imgs6" runat="server" ImageFileName="head6.jpg" CssClass="rotateitem" AlternateText="Berney Arms Mill" />
  </portal:SlidePanel>

then added these two lines to style.css:

.rotatecontainer img { display: none; }
.rotatecontainer img.rotateitemfirst { display: block;}

And on loading the pages I don't get the bad flicker.

It would be great if this could be implemented as standard on the html content slideshows...?

6/11/2012 7:30:26 AM
Gravatar
Total Posts 18439

Re: Slidepanel showing all images on load

I don't see how we can build that into the html content feature. We have no control over the content the user enters there and can't ensure they enter any specific css classes in the content.

I think it would the best we could do is create a tutorial about how to do this so its easy to find.

6/11/2012 1:12:29 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: Slidepanel showing all images on load

I agree Joe.  For a while I was thinking the slideshow feature was adding/changing css classes on the content, but of course it's not.

You must sign in to post in the forums. This thread is closed to new posts.