Jquery Cycle2 plugin - Positionierung mit CSS

[doofi]

Hallo Forum ,

ich bin grad am verzweifeln.
Ich möchte auf einer Homepage Bilder unterschiedlicher Größe, die in einem bestimmten Ordner liegen, mit dem jquery-cycle2 plugin als manuelle slideshow anzeigen.
Der Bereich, in dem die Bilder zur Ansicht kommen sollen, wird erst sichtbar, wenn ein Button geklickt wird:

Hier der Code, der ausgegeben werden soll, wenn der Button geklickt wird...

//----------------------------------------- Highlight ----------------------------------------->        
$var_hot = "";
$higharray=array(); //array für die Pfade zur Bilddatei
$abfrage = mysql_query("SELECT HIGHLIGHT FROM aktivitaeten WHERE DATE(DATUM) >= DATE(NOW()) AND HIGHLIGHT <> '' ORDER BY DATUM ASC") or die(mysql_error());
while ($row = mysql_fetch_array($abfrage))
{
    if (file_exists($row['HIGHLIGHT'])) $higharray[] = $row['HIGHLIGHT']; 
}
if (count($higharray)>0)
{

$var_hot = '
<img src="images/site/links.png" border="0" id="prev">&nbsp;Hier gibts Infos zu unsere nächsten großen Highlights!&nbsp;<img src="images/site/rechts.png" border="0" id="next"><div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-timeout="0" data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-auto-height="container">
';
$hotfile = $higharray[0];
for ($i=0; $i<count($higharray);$i++)
{
   $var_hot .= '<img src="'.$higharray[$i].'" border="0">';
}
$var_hot .= '</div>';
}
else
{
echo '<div align="center">Im Moment gibts nix interessantes!</div>';
}
//----------------------------------------- Ende Highlight 

... und hier die eigentliche Ausgabe der gefüllten Variable $var_hot auf der Seite..

...
<tr id="box3" style="display: none;">
   <td width="75%" align="center" colspan="5"><?php echo $var_hot; ?></td>
</tr>
....

Mein Problem ist nun, dass beim ersten Aufruf das 1. Bild über dem auf der Seite schon bestehenden Inhalt angezeigt wird.
Betätige ich dann die Prev Next Buttons, läuft alles, wie es soll, der Container wird automatisch je nach Bildgröße verkleinert / vergrössert, auch beim 1. Bild.

Nur beim 1. Aufruf des Buttons bekomme ich eine überlagerung...

hier die dazugehörige css-Datei:

.cycle-slideshow
{
    width: 80%;
}
 
.cycle-slideshow img
{
    width: 100%; height: auto;
} 

Da ich das alles nicht so gut beschreiben kann, hier mal ein link, wo man sich das Problem live anschauen kann...

http://dgwagenrad.bplaced.net, dort den Button Highlight klicken...

Und hier noch ein vorher (also effekt beim 1. Aufruf) Bild


und ein nachher (nach prev next button) bild


Ich wäre seehr froh, wenn mir jemand einen tipp geben könnte..

lg Micha

[Gast]

ich versteh gar nichts:
dich stören die schwarzen balken? die sind teil des bildes.

[der_robert]

Wenn man das erste mal auf den Highlight Button klick dann hat das Element (ganz am ende):

<div class="cycle-slideshow" data-cycle-auto-height="container" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-timeout="0" data-cycle-fx="fadeout" style="position: relative; height: 0px;">

eine Höhe von 0px, deswegen rutscht die nachfolgende Überschrift nach oben.

Wenn man nun zum Bild zwei und zurück wechselt hat das Element die korrekte höhe:

<div class="cycle-slideshow" data-cycle-auto-height="container" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-timeout="0" data-cycle-fx="fadeout" style="position: relative; height: 373px;">

Setzt man die höhe manuel (firebug) auf 373 nach dem ersten klick dann ist alles schick.

[doofi]

hm... ja hab ich jetzt auch gesehen, aber wo kommt die höhe 0 her? die definiere ich ja nirgends... Kann das daher kommen, dass das Element vorher ausgeblendet ist? Und 373px ist ja nur die Höhe des zufälligerweise 1. Bildes. Kann man das irgendwie abfangen, dass er immer automatisch die Höhe anpasst???

Danke für die Antwort! LG Micha