Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JS] Przewijaniy DIV ze zdjęciami w poziomie
Forum PHP.pl > Forum > Po stronie przeglądarki
jpowie01
19.07.2011, 16:07:08
Witajcie,

Znowu natknąłem się na niby błahostkę. Niby banał, a jednak.. Przejdę do rzeczy.
Mój plan :
Umieścić na stronie galerię zdjęć. Zdjęcia byłyby wyświetlane obok siebie, tak aby można je było przesuwać w lewo i w prawo za pomocą przycisków.
Hm.. łatwe prawda ? A jednak nie.

Więc zabrałem się za pisanie. Wszystko ładnie wygląda - tak jak zaplanowałem. Grafika gotowa. Kod mniej więcej jest. No właśnie "mniej więcej", ponieważ nie mogę ustawić obrazków. Chciałbym żeby zdjęcia leżały obok siebie. Teraz zdjęcia, które się mieszczą w szerokości <div> , natomiast reszta przechodzi linię niżej.

Zresztą sami spróbujcie.

CSS:
[HTML] pobierz, plaintext 
  1. #event_photos {
  2. 	width: 820px;
  3. 	height: 170px;
  4. 	background: #333333;
  5. 	border-top: 1px solid #333333;
  6. 	border-bottom: 1px solid #333333;
  7. 	}
  8. #event_photos .content {
  9. 	height: 130px;
  10. 	width: 740px;
  11. 	padding: 20px;
  12. 	overflow-x: auto;
  13. 	overflow-y: hidden;
  14. 	float: left;
  15. 	}
  16. #event_photo {
  17. 	background: #eeeeee; 
  18. 	border: 1px solid #000000; 
  19. 	padding: 5px; 
  20. 	margin-right: 10px;
  21. 	float: left;
  22. 	}
  23. img.event_photo {
  24. 	max-width: 500px; 
  25. 	max-height: 120px;
  26. 	}
  27. #event_photo_left {
  28. 	width: 20px;
  29. 	height: 170px;
  30. 	background: #444444;
  31. 	background-repeat: no-repeat;
  32. 	background-position: left;
  33. 	float: left;
  34. 	}
  35. #event_photo_right {
  36. 	width: 20px;
  37. 	height: 170px;
  38. 	background: #444444;
  39. 	background-repeat: no-repeat;
  40. 	background-position: left;
  41. 	float: right;
  42. 	}
  43. #event_photo_left:hover {
  44. 	background: #555555;
  45. 	}
  46. #event_photo_right:hover {
  47. 	background: #555555;
  48. 	}
[HTML] pobierz, plaintext

HTML:
[HTML] pobierz, plaintext 
  1. 	<div id="event_photos">
  2. 		<div id="event_photo_left"></div>
  3. 		<div class="content">
  4. 		<div class="event_photo">
  5. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  6. 		</div>
  7. 		<div class="event_photo">
  8. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  9. 		</div>
  10. 		<div class="event_photo">
  11. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  12. 		</div>
  13. 		<div class="event_photo">
  14. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  15. 		</div>
  16. 		<div class="event_photo">
  17. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  18. 		</div>
  19. 		<div class="event_photo">
  20. 			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  21. 		</div>
  22. 		</diV>
  23. 		<div id="event_photo_right"></div>
  24. 	</div>
[HTML] pobierz, plaintext


No niestety nie działa. Nie wiem z której strony to ugryźć. Czytałem trochę o tym w Internecie. Ludzie też mają z tym problemy. Nawet znalazłem gotowy skrypt, lecz był on zastrzeżony prawami autorskimi i nie mógł bym ze strony w przyszłości czerpać zysków.

Macie jakiś pomysł, rozwiązanie ? Może nakierujecie mnie na coś. Albo mieliście już kiedyś taki problem.

PS. Zdjęcia poglądowe.
Pozdrawiam,
jpowie01
toaspzoo
19.07.2011, 16:12:42
display: block;
float: left / right; // to lub to
jpowie01
19.07.2011, 16:19:25
Już kombinowałem z display. Ze wszystkimi jego własnościami. No i nic. Co do float - zdjęcia mają ustawiony float:left, więc to też nie jest rozwiązanie ;/

Spędziłem nad tym wczorajszy wieczór. Ciężki temat..
luckyps
19.07.2011, 16:21:03 
[HTML] pobierz, plaintext 
  1. <div id="event_photo">
[HTML] pobierz, plaintext

Nie mozesz miesz kilku tych samych id
jpowie01
19.07.2011, 16:27:36
Nie !? A to widocznie jestem w błędzie. Sorry :) Poprawiłem.

No ale nadal nie zmienia to faktu że nie działa ;/
luckyps
19.07.2011, 16:45:39
moze to Ci pomoze ? Wklej ten kawalek kodu i sprawdz

[HTML] pobierz, plaintext 
  1. <div>
  2. 	<div id="event_photo_left"></div>
  3. 	<div style="width: 820px; height: 170px; border: 2px solid black; overflow: hidden;">
  4. 		<div style="width:10000px; height: 130px; padding: 20px;">
  5. 			<div class="event_photo">
  6. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  7. 			</div>
  8. 			<div class="event_photo">
  9. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  10. 			</div>
  11. 			<div class="event_photo">
  12. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  13. 			</div>
  14. 			<div class="event_photo">
  15. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  16. 			</div>
  17. 			<div class="event_photo">
  18. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  19. 			</div>
  20. 			<div class="event_photo">
  21. 				<img style="float:left; " src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
  22. 			</div>
  23. 		</div>
  24. 	</div>
  25. 	<div id="event_photo_right"></div>
  26. </div>
[HTML] pobierz, plaintext
jpowie01
19.07.2011, 17:07:24
Wow ! Działa :D Dzięki wielkie, nigdy bym na to nie wpadł !

Teraz pozostaje mi tylko dodać kod który to wszystko "ruszy" :))

Jeszcze raz - Dzięki.
Pozdrawiam,
jpowie01
luckyps
20.07.2011, 10:16:41
T o w takim razie do dzieła wink.gif
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.