Fancybox - versão 2 - aspx com master

<< Click to Display Table of Contents >>

Navigation:  Fancybox >

Fancybox - versão 2 - aspx com master

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

 

fancy10

 

Mestre.Master

 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Mestre.master.cs" Inherits="TEstefancy.Mestre" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 <title></title>

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

 <!-- Add jQuery library -->

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

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

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

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

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

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

         media="screen" />

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

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

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

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

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

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

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

 <script type="text/javascript" src="/fancybox/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>

 <asp:ContentPlaceHolder ID="head" runat="server">

 </asp:ContentPlaceHolder>

</head>

<body>

 <form id="form1" runat="server">

 <div>

         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

         </asp:ContentPlaceHolder>

 </div>

 </form>

</body>

</html>

 

Default.aspx - versão com tags html (a e img)

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Mestre.Master" AutoEventWireup="true"

  CodeBehind="Default.aspx.cs" Inherits="TEstefancy.Default" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

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

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

  </a>

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

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

  </a>

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

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

  </a>

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

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

  </a>

</asp:Content>

 

Default.aspx - versão com tags aspx (asp:HyperLink e asp:Image)

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Mestre.Master" AutoEventWireup="true"

  CodeBehind="Default.aspx.cs" Inherits="TEstefancy.Default" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

  <asp:HyperLink ID="HyperLink1" runat="server" CssClass="fancybox" NavigateUrl="/img/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">

      <asp:Image ID="Image1" ImageUrl="/img/1_s.jpg" runat="server" />

  </asp:HyperLink>

   

  <asp:HyperLink ID="HyperLink2" runat="server" CssClass="fancybox" NavigateUrl="/img/2_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">

      <asp:Image ID="Image2" ImageUrl="/img/2_s.jpg" runat="server" />

  </asp:HyperLink>

 

  <asp:HyperLink ID="HyperLink3" runat="server" CssClass="fancybox" NavigateUrl="/img/3_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">

      <asp:Image ID="Image3" ImageUrl="/img/3_s.jpg" runat="server" />

  </asp:HyperLink>

 

  <asp:HyperLink ID="HyperLink4" runat="server" CssClass="fancybox" NavigateUrl="/img/4_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">

      <asp:Image ID="Image4" ImageUrl="/img/4_s.jpg" runat="server" />

  </asp:HyperLink>    

</asp:Content>