Problema com Lightbox JQuery, quando clica nas imagens não funciona

prompt · Setembro 14, 2010

Fala galera, beleza?

Seguinte, estou tentando colocar Lightbox JQuery com fotos no site do cliente.

Copiei EXATAMENTE o que tinha no Demo funcionando e coloquei na minha página, porém não funciona..

Quando clico em alguma imagem do Lightbox a página recarrega em branco, apenas com a imagem...

POR FAVOR ME AJUDEM!!

Código na MasterPage

<head runat="server">
    <title>Plazza Brasil</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" media="screen" href="../Styles/style.css" />

    <!-- jQuery library -->
    <script type="text/javascript" src="../Scripts/jquery-1.4.2.min.js"></script>
    <!-- jCarousel library -->
    <script type="text/javascript" src="../Scripts/jquery.jcarousel.min.js"></script>

    <!-- Include Lightbox (Production) --> 
    <script type="text/javascript" src="../Scripts/jquery.lightbox.min.js"></script>
</head>

Código na página interna

<div class="gallery">
	<ul class="images">
		<li class="image">
			<a rel="lightbox-mygallery" href="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab.jpg" title="tallest, deepest: Lovely photo of perth during the daytime."><img src="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab_s.jpg" height="75" width="75" alt="" /></a>
		</li>
		<li class="image">
			<a rel="lightbox-mygallery" href="http://farm1.static.flickr.com/64/230712309_392c8d5bb7_o.jpg" title="Rolling Clouds"><img src="http://farm1.static.flickr.com/64/230712309_392c8d5bb7_s.jpg" height="75" width="75" alt="" /></a>
		</li>
		<li class="image">
			<a rel="lightbox-mygallery" href="http://farm1.static.flickr.com/75/213998568_510c2625cc_o.jpg" title="City of Seagulls"><img src="http://farm1.static.flickr.com/75/213998568_510c2625cc_s.jpg" height="75" width="75" alt="" /></a>
		</li>
	</ul>
</div>

VALEU GALERA!

Abraços,

Prompt

Carlos F. · Setembro 14, 2010

E ai prompt, beleza?

É o seguinte, você não colocou a função do jquery pra abrir seu lightbox...

O código é esse aqui:

<script type="text/javascript">
        $(function () {
            $('#gallery a').lightBox();
        });
</script>

E não esqueça de importar a CSS do lightbox que vem junto ao plugin.

Abraços...

prompt · Setembro 14, 2010

E ai prompt, beleza?

É o seguinte, você não colocou a função do jquery pra abrir seu lightbox...

O código é esse aqui:
<script type="text/javascript">
        $(function () {
            $('#gallery a').lightBox();
        });
</script>
E não esqueça de importar a CSS do lightbox que vem junto ao plugin.

Abraços...

Opa Carlos, tudo legal?

Muito obrigado pela força cara, consegui resolver aqui.

Quando coloquei seu Script tb não funcionou, ai depois resolvi refazer a página toda e rolou tranquilo.. Deve ter sido alguma coisa que passou errado..

Mesmo assim, estou precisando de mais um help, preciso trazer as imagens do Banco, sendo que coloquei o Lightbox dentro de um DataList.

o problema é que não consigo usar as tags <%# Bind("foto")%> dentro do <a rel="...>

quero mudar a <a rel.. para um <asp:ImageButton, mas não vai mais funcionar pcausa do rel="" que não tem correto?

Como faço para fazer funcionar o LightBox com uma <asp:ImageButton ?

Como está agora:

<div class="gallery">
	                <ul class="images">
                        <asp:DataList ID="dlFotosPerspectivas" Width="363" onitemcommand="cmdFoto_Click" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
                            <ItemTemplate>
                                <asp:Label ID="Label2" CssClass="tituloSecundario" runat="server" Text="........................" />
                                <br />
                                <li class="image">
				                    <a rel="lightbox-mygallery" href="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab.jpg" title="tallest, deepest: Lovely photo of perth during the daytime."><img src="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab_s.jpg" height="75" width="75"></a>
			                    </li>
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="Label1" CssClass="tituloSecundario" runat="server" Text="........................................................................" />
                            </FooterTemplate>
                        </asp:DataList>
                    </ul>
                </div>

Vlw, abração!

Prompt

Carlos F. · Setembro 14, 2010

E ae prompt,

Cara realmente com o script n ia funcionar, eu não prestei muita atenção no seu código, ai não reparei que sua div tava com uma class e não com um id, logo o #gallery no script n ia funcionar, tinha que ser .gallery...

