Hello:
I am working on a website for a customer and am having an issue with the image gallery.
The goal is to create multiple categories with an image gallery for each.
For example,the wedding gallery will contain pictures of only weddings, wedding shows will only contain pictures for wedding shows....etc.
As it stands, even though there are 4 separate categories, I have not successfully isolated each group. All of the groups are running together, with pictures of each showing in the others group.
The following is the code. Please let me know if anyone can assist. Thank you:
<section id="content">
<div class="container_16">
<div class="wrapper">
<div class="grid_16">
<h2 class="padd-2">our GALLERY </h2>
</div>
<div class="grid_5">
<a href="images/nereida cake.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/ncake.png" alt="" width="280" height="262"></a>
<a href="BIG PHOTO LINK" rel="prettyPhoto[gallery1]" title="cape town tourism"></a>
...
<a href="BIG PHOTO LINK" rel="prettyPhoto[gallery1]" title="cape town tourism"></a>
<a href="#" class="bold color-1 hov-1">Wedding Cakes </a>
<p class="bot-3"> </p>
</div>
<div class="grid_5"><a href="images/cal tech room setup.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/weve.png" alt="" width="280" height="261"></a>
<a href="#" class="bold color-1 hov-1">Corporate Events </a>
<p class="bot-3"> </p>
</div>
<div class="grid_5"><a href="images/appetizers art gallery.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/app.png" alt="" width="280" height="262"></a><a href="#" class="bold color-1 hov-1">Parties</a>
<p class="bot-3"> </p>
</div>
<div class="clear"></div>
<div class="grid_5">
<a href="images/mikes wedding 1.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/wedng.png" alt="" width="280" height="262"></a>
<a href="#" class="bold color-1 hov-1">Weddings</a>
<p class="bot-3"> </p>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<p>
<!--the end of wrapper-->
</p>
<p> </p>
</div>
</section>
Thanks