Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Jak zrobić galerie CSS?
Forum PHP.pl > Forum > Przedszkole
sebenicz97
Witam.
Jako iż jestem zielony w sprawach CSS'a, potrzebuje pomocy ze zrobieniem przykładowej strony z samą galerią. Rozrysowałem to dokładnie jak to ma wyglądać. Po lewej stronie musi być pływająca ramka a w niej miniaturki zdjęć po których naciśnięciu ma sie pojawić powiększone zdjęcie z prawej strony. Zdjęcia podstawie sobie sam, ale bardzo prosiłbym o kod jak taką stronę zrobić. Z góry dzięki smile.gif Jestem nowy na forum i jeżeli coś nie tak napisałem to sory.
Link do obrazka: http://obrazki.elektroda.pl/5060909600_1428594636.jpg
tomek200
Użyj JavaScript.
sebenicz97
Javy tym bardziej nie umiem, bo jeszcze sie tego nie uczyłem. Może ktoś umie napisać kod CSS do takiej właśnie galerii
tomek200
Nie nie Java to nie JavaScript http://www.w3schools.com/js/ (a co do tego czy w css da się coś takiego zrobić to niewiem). Polecam użyć biblioteki jQuery bo daje ona wiele możliwości przy małej ilości kodu.
viking
Teoretycznie możesz w samym CSS choć zależy w jakich przeglądarkach ma działać.

  1. <ul>
  2. <li> <-- tutaj sobie powtórz li dla każdego obrazka
  3. <label for="${x}}">opis</label>
  4. <input type="radio" name="p" id="${x}"/> <-- checked dla pierwszego
  5. <img src="obraz1.png"/>
  6. </li>
  7. </ul>
  8.  
  9. ul label {
  10. display: block;
  11. cursor: pointer;
  12. }
  13.  
  14. ul input {
  15. display: none;
  16. }
  17.  
  18. ul input + img {
  19. height: 0;
  20. opacity: 0;
  21. overflow: hidden;
  22. position: absolute;
  23. top: 0;
  24. left: 280px;
  25. z-index: 99;
  26. }
  27.  
  28. ul input:checked + img {
  29. height: 200px;
  30. opacity: 1;
  31. -moz-transition: opacity 0.3s ease-in-out;
  32. -webkit-transition: opacity 0.3s ease-in-out;
  33. -o-transition: opacity 0.3s ease-in-out;
  34. -ms-transition: opacity 0.3s ease-in-out;
  35. transition: opacity 0.3s ease-in-out;
  36. }
sebenicz97
W google chrome. To dokładnie ma być przykładowa strona z przyciskami (strona główna, kontakt, forum, galeria) i tam ma być właśnie taka galeria. Nie wiem jak taki kod napisać
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.