Multiplas galerias

<< Click to Display Table of Contents >>

Navigation:  Photoswipe >

Multiplas galerias

Previous pageReturn to chapter overviewNext page

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-stylenonepadding0margin0; }

       .gallery:after { clearbothcontent"."displayblockheight0visibilityhidden; }

       .gallery li { floatleft;  }

       .gallery li a { displayblockmargin5pxborder1px solid #3c3c3c; }

       .gallery li img { displayblock;  }

 </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>