Lightbox Gallery bez łączenia

0

Witam,
Posiadam na stronie dwie galerie oto strona: http://ekol.worldbit.pl/index-3.html
Lecz nie wiem jak zrobić aby one się ze sobą nie łączyły, jak kliknę na "Trzebiatów" to chciałbym, żeby było 1-4 a nie 12-16.
Oto kod html:

<section id="content" class="cont_pad">
	<div class="container_12">
		<div class="wrapper">
			<h2>Świadczymy usługi transportowe. </h2><br/>
			<h5 style="text-align:justify;font-family:times;"> 
			Dysponujemy parkiem specjalistycznych pojazdów do przewozu materiałów budowlanych, cementu a przede wszystkim betonu.
			W parku maszynowym posiadamy także ciężki sprzęt do robót ziemnych.<br/><br/>
			</h5>
			<div class="container_12">
				<div class="grid_8" style="width:445px;text-align:justify;text-align: center;">
						<div class="margbot1">
						<p class="text-1 marg1"><h2>Dziwnówek&nbsp;</h2><span></span><strong></strong></p>
						<p class="text-2 marg2">
							<script type="text/javascript"> $(function() { $('#gallery a').lightBox(); });</script>
							<style type="text/css">	
								#gallery {	background-color: transparent; width: 100%;margin-left:-11px;	}
								#gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img {height: 130px;width:260px;margin:25px;margin-bottom:10px;margin-left:20px; border: 5px solid #d8d8d8; border-width: 5px 5px 20px; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; }
								#gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff;box-shadow: 0px 0px 15px #000;	} #gallery ul a:hover { color: #d8d8d8; }
							</style>
							<div id="gallery">
							<ul><li>
								<a href="dziwnowek/d1.png" title="Dziwnówek" style="text-decoration:none;"><img src="dziwnowek/d1.png" title="Dziwnówek" style="width:250px; height:188px;"alt="Pojazdy 1"/>
								<a href="dziwnowek/d2.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d2.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 2"/>
								<a href="dziwnowek/d3.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d3.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 3"/>
								<a href="dziwnowek/d4.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d4.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 4"/>
								<a href="dziwnowek/d5.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d5.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 5"/>
								<a href="dziwnowek/d6.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d6.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 6"/>
								<a href="dziwnowek/d7.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d7.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 7"/>
								<a href="dziwnowek/d8.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d8.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 8"/>
								<a href="dziwnowek/d9.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d9.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 9"/>
								<a href="dziwnowek/d10.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d10.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 10"/>
								<a href="dziwnowek/d11.png" style="display:none;"  title="Dziwnówek"  style="text-decoration:none;float:left;"><img src="dziwnowek/d11.png" style="display:none;" title="Dziwnówek" alt="Pojazdy 11"/>
								</a>
							</ul></li>
							</div>
							</p>
						</div>
				</div>
				<div class="grid_8" style="width:445px;text-align:justify;text-align: center;">
						<div class="margbot1">
						<p class="text-1 marg1"><h2>Trzebiatów&nbsp;</h2><span></span><strong></strong></p>
						<p class="text-2 marg2">
							<script type="text/javascript"> $(function() { $('#gallery a').lightBox(); });</script>
							<style type="text/css">	
							#gallery {	background-color: transparent; width: 100%;margin-left:-11px;	}
							#gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img {height: 130px;width:260px;margin:10px;margin-bottom:10px;margin-left:20px; border: 5px solid #d8d8d8; border-width: 5px 5px 20px; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; }
							#gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff;box-shadow: 0px 0px 15px #000;	} #gallery ul a:hover { color: #d8d8d8; }</style>
							<div id="gallery">
							<ul><li>
								<a href="trzebiatow/t1.png" title="Trzebiatów" style="text-decoration:none;"><img src="trzebiatow/t1.png" title="Pojazdy" style="width:250px; height:188px;"alt="Pojazdy 1"/>
								<a href="trzebiatow/t2.png" style="display:none;"  title="Trzebiatów"  style="text-decoration:none;float:left;"><img src="trzebiatow/t2.png" style="display:none;" title="Trzebiatów" alt="Pojazdy 2"/>
								<a href="trzebiatow/t3.png" style="display:none;"  title="Trzebiatów"  style="text-decoration:none;float:left;"><img src="trzebiatow/t3.png" style="display:none;" title="Trzebiatów" alt="Pojazdy 3"/>
								<a href="trzebiatow/t4.png" style="display:none;"  title="Trzebiatów"  style="text-decoration:none;float:left;"><img src="trzebiatow/t4.png" style="display:none;" title="Trzebiatów" alt="Pojazdy 4"/>
								<a href="trzebiatow/t5.png" style="display:none;"  title="Trzebiatów"  style="text-decoration:none;float:left;"><img src="trzebiatow/t5.png" style="display:none;" title="Trzebiatów" alt="Pojazdy 5"/>
								</a>
							</ul></li>
							</div>
							</p>
						</div>
				</div>
			</div>	
		</div>
	</div>
	</section>
0

Masz w kodzie dwa elementy o tym samym ID - nie może tak być - użyj klas. ID nadaj unikalne (np. gallery1, gallery2), a potem w JS:
$(function() { $('#gallery1 a').lightBox(); $('#gallery2 a').lightBox(); });

0

Dzięki wielkie, wszystko działa. :)\

1 użytkowników online, w tym zalogowanych: 0, gości: 1