Em relação ao transformar, acredito que o rel da tag a não influêncie em nada no seu lightbox(pelomenos todos os que eu fiz eu nunca usei o atributo rel), se eu estiver correto nesse meu pensamento para você fazer um lightbox com o ImageButton é só criar uma class pra os ImageButtons e no script você seta o nome da classe. Exemplo:

<asp:ImageButton runat="server" CssClass="btnImage" />

<script type="text/javascript">
        $(function () {
            $('.btnImage').lightBox();
        });
</script>

Testa ai e da um retorno!

Abraço...

Ivan.Teles · Setembro 14, 2010

Só lembrando que o ImageButton redenriza um input e não uma imagem ok.

Carlos F. · Setembro 14, 2010

Ivan,

Não entendi muito bem isso que você disse...

Mas na verdade o ImageButton Renderiza sim uma imagem, mas com funções de um submit!

Abraços...

Ivan.Teles · Setembro 14, 2010

Quando você adicionar em uma pagina aspx um <asp:Image no html ele será um <img se você adicionar <asp:ImageButton no html ele será <input type="Image". Entendeu!

Carlos F. · Setembro 14, 2010

Ah sim... Entendi sua colocação agora! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

prompt · Setembro 14, 2010

E ae prompt,

Cara realmente com o script n ia funcionar, eu não prestei muita atenção no seu código, ai não reparei que sua div tava com uma class e não com um id, logo o #gallery no script n ia funcionar, tinha que ser .gallery...

Em relação ao transformar, acredito que o rel da tag a não influêncie em nada no seu lightbox(pelomenos todos os que eu fiz eu nunca usei o atributo rel), se eu estiver correto nesse meu pensamento para você fazer um lightbox com o ImageButton é só criar uma class pra os ImageButtons e no script você seta o nome da classe. Exemplo:
<asp:ImageButton runat="server" CssClass="btnImage" />
<script type="text/javascript">
        $(function () {
            $('.btnImage').lightBox();
        });
</script>
Testa ai e da um retorno!

Abraço...

Pois é Carlos, assim não rolou.. Coloquei o código que sugeriu e coloquei a classe no <asp:HyperLink, e ai ele começou a abrir novamente a imagem em uma nova tela..

Se puder me ajudar a descobrir o que estou fazendo de errado agradeço muito!

Seguem meus códigos:

style.css

    .btnImage{

    }

MasterPage

    <!-- jQuery library -->
    <script type="text/javascript" src="../Scripts/jquery-1.4.2.min.js"></script>
    <!-- jCarousel library -->
    <script type="text/javascript" src="../Scripts/jquery.jcarousel.min.js"></script>

    <!-- Include Lightbox (Production) -->
    <script type="text/javascript" src="../scripts/jquery.lightbox.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $('.btnImage').lightBox();
        });
    </script>

Page.aspx

    <div class="gallery">
	    <ul class="images">
            <asp:DataList ID="dlFotosPerspectivas" Width="363" onitemcommand="cmdFoto_Click" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
                <ItemTemplate>
                    <asp:Label ID="Label2" CssClass="tituloSecundario" runat="server" Text="........................" />
                    <br />
                    <li class="image">
                        <asp:HyperLink ID="hlbtn" runat="server" CssClass="btnImage" ImageUrl='<%# Bind("cImageUrl") %>' NavigateUrl='<%# Bind("cImageUrl") %>' Width="99" Height="75" />
			        </li>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="Label1" CssClass="tituloSecundario" runat="server" Text="........................................................................" />
                </FooterTemplate>
            </asp:DataList>
        </ul>
    </div>

Vlw! Abraços,

Prompt

Carlos F. · Setembro 15, 2010

Tenta colocar o script do jQuery na pagina.aspx, assim:

    <script type="text/javascript">
        $(function () {
            $('.btnImage').lightBox();
        });
    </script>
    <div class="gallery">
            <ul class="images">
            <asp:DataList ID="dlFotosPerspectivas" Width="363" onitemcommand="cmdFoto_Click" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
                <ItemTemplate>
                    <asp:Label ID="Label2" CssClass="tituloSecundario" runat="server" Text="........................" />
                    <br />
                    <li class="image">
                        <asp:HyperLink ID="hlbtn" runat="server" CssClass="btnImage" ImageUrl='<%# Bind("cImageUrl") %>' NavigateUrl='<%# Bind("cImageUrl") %>' Width="99" Height="75" />
                                </li>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="Label1" CssClass="tituloSecundario" runat="server" Text="........................................................................" />
                </FooterTemplate>
            </asp:DataList>
        </ul>
    </div>

