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 </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 </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>