|
<< Click to Display Table of Contents >> Fancybox - versão 2 - só html |
  
|
|
<< Click to Display Table of Contents >> Fancybox - versão 2 - só html |
|
Onde
http://fancyapps.com/fancybox/
Atenção
Tive problemas de fancybox não funcionar na mesma página onde tem Nivo Banner Slider!
Telas
Estrutura
pasta demo
pasta lib
pasta source
sub-pasta helpers
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>