|
<< Click to Display Table of Contents >> Multiplas galerias |
  
|
|
<< Click to Display Table of Contents >> Multiplas galerias |
|
Para fazer 2 ou mais galerias na mesma página:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$( "#noticia-imgs .gallery" ).each(function( index, galeria )
$("#" + galeria.id + " a").photoSwipe(options);
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
<style>
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; }
</style>
</head>
<body>
<div id="noticia-imgs">
<ul id="x" class="gallery galeria1">
<li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 002" /></a></li>
<li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 003" /></a></li>
<li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 004" /></a></li>
</ul>
<hr/>
<ul id="y" class="gallery galeria2">
<li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 002" /></a></li>
<li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 003" /></a></li>
</ul>
</div>
</body>
</html>