Afficher galerie jquery en cliquant sur une image

Bonjour, étant nouveau sur ce site même si je l'utilise depuis pas mal de temps et je je trouve vraiment super pour apprendre et se perfectionner.
Si quelqu'un à des conseils pour m'aider a coder une fonction jquery appelant une galerie + la description au clique vous êtes les bienvenues^^, j'ai essayer d'utiliser le code du tutoriel http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html est de l'adapter pour appeler mon contenu mais je n'y arrive pas..

J'ai actuellement un petit problème pour réaliser un portfolio utilisant jquery, l'idée du portfolio est la suivante :




-il a une sorte de portfolio contenant X photos coder de la manière suivante :

<div class="container">
    <div class="row">
	  <div class="row thumbs clearfix">
	  
				<div class="span3">
				<a class="post-thumb" >
				<img class="post-img" src="_include/img/portfolio/edith-serei.jpg" width="270" alt="The Khat">
				</div>
				
				<div class="span3">
				<a class="post-thumb" >
				<img class="post-img" src="_include/img/portfolio/3lp.jpg" width="270" alt="The Khat">
				</div>
				
				<div class="span3">
				<a class="post-thumb" >
				<img class="post-img" src="_include/img/portfolio/3lp.jpg" width="270" alt="The Khat">
				</div>
				
				<div class="span3">
				<a class="post-thumb" >
				<img class="post-img" src="_include/img/portfolio/3lp.jpg" width="270" alt="The Khat">
				</div>
</div>
</div>
</div>

avec ces photos qui sont cliquable, le but est d'afficher un slider représentant le projet en question: voilà un aperçu du rendu en cour de réalisation.



Le principe que j'essaye de mettre en place est qui me pose problème :
-avoir le premier projet actif (ou non je sais pas encore comment je vais le présenter)
-lorsque je clique sur une image du portfolio, le projet s'ouvre en dessous contenant un slider avec le projet et a droite la description du projet +titre.

mon problème est que je n'arrive pas a appeler la galerie et la description, et comment je peux arriver a cacher le contenu inactif et le faire apparaitre au clic

Concernant la galerie ainsi que la description le code est le suivant :

	  <div class="container">
    <div class="row">
<div class="span8">

           <div id="slider" class="swipe">  
        <div class="swipe-wrap">  
            <div><img src="_include/img/portfolio/edith-serei.png" width="700" height="550" alt="alt"></div>  
            <div><img src="_include/img/portfolio/edith-serei3.png" width="700" height="550" alt="alt"></div>  
            <div><img src="_include/img/portfolio/edith-serei4.png" width="700" height="550" alt="alt"></div>  
        </div> 
		<span class="nav prev">Prev</span>
		<span class="nav next">Next</span>		
    </div>  

		</div>
         <div class="span4">

        	<div class="contact-details">
        		<h2>Edith Serei</h2>
				
				<a>L'Académie Édith Serei est une école de beauté et d'esthétique professionnelle, qui dispose de deux campus à Montréal et Laval, 
				au Québec. Ce centre de formation dispense des cours et des programmes de formation en esthétique et beauté, maquillage et dermopigmentation, 
				massothérapie, manucure, soins des pieds et pose d'ongles, laser, cire et électrolyse, pose et extension de cils. Depuis de nombreuses années,
				les finissants et diplômés de l'Académie d'esthétique et de beauté Édith Serei sont reconnus pour leurs très haut niveau de compétence et sont très recherchés dans l'industrie. </a>
				 <div class="social">
            	<ul class="social-icons">
                   <li><a href="#" title="Suivez moi sur Twitter"><span><img src="_include/icone_twit.png" alt="Icone Twitter" title="Icone Twitter"/></span></a></li>
                     <li><a href="#" title="Voir mon profil Linked in"><span><img src="_include/icone_linked.png" alt="Icone Linked In" title="Icone Linked In"/></span></a></li>
					<li><a href="#" title="Partager avec moi sur Pinterest"><span><img src="_include/icone_pint.png" alt="Icone pinterest" title="Icone Pinterest"/></span></a></li>
                    <li><a href="#" title="Instagram"><span><img src="_include/icone_inst.png" alt="Icone Instagram" title="Icone Instagram"/></span></a></li>

                </ul>
            </div>
            </div>
        </div>
    </div>

le jquery pour les boutons :

<script>
$(document).ready(function() {
	Slider = $('#slider').Swipe({
		auto: 3000,
		continuous: true
	}).data('Swipe');

	$('.next').on('click', Slider.next);
	$('.prev').on('click', Slider.prev);
});
</script>

Up,nouveau code marche mais le second slide ne fonctionne pas .

//$(".imageportfolio").onClick = 
  //function(){ document.getElementById("#contenu_img1"+ancienId).style.display="none"; document.getElementById("#contenu_img1"+this.id).style.display="block"; ancienId=this.id }
  
  //Cliquer sur une image fait apparaitre le contenu du projet
	var focus_actuel="contenu_img1"; // On se souvient du projet ouvert actuellement
	$(".image_portfolio").click(function(){
		document.getElementById(focus_actuel).style.display="none";
		focus_actuel="contenu_"+this.getAttribute('id');
		document.getElementById(focus_actuel).style.display="block";
	});

de plus je voudrais utiliser le display=none pour qu'aucun des projets soit visible de base qu'il apparait seulement lorsque l'on clique sur une image mais en utilisant display=none cela marche mais le slider est vide losque le proejt apparait