Problema ao fazer fancybox

Question

Amigos bom dia!

Após muito tentar  vendo gritar por socorro, estou precisando fazer uma implementação de fancybox em uma tela que mostra os detalhes do meu produto.

Os arquivos js e css do fancybox estão referenciados corretamente, o script esta identido ao do tutorial que segui como base.

Porem quando eu clico no link que deveria fazer o efeito do fanceybox ele simplismente ignora e abre em outra aba do meu navegador como se ele não existisse.

Vou postar aqui o codigo talvez consigam me auxiliar

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="wucListaProduto.ascx.cs"
    Inherits="ClicMais.UserControl.Produtos.DetalheProduto.wucListaProduto" %>
<script src=' <%=ResolveUrl("~/Scripts/jquery.fancybox.pack.js")%>' type="text/javascript"></script>
<link href='<%=ResolveUrl("~/Styles/jquery.fancybox.css")%>' rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
        $(".various").fancybox({
            maxWidth: 800,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>
<h1 class="TituloProduto">
    <img src="../../../images/bullet.png" alt="Bullet" /><asp:Literal ID="litTitulo"
        runat="server"></asp:Literal></h1>
<div class="FotoProduto">
    <%--    <asp:HyperLink ID="exemplo1" runat="server" ClientIDMode="Static">
        <asp:Image ID="Image4" runat="server" ClientIDMode="Static" /></asp:HyperLink>--%>
    <a class="single1" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg"
        title="a ride in blue? (cembayir_photography)">
        <img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg" alt="" />
    </a>
</div>
<asp:Panel ID="pnlDisponivelEstoque" runat="server" CssClass="ComEstoque">
    <div class="InfoProduto">
        <p class="preco">
            <asp:Literal ID="litPreco" runat="server" /></p>
        <p class="parcelamento">
            12 x de R$ 11,25 iguais</p>
        <p class="Estoque">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/system_box_full_99749.jpg"
                AlternateText="Estoque" /><asp:Literal ID="litEstoque" runat="server"></asp:Literal>
        </p>
        <p class="Recomende">
            <asp:Image ID="Image2" runat="server" ImageUrl="~/images/iconeUsuario.jpg" AlternateText="Indique" />&nbsp;<asp:HyperLink
                ID="HyperLink1" runat="server" CssClass="various" data-fancybox-type="iframe"
                NavigateUrl="http://www.google.com.br">Indique
            para um amigo!</asp:HyperLink>
        </p>
        <p>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/images/botaoComprar.jpg" AlternateText="Comprar" />
            </asp:LinkButton>
        </p>
    </div>
</asp:Panel>
<asp:Panel ID="pnlIndisponivelEstoque" runat="server" CssClass="SemEstoque">
</asp:Panel>
<div class="TabControl">
    <div id="header">
        <ul class="abas">
            <li>
                <div class="aba">
                    <span>Descrição Produto</span>
                </div>
            </li>
            <li>
                <div class="aba">
                    <span>Opniões dos Internautas</span>
                </div>
            </li>
        </ul>
    </div>
    <div id="content">
        <div class="conteudo">
            <asp:Literal ID="litDescricaoProduto" runat="server" />
        </div>
        <div class="conteudo">
            OPNIÕES DOS USUARIOS
        </div>
    </div>
</div>

Obrigado e espero uma ajuda de vocês amigos!

---

"Nunca deixe que os outros te subestimen, mas tambem não seja arrogante seja humilde e prove quem é

Answer 1

Boa tarde Atila

Faz o seguinte, tenta colocar teu javascript e CSS na página ou na masterpage e não dentro do control, talvez resolva o problema.

<script src=' <%=ResolveUrl("~/Scripts/jquery.fancybox.pack.js")%>' type="text/javascript"></script>
<link href='<%=ResolveUrl("~/Styles/jquery.fancybox.css")%>' rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
        $(".various").fancybox({
            maxWidth: 800,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>

Answer 2

Eu tirei da master page para ver se resolvia mais nada adiantou rsrsrsrs

no firebug ele me mostra essa mensagem

ReferenceError: $ is not defined

$(document).ready(function () { d

quando nao a esses error como agora

ReferenceError: jQuery is not defined
http://www.padariansfatima.com.br/fancybox/jquery.fancybox-1.3.4.pack.js
Line 46

Ate experimentei chamar um fancubyx.js e .css de umn outro site meu que funciona mais sempre da esses erros, ele simplismente ignora mais os outros jquery da pagina funcionam normalmente

---

"Nunca deixe que os outros te subestimen, mas tambem não seja arrogante seja humilde e prove quem é

Answer 3

Faltou o jQuery, adiciona antes dos outros scripts a linha abaixo, ou então a sua versão do jQuery

 <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Answer 4

Cesar o arquivo do jquery se encontra na master page!

---

"Nunca deixe que os outros te subestimen, mas tambem não seja arrogante seja humilde e prove quem é

Answer 5

o jQuery está antes do ContentPlaceHolder ?

Answer 6

Resolvi já...vlw

---

"Nunca deixe que os outros te subestimen, mas tambem não seja arrogante seja humilde e prove quem é