[HTML][CSS][JS] Przewijaniy DIV ze zdjęciami w poziomie Opcje

[jpowie01]

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 
#event_photos {
	width: 820px;
	height: 170px;
	background: #333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	}
#event_photos .content {
	height: 130px;
	width: 740px;
	padding: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	float: left;
	}
#event_photo {
	background: #eeeeee; 
	border: 1px solid #000000; 
	padding: 5px; 
	margin-right: 10px;
	float: left;
	}
img.event_photo {
	max-width: 500px; 
	max-height: 120px;
	}
#event_photo_left {
	width: 20px;
	height: 170px;
	background: #444444;
	background-repeat: no-repeat;
	background-position: left;
	float: left;
	}
#event_photo_right {
	width: 20px;
	height: 170px;
	background: #444444;
	background-repeat: no-repeat;
	background-position: left;
	float: right;
	}
#event_photo_left:hover {
	background: #555555;
	}
#event_photo_right:hover {
	background: #555555;
	}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
	<div id="event_photos">
		<div id="event_photo_left"></div>
		<div class="content">
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		</diV>
		<div id="event_photo_right"></div>
	</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

Ten post edytował jpowie01 19.07.2011, 16:28:18

[toaspzoo]

display: block;
float: left / right; // to lub to

[jpowie01]

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]

[HTML] pobierz, plaintext 
<div id="event_photo">
[HTML] pobierz, plaintext 

Nie mozesz miesz kilku tych samych id

[jpowie01]

Nie !? A to widocznie jestem w błędzie. Sorry :) Poprawiłem.

No ale nadal nie zmienia to faktu że nie działa ;/

[luckyps]

moze to Ci pomoze ? Wklej ten kawalek kodu i sprawdz

[HTML] pobierz, plaintext 
<div>
	<div id="event_photo_left"></div>
	<div style="width: 820px; height: 170px; border: 2px solid black; overflow: hidden;">
		<div style="width:10000px; height: 130px; padding: 20px;">
			<div class="event_photo">
				<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">
			</div>
			<div class="event_photo">
				<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">
			</div>
			<div class="event_photo">
				<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">
			</div>
			<div class="event_photo">
				<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">
			</div>
			<div class="event_photo">
				<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">
			</div>
			<div class="event_photo">
				<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">
			</div>
		</div>
	</div>
	<div id="event_photo_right"></div>
</div>
[HTML] pobierz, plaintext 

[jpowie01]

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]

T o w takim razie do dzieła