none
Problema ao fazer fancybox RRS feed

  • Pergunta

  • 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 é

    quarta-feira, 27 de fevereiro de 2013 15:29

Respostas

Todas as Respostas

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

    quarta-feira, 27 de fevereiro de 2013 16:10
  • 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 é


    • Editado Atila Rampazo quarta-feira, 27 de fevereiro de 2013 17:04 alterei a resposta
    quarta-feira, 27 de fevereiro de 2013 16:40
  • 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>


    quarta-feira, 27 de fevereiro de 2013 17:32
  • 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 é

    quarta-feira, 27 de fevereiro de 2013 18:18
  • o jQuery está antes do ContentPlaceHolder ?

    • Marcado como Resposta Atila Rampazo quinta-feira, 28 de fevereiro de 2013 15:41
    quinta-feira, 28 de fevereiro de 2013 03:46
  • Resolvi já...vlw

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

    quinta-feira, 28 de fevereiro de 2013 15:41