CodePen

HTML

            
              <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <script src="vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        
        <script src="http://www.lozeremedia.com/test_gallery/galleria-1.2.8.min.js" type="text/javascript"></script>
    </head>
    <body>
        
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install 			Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        	<div id="wrapper" class="clearfix">
        		        		    
	        	<div id="article">
			        		<div id="diaporama1">
			        			<a href="http://oscartour.animationblogspot.com/files/2008/02/Suzie-Invisagirl.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/Suzie-Invisagirl.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/Suzie-Invisagirl.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>
			        			<a href="http://oscartour.animationblogspot.com/files/2008/02/Pixar-Rat-Video.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/Pixar-Rat-Video.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/Pixar-Rat-Video.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>
			        			<a href="http://oscartour.animationblogspot.com/files/2008/02/Josh-Sam-Chris-James-Pixar.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/Josh-Sam-Chris-James-Pixar.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/Josh-Sam-Chris-James-Pixar.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>	
			        		</div>
			        		
			        		<div id="diaporama2" class="default_hidden">
		                		<a href="http://oscartour.animationblogspot.com/files/2008/02/Alan-Hugh-Pixar.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/Alan-Hugh-Pixar.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/Alan-Hugh-Pixar.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>
		                		<a href="http://oscartour.animationblogspot.com/files/2008/02/BobPeterson.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/BobPeterson.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/BobPeterson.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>
		                		<a href="http://oscartour.animationblogspot.com/files/2008/02/Outside-Pixar.jpg"><img src="http://oscartour.animationblogspot.com/files/2008/02/Outside-Pixar.jpg" data-big="http://oscartour.animationblogspot.com/files/2008/02/Outside-Pixar.jpg" data-title="My title" data-description="My <strong>description</strong>"></a>
			        		</div>
		        				        		
		        		<script>
				            Galleria.loadTheme('http://www.lozeremedia.com/test_gallery/themes/classic/galleria.classic.min.js');
				            Galleria.run('#diaporama1');
				            Galleria.configure({
							    lightbox: true,
							    responsive: true,
							    height: 320,
							    autoplay: 3000
							});
				        </script>
	        		
	        		<div id="pic_changer">
	        			<a href="#" id="btn_interieur" class="" rel="#diaporama1" onclick="Galleria.run('#diaporama1'); hideIt('diaporama2');showIt('diaporama1');">Exterieur</a>
	        			<a href="#" id="btn_exterieur" class="" rel="#diaporama2" onclick="Galleria.run('#diaporama2'); hideIt('diaporama1');showIt('diaporama2');">Interieur</a>
	        		</div>
	        		
		        </div> <!-- /article -->
		        
        	</div> <!-- /wrapper -->
    </body>
            
          
!
via HTML Inspector

CSS

            
              #diaporama1, #diaporama2 {
		position: relative;
		width: 80%;
		height: 320px;
		margin: 10px auto;
		border: 10px solid white;
		-moz-box-shadow: 1px 0px 7px #000000;
		-webkit-box-shadow: 1px 0px 7px #000000;
		box-shadow: 1px 0px 7px #000000;	
	}
	#pic_changer a {
		display: inline-block;
		margin: 0 5px;
	}
.default_hidden {display: none;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Montrer un élément
function showIt(id) {
		document.getElementById(id).style.display = 'block';
}

// Cacher un élément
function hideIt(id) {
		document.getElementById(id).style.display = 'none';
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................