E você está importando a página CSS que vem junto ao plugin do lightbox??

Abraço...

prompt · Setembro 15, 2010

Tenta colocar o script do jQuery na pagina.aspx, assim:

    <script type="text/javascript">
        $(function () {
            $('.btnImage').lightBox();
        });
    </script>
    <div class="gallery">
            <ul class="images">
            <asp:DataList ID="dlFotosPerspectivas" Width="363" onitemcommand="cmdFoto_Click" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
                <ItemTemplate>
                    <asp:Label ID="Label2" CssClass="tituloSecundario" runat="server" Text="........................" />
                    <br />
                    <li class="image">
                        <asp:HyperLink ID="hlbtn" runat="server" CssClass="btnImage" ImageUrl='<%# Bind("cImageUrl") %>' NavigateUrl='<%# Bind("cImageUrl") %>' Width="99" Height="75" />
                                </li>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="Label1" CssClass="tituloSecundario" runat="server" Text="........................................................................" />
                </FooterTemplate>
            </asp:DataList>
        </ul>
    </div>

E você está importando a página CSS que vem junto ao plugin do lightbox??

Abraço...

Sim Carlos, estou importando a página de CSS, inclusive, é nela mesmo que coloquei a classe .btnImage..

Já que moveram para este forum agora, gostaria de pedir pra galera que me desse um help com isso, não estou conseguindo fazer funcionar de jeito nenhum..

Se alguém tiver um código desse funcionando que possa postar para comparar eu agradeço muito!!

(hoje é meu Deadline para entregar isso funcionando.. por isso estou tão ansioso.. vlw galera!)

Segue como está meu código no momento:

Classe .btnImage dentro de style.css

.btnImage{

}

Tag <head> na MasterPage

<head runat="server">
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <!-- Classe Lightbox .css -->
    <link type="text/css" rel="stylesheet" media="screen" href="../Styles/style.css" />

    <!-- jQuery library -->
    <script type="text/javascript" src="../Scripts/jquery-1.4.2.min.js"></script>
    <!-- jCarousel library -->
    <script type="text/javascript" src="../Scripts/jquery.jcarousel.min.js"></script>
    <!-- Include Lightbox (Production) -->
    <script type="text/javascript" src="../scripts/jquery.lightbox.min.js"></script>
</head>

Default.aspx que contém a <div class="gallery">

<script type="text/javascript">
    $(function () {
        $('.btnImage').lightBox();
    });
</script>
<div class="gallery">
	<ul class="images">
        <asp:DataList ID="dlFotosPerspectivas" Width="363" onitemcommand="cmdFoto_Click" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
            <ItemTemplate>
                <asp:Label ID="Label2" CssClass="tituloSecundario" runat="server" Text="........................" />
                <br />
                <li class="image">
                    <asp:HyperLink ID="hlbtn" runat="server" CssClass="btnImage" ImageUrl='<%# Bind("cImageUrl") %>' NavigateUrl='<%# Bind("cImageUrl") %>' Width="99" Height="75" />
			    </li>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="Label1" CssClass="tituloSecundario" runat="server" Text="........................................................................" />
            </FooterTemplate>
        </asp:DataList>
    </ul>
</div>

Agradeço desde já a ajuda de todos!

Abraços,

Prompt

Carlos F. · Setembro 15, 2010

Prompt,

Fiz uma página bem rapidinho aqui:

Em primeiro lugar o plugin do lightbox que eu uso é esse: LighBox

Agora o código da página:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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">
    <script src="jquery.js" type="text/javascript"></script>
    <link href="jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <script src="jquery.lightbox-0.5.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
<script type="text/javascript">
    $(function () {
        $('.btnImage').lightBox();
    });
    </script>
    <form id="form1" runat="server">
    <div>
        <asp:HyperLink runat="server" ImageUrl="~/img.jpg" NavigateUrl="~/img.jpg" CssClass="btnImage" />
    </div>
    </form>
</body>
</html>

Importei o jquery.js, o jquery.lightbox-0.5.js e o jquery.lightbox-0.5.css (todos vem no pacote do plugin)

Basicão mas funcional!

Abraço...

Arquivado

Problema com Lightbox JQuery, quando clica nas imagens não funciona

Recommended Posts

prompt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

prompt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ivan.Teles 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ivan.Teles 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

prompt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

prompt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos F. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante