1 reply [Last post]
sttaffy
Offline
newbie
Philadelphia
Last seen: 8 years 11 weeks ago
Philadelphia
Timezone: GMT-4
Joined: 2012-07-05
Posts: 1
Points: 2

On the front page of my art school's website we have a slideshow. When the page is first loaded or refreshed, the slideshow is where it is supposed to be. When it fully loads it jumps a little bit, up and to the left. I would like the slideshow to stay where it is initially, and I can't figure out why it would jump like that.

http://www.cambridgeststudios.com
*refresh the page to make it repeat.

I have a little bit of amateur css know-how, and I can usually figure things out by inspecting elements on the page and muddling through the different html and css files with lots of trial and error, but this has me stumped.

It seems like the browser is initially following one style sheet with the correct padding, then switching to another with no padding but the same container size. I don't know why that would happen, and I can't track it down.

The site is built with wordpress, using the platform theme, and the slideshow is done using the nextgengallery plugin.

I would greatly appreciate any help!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

When the page first loads the

When the page first loads the div's containing the slideshow are positioned relative in the stylesheet. The image has no position values, it is just static.
There's also 15px of padding all round.

Then the javascript is positioning them absolutely.

Markup Before JS:

<div id="ngg-slideshow-22-97-1" class="ngg-slideshow" style="height:480px;width:320px;">
<div id="ngg-slideshow-22-97-1-loader" class="ngg-slideshow-loader" style="height:480px;width:320px;">
<img src="/images/loader.gif" alt="" />
</div></div>

Markup After JS:

<div id="ngg-slideshow-22-97-1" class="ngg-slideshow" style="height:480px;width:320px;">
<img src="/cunningham_cast_drawing.jpg" style="height: 480px; width: 320px; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; "><img src="/margaretcrop1200.jpg" style="display: none; height: 429px; width: 320px; position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; "><img src="/jeremy-hand-cast-wip-04-1200.jpg" style="display: block; height: 480px; width: 194px; position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 1; "><img src="final_cast.jpg" style="height: 427px; width: 320px; position: absolute; top: 0px; left: 0px; opacity: 0; display: none; "><img src="/margaret21200.jpg" style="height: 450px; width: 194px; position: absolute; top: 0px; left: 0px; opacity: 0; display: none; "></div>

I think you should position everything to do with the slideshow absolute and remove the padding from to and left.

It should be easier to have consistent positioning when the JavaScript kicks in.