FancyBox - versão 1

<< Click to Display Table of Contents >>

Navigation:  Fancybox >

FancyBox - versão 1

Previous pageReturn to chapter overviewNext page

Resultado final

 

fancy

 

E ao clicar:

 

fancy1

 

Fancybox

 

Link: http://fancybox.net/

 

Estrutura do projeto

 

fancy2

 

 

Site1.Master

 

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

 

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

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

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

  <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css"

      media="screen" />

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

  </asp:ContentPlaceHolder>

</head>

<body>

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

  <h1>

       Este texto está na master

  </h1>

  <br />

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

  </asp:ContentPlaceHolder>

  </form>

</body>

</html>

 

WebForm1.aspx

 

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

  CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.pasta.WebForm1" %>

 

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

  <script type="text/javascript">

       $(document).ready(function () {

           $("#gallery a").fancybox({

              'overlayColor': '#000',

              'overlayOpacity': 0.6,

              'hideOnOverlayClick': 'true',

              'transitionIn': 'elastic',

              'transitionOut': 'elastic'

           });

       });

  </script>

</asp:Content>

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

  <p>

       Este texto está na filha</p>

  <div id="gallery" align="center">

      <asp:HyperLink rel="grupo" ID="HyperLink1" NavigateUrl="~/img/1_b.jpg" runat="server"

          title="Titulo da figura 1">

          <asp:Image ID="Image1" runat="server" ImageUrl="~/img/1_s.jpg" alt="Alternativo texto 1"

              BorderStyle="None" />

      </asp:HyperLink>

      <asp:HyperLink rel="grupo" ID="HyperLink2" NavigateUrl="~/img/2_b.jpg" runat="server"

          title="Figura 2">

          <asp:Image ID="Image2" runat="server" ImageUrl="~/img/2_s.jpg" alt="Alternativo texto 2"

              BorderStyle="None" />

      </asp:HyperLink>

      <asp:HyperLink rel="grupo" ID="HyperLink3" NavigateUrl="~/img/3_b.jpg" runat="server"

          title="Este é um texto para figura 3">

          <asp:Image ID="Image3" runat="server" ImageUrl="~/img/3_s.jpg" alt="Alternativo texto 3"

              BorderStyle="None" />

      </asp:HyperLink>

  </div>

</asp:Content>