pokaz slajdów w jQuery ze zmienną szerokością zdjęcia Opcje

[andrzejlechniak]

Mam taką sprawę. Mam stronę, na której jest pokazy slajdów typu 'fade' w jQuery. Problem jest taki, że strona nie dopasowuje się do wysokości zdjęcia, a te muszą mieć określoną wysokość. Pytanie moje jest takie: jak ustawić kod, aby pokaz zdjęć automatycznie pokazywał zdjęcia w naturalnej wysokości zdjęcia a nie w określonej w kodzie, tzn. jeśli jedno zdjęcie ma wysokość 200px a drugie ma wysokość 250px, to aby strona się automatycznie rozszerzała z 200px do formatu 250px.

To kod wyświetlający zdjęcia:

[PHP] pobierz, plaintext 
<div class="pokaz_slajdow">
	<div id="s1" class="pics">
	   <?php
		$dir = 'obrazki';
		$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
		$files = scandir($dir);
		$i = 0;
		foreach($files AS $file)  
			{ 
				$fileinfo = pathinfo($file); 
					if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))  
						{
							$i++; 
							if ($i == 1) echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />'; 
							else echo '<img src="'.$dir.'/'.$file.'" alt=""/><br />'; 
						} 	
			}
	   ?>
	</div>
</div>
[PHP] pobierz, plaintext 

Dodam, że zdjęcia nie przełączają się z zadeklarowaną szybkością, co też jest niemiłym problemem, bo w pewnym momencie widać białą stronę i nie wiadomo wtedy, czy wszystko działa czy nie.

Wyświetlanie zdjęć:

[PHP] pobierz, plaintext 
<script type="text/javascript">
  $('#s1').cycle({
	 fx: 'fade',
	 random: 1,
	 delay: -4000,
	 width: 400
  }); 
  </script>
[PHP] pobierz, plaintext 

To kod CSS odpowiadający za wyświetlanie zdjęć:

[HTML] pobierz, plaintext 
.pics {
   width: 400px;/* wartości te powinny być conajmniej takie jak rozmiary zdjęć */
   /* szerokość elementu HTML gdzie osadzone są zdjęcia */
 
}
 
.pics img {
   padding: 5px;
   border: 1px solid #aaaaaa;
   /* rozmiary zdjęć */
   width: 400px; /* szerokość wyświetlanych zdjęć */
   height: 250px;
 
}
 
div.pokaz_slajdow {
	width: 700px;
	height: 150px;
	text-align: center;
	margin-left: 120px;
 
	margin-top: -5px;
}
[HTML] pobierz, plaintext