Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP] losowe wypełnienie diva
Forum PHP.pl > Forum > Przedszkole
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
  1. shuffle($tablica);
  2. echo '<img src=' . $tablica[0][0] . '>';
  3. print_r($tablica);
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
sada
  1. for($i=0;$i<12;$i++){
  2. $tablica[$i]=$i+1.'.jpg';
  3.  
  4. }
  5. shuffle($tablica);
  6. for($i=0;$i<12;$i++){
  7. echo '<img src= "'. $tablica[$i] . '"/>';
  8. }

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ą.
piotrd
rozwiązałem to w następujący sposób
  1. $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");
  2. shuffle($images);
  3. for($i=0;$i<12;$i++){
  4. echo ($i == '5') ? '<img src=' . $images[$i] . ' /><br />' : '<img src=' . $images[$i] . ' />';
  5. }

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

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?
scr1pt3r
Moja chyba szybsza - http://www.codepad.org/n0oJnbK5
piotrd
Cytat(potreb @ 28.08.2011, 00:39:44 ) *
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.
  1. <div id="logo">
  2. <ul>
  3. <li>
  4. <div id="title"><a href="./index.php" tabindex="1"><i>text</i><span></span><strong><i>text</i></strong></a></div>
  5. <div id="slogan">slogan</div>
  6. </li>
  7. <li>
  8. <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" />
  9. </li>
  10. </ul>
  11. </div>

w css mam
  1. #logo{padding:0; margin:0;}
  2. #logo #title{float:left;padding:0px 0px 0px;}
  3. #logo #title a{color:orange;font:bold 5.5em Verdana;text-transform:uppercase;text-decoration:none;position:absolute;}
  4. #logo #title a span{color:orange;}
  5. #logo #title a strong{color:#836b4c;}
  6. #logo #slogan{clear:left;margin-left:70px;margin-top:155px;padding:0px 15px;background:inherit;color:#544d3d;font:italic 15px Verdana;}
  7. #logo ul {overflow:hidden;list-style:none;}
  8. #logo li {float:left;}

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


edit

dodałem
Kod
.thumbnail  {
float:left;
margin:0px;
}
do img i jest ok
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
  1. for($i=0;$i<12;$i++){
  2. $tablica[$i]=$i+1.'.jpg';
  3.  
  4. }
  5. shuffle($tablica);
  6. for($i=0;$i<12;$i++){
  7. echo '<img src= "'. $tablica[$i] . '"/>';
  8. }
potreb
Ja mam tak:
  1. .gallery ul {list-style: none; margin: 0; padding: 0;}
  2. .gallery ul li {float: left; margin: 0; padding: 0;}
  3. .gallery ul img {margin: 0;}


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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.