Crear una galeria de fotos simple en base a la estructura html que tengo, es muy simple, tengo varias imagenes detro de un html y sobre la foto que se muestra tengo dos botones (encima de la foto) uno es para click siguiente otro para atras y tiene que funcionar de esa manera, al dar click en siguiente llevara a la foto que sigue y de la misma fotrma al dar click para atras que se muestre la foto anterior, necesito que sea geneérica, es decir voy a ocupar la misma funcion en varios paginas de ese sitio, pueden ser desde 5 hasta 100 fotos sin importar nombre, tengo la siguiente estructura en mi html:
<div id="content">
<div id="img1" class="imagen">
<img class="fashion" src="img/
photo-1.jpg" alt="">
<a class="previous anterior" title="Previous image" href="#"></a>
<a class="next segunda" title="Next image" href="#"></a>
</div>
<div id="img2" class="imagen">
<img class="editorial" src="img/
photo-2.jpg" alt="">
<a title="Previous image" href="#"></a>
<a title="Next image" href="#"></a>
</div>
<div id="img3" class="imagen">
<img class="film" src="img/
photo-3.jpg" alt="">
<a title="Previous image" href="#"></a>
<a title="Next image" href="#"></a>
</div>
<div id="img4" class="imagen">
<img class="example" src="img/
photo-4.jpg" alt="">
<a class="previous" title="Previous image" href="#"></a>
<a class="next" title="Next image" href="#"></a>
</div>
<div id="instructions">
<p>Click on Image</p>
</div>
</div><!--#content-->
Necesito que al dar click en el link con titulo "Next Image" oculte la imagen actual y muestre la siguiente "img" dentro del div con clase "imagen" y al dar click en "Previous Image" oculte la actual y muestre la "img" que esta dentro del div anterior con clase "imagen" espero me explique bien, de todas formas anexo el proyecto para que lo revisen
jQuery
Prazo de Entrega: Não estabelecido