Fancybox

jQuery - Ingrandimenti di immagini

Dopo aver scaricato e scompattato prettyPhoto è necessario includere il seguente codice all'interno del tag della vs pagina e verificare il corretto posizionamento dei file immagini e css.
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.4"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

Per ogni immagine basterà aggiungere l'attributo rel in questo modo:
<a class="fancybox" rel="gallery1" href="img/immagine1.jpg" title="Titolo esempio 1"><img src="img/thumbs/immagine1.jpg" border="0" alt="" /></a>
<a class="fancybox" rel="gallery1" href="img/immagine2.jpg" title=""><img src="img/thumbs/immagine2.jpg" border="0" alt="" /></a>
<a class="fancybox" rel="gallery1" href="img/immagine3.jpg" title="Titolo esempio 2"><img src="img/thumbs/immagine3.jpg" border="0" alt="" /></a>
ed infine utilizzare il selettore jQuery, ad esempio, come segue:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      openEffect : 'none',
      closeEffect : 'none'
    });
  });
</script>