Fancybox - versão 2 - só html

<< Click to Display Table of Contents >>

Navigation:  Fancybox >

Fancybox - versão 2 - só html

Previous pageReturn to chapter overviewNext page

Onde

 

http://fancyapps.com/fancybox/

 

Atenção

 

Tive problemas de fancybox não funcionar na mesma página onde tem Nivo Banner Slider!

 

Telas

 

fancy4

 

 

fancy3

 

Estrutura

 

fancy5

 

pasta demo

 

fancy6

pasta lib

 

fancy7

 

pasta source

 

fancy8

 

sub-pasta helpers

 

fancy9

 

Html

 

<!DOCTYPE html>

<html>

<head>

  <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <!-- Add jQuery library -->

  <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>

  <!-- Add mousewheel plugin (this is optional) -->

  <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

  <!-- Add fancyBox main JS and CSS files -->

  <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"></script>

  <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6"

      media="screen" />

  <!-- Add Button helper (this is optional) -->

  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />

  <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

  <!-- Add Thumbnail helper (this is optional) -->

  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />

  <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>

  <!-- Add Media helper (this is optional) -->

  <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>

  <script type="text/javascript">

       $(document).ready(function () {

           $('.fancybox').fancybox({

               prevEffect: 'fade',

               nextEffect: 'fade',

               helpers: {

                   thumbs: {

                       width: 50,

                       height: 50

                   }

               }

           });

       });

 </script>

  <style type="text/css">

      .fancybox-custom .fancybox-skin

       {

          box-shadow: 0 0 50px #222;

       }

  </style>

</head>

 

<body>

  <p>

      <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">

          <img src="1_s.jpg" alt="" />

       </a>

 

       <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp">

            <img src="2_s.jpg" alt="" />

       </a>

 

       <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon">

            <img src="3_s.jpg" alt="" />

       </a>

 

       <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno">

            <img src="4_s.jpg" alt="" />

       </a>

  </p>

</body>

</html>