[CSS][PHP] losowe wypełnienie diva Opcje

[piotrd]

witam, mam diva o wymiarach w 960 h 180 oraz 12 obrazków (1.jpg 2.jpg ... 12.jpg) o wymiarach w 90 h 90
czy możliwe jest aby wypełnić losowo diva dwunastoma grafikami w taki sposób aby za każdym razem po załadowaniu się strony na przestrzeni całego diva rozlokować grafiki tak aby sie nie nakładały oraz występowały raz?

[peter13135]

da się. Robisz tablicę z obrazkami, mieszasz funkcją shuffle i wyświetlasz

[piotrd]

ok ale jak zmusić aby

[PHP] pobierz, plaintext 
shuffle($tablica);
echo '<img src=' . $tablica[0][0] . '>';
print_r($tablica); 
[PHP] pobierz, plaintext 

rozmieszczał obrazki w obrębie diva?

ograniczyłem diva do w 540 h 180
czyli można przedstawić 6 obrazków w poziomie i 2 w pionie

Ten post edytował piotrd 27.08.2011, 22:35:34

[sada]

[PHP] pobierz, plaintext 
for($i=0;$i<12;$i++){
$tablica[$i]=$i+1.'.jpg';
 
}
shuffle($tablica);
for($i=0;$i<12;$i++){
echo '<img src= "'. $tablica[$i] . '"/>';
}
[PHP] pobierz, plaintext 

nie wiem po co ta tablica dwuwymiarowa, nie masz tam trzymać "współrzędnych" obrazka w divie a tylko src.
Obrazki wlewasz po kolei , możesz tak bo są potasowane przed pętlą.

Ten post edytował sada 28.08.2011, 14:43:22

[piotrd]

rozwiązałem to w następujący sposób

[PHP] pobierz, plaintext 
$images = array("1_2_1.jpg", "1_3_1.jpg", "1_4_1.jpg", "1_5_1.jpg", "1_6_1.jpg", "1_7_1.jpg", "1_2_2.jpg", "1_3_2.jpg", "1_4_2.jpg", "1_5_2.jpg", "1_6_2.jpg", "1_7_2.jpg");
shuffle($images);
for($i=0;$i<12;$i++){
	echo ($i == '5') ? '<img src=' . $images[$i] . ' /><br />' : '<img src=' . $images[$i] . ' />';
}
[PHP] pobierz, plaintext 

ale nie jest to chyba optymalne rozwiązanie, nie?

[scr1pt3r]

Polecam mod, i sprawdzasz tylko czy jest 1 lub 0.

[piotrd]

zoptymalizowałem swoje rozwiązanie i teraz wygląda następująco

[PHP] pobierz, plaintext 
$images = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
shuffle($images);
for($i=0;$i<12;$i++){
	($i == '5') ? $br = '<br />' : $br = '';
	echo '<img src="' . $images[$i] . '.jpg" alt="" border="0" />'.$br;
}
[PHP] pobierz, plaintext 

no ale czy optymalizacja oprócz zmniejszenia ilości znaków w kodzie coś wniosła to nie wiem ^^

[potreb]

Nadaj float obrazkom i nie musisz kombinować z br. Jak bedziesz chcial rozszrzyc pole o nowa linie to tez dasz warunek m\i = 10?

Ten post edytował potreb 27.08.2011, 23:42:34

[scr1pt3r]

Moja chyba szybsza - http://www.codepad.org/n0oJnbK5

Ten post edytował scr1pt3r 28.08.2011, 00:10:07

[piotrd]

Nadaj float obrazkom i nie musisz kombinować z br. Jak bedziesz chcial rozszrzyc pole o nowa linie to tez dasz warunek m\i = 10?

przeszkadza mi to <br /> - powoduje widoczny odstęp między 2 wierszami obrazków.

[HTML] pobierz, plaintext 
<div id="logo">
<ul>
<li>
<div id="title"><a href="./index.php" tabindex="1"><i>text</i><span></span><strong><i>text</i></strong></a></div>
<div id="slogan">slogan</div>
</li>
<li>
<img src="templates/img/top/8.jpg" alt="" border="0" /><img src="templates/img/top/11.jpg" alt="" border="0" /><img src="templates/img/top/9.jpg" alt="" border="0" /><img src="templates/img/top/10.jpg" alt="" border="0" /><img src="templates/img/top/12.jpg" alt="" border="0" /><img src="templates/img/top/3.jpg" alt="" border="0" /><br /><img src="templates/img/top/6.jpg" alt="" border="0" /><img src="templates/img/top/4.jpg" alt="" border="0" /><img src="templates/img/top/5.jpg" alt="" border="0" /><img src="templates/img/top/1.jpg" alt="" border="0" /><img src="templates/img/top/2.jpg" alt="" border="0" /><img src="templates/img/top/7.jpg" alt="" border="0" />
</li>
</ul>
</div>
[HTML] pobierz, plaintext 

w css mam

[HTML] pobierz, plaintext 
#logo{padding:0; margin:0;} 
#logo #title{float:left;padding:0px 0px 0px;} 
#logo #title a{color:orange;font:bold 5.5em Verdana;text-transform:uppercase;text-decoration:none;position:absolute;}
#logo #title a span{color:orange;}
#logo #title a strong{color:#836b4c;} 
#logo #slogan{clear:left;margin-left:70px;margin-top:155px;padding:0px 15px;background:inherit;color:#544d3d;font:italic 15px Verdana;}
#logo ul {overflow:hidden;list-style:none;}
#logo li {float:left;}
[HTML] pobierz, plaintext 

gdzie dodać margin i padding, aby obrazki były skupione?


edit

dodałem

Kod

.thumbnail  {
float:left;
margin:0px;
}

do img i jest ok

Ten post edytował piotrd 28.08.2011, 13:05:30

[sada]

poprzedni skrypt był bez utworzenia tablicy więc jeszcze raz , skrypt sprawdziłem i nie wydaje mi się żeby można było prościej

[PHP] pobierz, plaintext 
for($i=0;$i<12;$i++){
$tablica[$i]=$i+1.'.jpg';
 
}
shuffle($tablica);
for($i=0;$i<12;$i++){
echo '<img src= "'. $tablica[$i] . '"/>';
}
[PHP] pobierz, plaintext 

[potreb]

Ja mam tak:

[CSS] pobierz, plaintext 
.gallery ul {list-style: none;	margin: 0; padding: 0;}
.gallery ul li {float: left; margin: 0; padding: 0;}
.gallery ul img {margin: 0;}
[CSS] pobierz, plaintext 

Oczywiście div gallery musi mieć jakąś tam szerokość i wysokość, ja nie mam, ale za to pokazuje mi 6 zdjęć w jednej lini, a następne przechodzą do drugiej itd.

Ten post edytował potreb 28.08.2011, 16:24:20