joeblack9988 / slideshow

Automatically exported from code.google.com/p/slideshow
0 stars 0 forks source link

Only Controller visible on first load #113

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. Cache is empty
2. Firefox
3. Javascript from http://www.multimap.com/openapidocs/1.2/demos/index.htm

What is the expected output? What do you see instead?

Instead of the slideshow I see blank. Hovering reveals the controller.
Loading another website and pressing "back" button lets the slideshow
start. Example http://photos.axelebert.org/slideshow-kailash.html

What version of the product are you using? On what operating system and
browser?
Slideshow and Mootools 2r147 (latest)
WinXP-SP3
Firefox 3.5.2

Please provide any additional information below.
Without the multimap javascript I have no problem.
Could it be a "time"-issue?
To specify width and height of first image (as suggested in another thread
does not help)
To state "no resize" does not help, pictures all match same spezified size
anyhow.

Original issue reported on code.google.com by axelanshen@gmail.com on 31 Aug 2009 at 7:58

GoogleCodeExporter commented 8 years ago
I was not precise on the initial view: I see the controller like a fix picture 
on
white background. Later when hovering the mouse the controller appears/ 
disappears.

Axel

Original comment by axelanshen@gmail.com on 31 Aug 2009 at 9:09

GoogleCodeExporter commented 8 years ago
When the slideshow is running - just pressing the reload button in Firefox 
browser
leads to the same behavior.

Original comment by axelanshen@gmail.com on 4 Sep 2009 at 9:15

GoogleCodeExporter commented 8 years ago
This is using firebug result after pressing reload button. Image style display 
is
suddenly "none"

<div id="show" class="slideshow" style="display: block; position: relative; 
z-index: 0;">
<div class="slideshow-images" style="overflow: hidden; display: block; height: 
450px;
position: relative; width: 600px;">
<a>
<img height="450px" width="600px" alt="Baryang_Kyakyaru_01.jpg"
src="album-kailash/Baryang_Kyakyaru_01.jpg" style="display: none; position: 
absolute;
z-index: 1;"/>
</a>
<a>
<img height="450px" width="600px" alt="Baryang_Kyakyaru_01.jpg"
src="album-kailash/Baryang_Kyakyaru_01.jpg" style="display: none; position: 
absolute;
z-index: 1;"/>
</a>
</div>
<div class="slideshow-captions"/>
<div class="slideshow-controller">
<ul>
<li class="first">
<a title="First [Shift + Leftwards Arrow]"/>
</li>
<li class="prev">
<a title="Prev [Leftwards Arrow]"/>
</li>
<li class="pause">
<a title="Play / Pause [P]"/>
</li>
<li class="next">
<a title="Next [Rightwards Arrow]"/>
</li>
<li class="last">
<a title="Last [Shift + Rightwards Arrow]"/>
</li>
</ul>
</div>
</div>

Original comment by axelanshen@gmail.com on 10 Sep 2009 at 9:56

GoogleCodeExporter commented 8 years ago
When I load from cache this is with correct display. Image style display is 
"block"

<div id="show" class="slideshow" style="display: block; position: relative; 
z-index: 0;">
<div class="slideshow-images" style="overflow: hidden; display: block; height: 
450px;
position: relative; width: 600px;">
<a title="Baryang Kyakyaru 01 - Picture 1 of 204">
<img height="450" width="600" alt="Baryang Kyakyaru 01 - Picture 1 of 204"
src="album-kailash/Baryang_Kyakyaru_01.jpg" style="display: block; position:
absolute; z-index: 10; height: 450px; visibility: visible; width: 600px; left: 
0px;
top: 0px; opacity: 1;"/>
</a>
<a title="Chiu 01 - Picture 10 of 204">
<img height="450" width="600" alt="Chiu 01 - Picture 10 of 204"
src="album-kailash/Chiu_01.jpg" style="display: block; position: absolute; 
z-index:
9; visibility: visible; opacity: 1; height: 450px; width: 600px; left: 0px; 
top: 0px;"/>
</a>
<div class="slideshow-loader" style="visibility: hidden; opacity: 0;
background-image: url(css/loader-4.png);"/>
</div>
<div class="slideshow-captions" style="height: 22px; visibility: visible; 
opacity:
0.7;">Baryang Kyakyaru 01 - Picture 1 of 204</div>
<div class="slideshow-controller" style="visibility: hidden; opacity: 0;">
<ul>
<li class="first">
</li>
<li class="prev">
</li>
<li class="pause play">
</li>
<li class="next">
</li>
<li class="last">
</li>
</ul>
</div>
<div class="slideshow-thumbnails" style="overflow: hidden;">
<ul style="left: 0px;">
<li>
</li>

...

<li>
</li>
<li>
<a href="album-kailash/Tsochen_Gertse_Axel.jpg" title="Tsochen Gertse Axel - 
Picture
204 of 204" style="background-color: rgb(255, 255, 255); visibility: visible;
opacity: 0.5;">
</a>
</li>
</ul>
</div>
</div>

Original comment by axelanshen@gmail.com on 10 Sep 2009 at 10:06

GoogleCodeExporter commented 8 years ago
On the default image you have the height and width set in pixels which is not 
valid:

<img src="album-kailash/Baryang_Kyakyaru_01.jpg" alt="Baryang_Kyakyaru_01.jpg"
width="600px" height="450px" />

Try setting it to this:

<img src="album-kailash/Baryang_Kyakyaru_01.jpg" alt="Baryang_Kyakyaru_01.jpg"
width="600" height="450" />

See if that fixes the problem.

Original comment by aeron.gl...@gmail.com on 11 Sep 2009 at 1:49

GoogleCodeExporter commented 8 years ago
Tried, but no success.

Original comment by axelanshen@gmail.com on 11 Sep 2009 at 3:46

GoogleCodeExporter commented 8 years ago
I tried the original slideshow.css but same behavior. 

What is also strange - after loading from cache the transitions work only when 
the
active thumbnail is NOT centered, for example at begin or when hovering with 
mouse on
left or right of thumbs.

Meanwhile I can confirm no problem with Firefox under SuSe Linux, and no 
problem with
IE6, and no problem at all, if Multimap javascript is disabled.

I do not understand the code well enough, but maybe you could run the "Firebug" 
addon
from Firefox to see where the unusual behavior starts? It reveals all styles 
and java
response.

Of course the bug it could be related to the Multimap javascript.

I want to use this opportunity to say thanks for your project, you can also put 
my
website http://photos.axelebert.org as reference if you like. If there is no 
solution
I will separate the map/slideshow on my websites.

Thanks and Regards
Axel

Original comment by axelanshen@gmail.com on 11 Sep 2009 at 7:54

GoogleCodeExporter commented 8 years ago
Perhaps try changing the order in which the different Javascripts are loaded?

Original comment by aeron.gl...@gmail.com on 11 Sep 2009 at 9:41

GoogleCodeExporter commented 8 years ago
I forgot to mention I already done this, both in header and in body text. It is 
no
different. I will split the content then.

Original comment by axelanshen@gmail.com on 12 Sep 2009 at 6:15