Versão 0.4 do jQuery lightBox plugin

Posted on by

Acabo de finalizar e disponibilizar a versão 0.4 do jQuery lightBox plugin.

O carro chefe dessa versão foi o suporte a navegação via teclado com possibilidade de configuração. Novas opções de configuração foram adicionadas: imageBlank, keyToClose, keyToPrev e keyToNext.

O bug relacionado ao conflito do evento “click” quando o plugin é chamado mais de uma vez, por exemplo numa requisição Ajax, foi solucionado. A forma como alguns elementos – select, embed e object para ser mais específico – são ocultados ao exibir o “overlay” foi alterada; ao invés de utilizar a propriedade display, o plugin agora utiliza visibility.

Confira mais detalhes na página do jQuery lightBox plugin e baixe-o.

55 thoughts on “Versão 0.4 do jQuery lightBox plugin”

  1. Leandro. Estou tentando aplicar o jQuery lightbox plugin numa galeria com PHP e MYSQL mas não estou conseguindo. Tem algum tutorial que aponte para isso? aliás…primeiramente: é possível a utilização de ambos em conjunto? Em minhas experiencias eu consigo aplicar o jQuery lightbox, mas em uma galaria com imagens dde BD não…aparece só a imagem mas não os efeitos do plugin

  2. Para informar que consegui. Foi simples aplicar o jQuery lightbox plugin aos links da DIV que estavam as miniaturas cujo caminho estavam no BD. Vai dar uma boa Galeria Dinâmica de Imagens. O desafio que estou tentando resolver agora é o seguinte: algumas fotos estão num tamanho maior que a tela do monitor, e ainda não descobri como configurar no Plugin uma largura máxima para as fotos…É possível isso? Dei uma olhada geral nas possibilidades de configuração dos arquivos e não descobri…

  3. Olá Aureo,

    Essa questão relacionado a fotos maior que a tela do monitor, será disponibilizada na versão 0.5 do plugin. Fique ligado.

    Ainda não tenho uma data certa de lançamento, já que estou em final de período na faculdade, e o “bicho tá pegando”.

    Um abraço.

  5. Ola gente!

    I’m Finnish so sorry about the english. I just loved to see that a jQuery version of Lightbox was out but, i found a minor bug in it.

    I had three categories of photos on the same page, and after the user had browsed through all of the photos or some times randomly, the plugin messed up the photo categories. The user was going through Gallery2 and suddenly photos from Gallery3 was being displayed, and the plugin had jumped into the Gallery3, as the amount of photos was different.

    I was in great hurry so i replaced the plugin with the original Lightbox and everything was ok.

    I had three div’s #gal1, #gal2, #gal3, all of them had links to the images, and i triggered the lightbox with the most simplest of examples you had provided on this site.

    Keep up the good work! :)

    Ate a proxima ;)

  7. Hi Henryk,

    Thanks for the contact.

    If you want to create three, or more, galleries. You need to procede in this way:

    $(function() {
    $(‘#gal1 a’).lightBox();
    $(‘#gal2 a’).lightBox();
    $(‘#gal3 a’).lightBox();
    });

    Regards.

  8. tenho uma página galeriafotos.php q é chamada dentro de um iframe de nome e id igual a “conteudo”
    js dentro do galeriafotos.php:

    $(function() {
    $(‘.lightbox’).lightBox();
    });

    o lightbox funciona, sendo q só dentro do iframe.

    Oq teria q fazer? tem a ver com releitura do DOM?

  10. Hello,

    I’m afraid I’ll have to write English, as my Portuguese level is close to nil.

    I want to have a different href (to go to a real html page, with next and prev buttons and all that jazz) that the url for the full size image.

    Is there an option for that ?

    I’ve seen an example there:
    they have an option to use target for the jpeg/image uri and href for the page
    http://www.ibegin.com/blog/p_ibox.html

  13. Excuse the English post… its all I’ve got for now ;-)

    Can you provide the needed change to show the prev/next buttons all the time, instead of just on hover?

    I usually do this with the regular lightbox – this is the first time trying your jquery plugin. I like it a lot! But for my links to show all the time, I tried modifying both css and javascript, with no results.

  14. Hallo,
    i realy like your plugin for jQuery. It is exactly what i was looking for.

    Unfortunately i use an openBrWindow call in an onClick event on the img tag itself to open images. So your standard code is not working for me.
    I have modified your _start function to be able to handle my specific cenario. But after your work is licenced under a Creative Commons Attribution-No Derivative Works 2.5 Brazil License i’m ascing you if you will allow me to do so.

    Regards.

  19. Olá Leandro e Pedro,

    Uma dica sobre o caso do Iframe é este plugin aqui:
    http://www.dolem.com/lytebox/index.htm

    O autor fez ele para funcionar com ou sem Iframe, basta utilizar ou não o css q ele criou na pagina “_parent”.

    Mas estou tendo problemas com minha versao do FF (2.0.0.11), mas no IE 7, tranquilo.
    Lá diz q FF 1.5+ já daria… bom, sei lá.

    Mas tae a dica.
    abraços

  20. This plugin is wonderful! I love jQuery and Lightbox, and I’m glad they work together so well! Thank you!

    One suggestion, though: when the user clicks on a thumbnail to get the full-size image, right now that image download request gets pushed to the back of the download queue. That means that if the user clicks before the gallery of thumbnails is fully loaded, he/she has to wait until all the thumbnails download before the full-size image downloads. Can you make the image download immediately, so that you don’t have to wait? Thanks a lot!

  22. Muito bom esse plugin parabens!
    so que estou com problema..

    Estou usando a versao 0.4 e nao consigo configura as variaveis overlayBgColor, txtImage, fiz como voce falou coloquei no index.html o seguinte codigo:

    $(function() {
    $(‘a[@rel*=lightbox]‘).lightBox({
    overlayBgColor: ‘#FFF’,
    overlayOpacity: 0.6,
    containerResizeSpeed: 350,
    txtImage: ‘Foto’,
    txtOf: ‘de’
    });
    });

    até mudei o valor das variaveis dentro dos arquivos jquery.lightbox-0.4.js e jquery.lightbox-0.4.min.js mas nao adiantou.. Agradeço a ajuda

  23. Olá,
    nem vou comentar sobre a excelência da jquery lightbox, pq já está batido!! Na nota de release, existe a referência para a solução de um bug >
    Eu estou com esse problema, como é que se resolve então, alguém poderia me ajudar ??? estou usando funções jquery ajax para carregar um .php que tem uma galeria de imagens, aí o jquery lightbox não funciona nem no FF nem no IE… OBg!!

  24. Olá Nando,

    Acredito não ser um bug no jQuery lightBox plugin e sim na forma como você está o chamando.

    Como a inclusão é via Ajax, você deve chamá-lo após essa ocorrência, de forma que os objetos estejam na página. Por exemplo:

    $.post(….., function(ajaxReturn) {
    $(‘….).lightBox();
    …

    Abraços

  25. Olá Leandro,
    eu desconfiava sim que era isso, então como vc sugeriu passei a chamar a função da lightbox como callback mesmo e funcionou direitinho!
    alert(‘Obrigada!!!’);
    só que eu estou usando $(“…”).load(“…”,callback); Tem menos de uma semana que eu ‘descobri’ a jQuery e já estou achando ótima!!
    PS: sou Nanda mesmo, acredite, sou menina!

  26. Hello,

    First, Congratulations !
    Then my need ;-) : I need to implement your plugin in several languages. In this situation, the images ‘next’, ‘prev’… have to be translated. I managed this by adding a language directory found by a cookie in the path to the images but for the text elements (txtOf and txtImage) as well as for the keys to “close”, “next” and “previous”, I just found what I guess is an inelegant way to achieve it :

    if(lng==’en’){settings.txtOf=’of’;}
    if(lng==’fr’){settings.txtOf=’de’;}
    if(lng==’de’){settings.txtOf=’von’;}
    …
    It works but a built-in language management could be something interessant for this plug-in, don’t you think ?

    Regards,

  27. Olá Leandro

    Estou usando o jQuery há uns 6 meses e estou realmente gostando muito. Quanto ao plugin, achei muito bom e estou pensando em adotá-lo também, assim como fiz com o jQuery. Só me fala uma coisa, você pretende implementar mais coisas? Por exemplo, a possibilidade de abrir um formulário para preenchimento do usuário? Estou reformulando a Intranet da empresa e isso seria muito bem vindo.

  32. estou usando o lightbox.. e está funcionando perfeito,. mas tem uma coisinha que está me incomodando.. no IE7.. aquela parte escura do fundo.. ela não vai até o final da tela.. eu uso uma resolução 1280×800.. e fica um pedaço sem a parte escura na parte de baixo.. eu verifiquei o CSS.. mas não consegui arrumar.. se puder me dar uma ajuda..

  33. eu verifiquei que mesmo diminuindo a resolução.. continua “faltando um pedaço” na parte de baixo…
    Obrigado

  34. Preciso abrir diretamente uma imagem sem precisar clicar no link para isso.
    Esse recurso será usado para que a pessoa possa passar para um amigo o link direto para a imagem dentro de uma galeria, sem precisa procurar foto por foto.

    Qual a melhor maneira de fazer isso?

  35. Leandro, estou com um probleminha com o IE 6! Apliquei o Lightbox em uma galeria de fotos aqui e funcionou no FF 2.0.0.15, no IE 7 mas nao funcionou no 6… Ele da o Fade na tela mas nao aparece o box com a imagem, simplesmente fico com a page sombreada e nada alem disso, clico fora e o fade desaparece normalmente como nos outros! Será que tem solução pra isso ou no IE 6 nao funfa?

    Outro problema que dá eh o fade nao ir ate o fim da pagina no ie7 e opera, mas creio q isso seja algo limitando o tamanho aqui no meu site…

  36. Boa tarde Leandro,
    ótimo o plugin, porém ainda estou me debatendo para implentá-lo junto ao ASP (nativo), quando clico na imagem, trava o browser e todas as aplicações que estão sendo executadas.
    Será que alguma incompatibilidade, tem idéia do que possa ser?

    Att,
    Felippe.

  37. o lightbox tem algum bug com selects?

    tenho 2 select na pagina e sempre que o lightbox entra ele some

    alguam dica?

    Obrigado
    thiago

  38. @felipepem – a relação do plugin é com a marcação HTML e não com sua linguagem server-side (ASP).

    @thiago – Quando o lightbox é exibido os selects ficam ocultos e são exibidos quando ele “desaparece”. É uma alternativa para se dar bem com o IE.

  39. E ae Leandro, tudo blz?
    hehe estou cursando facul de WebDesign no interior de
    São Paulo 4°termo ,e estava precisando do plugin lightBox mas não tem link pra baixar ,seria possível da uma arrumada ou se nao for encomodo mandar anexado em um e-mail ,seria grato.
    hehe mas só tenho a agradecer pelas força que vc entre outros tem dado aos que estão começando!valew mano… Deus te abençõe

  40. This is an excellent plugin!

    I’m trying to open an image automatically when the page loads. How could I call this script to do it?

    Thank you for any help in advance.

  41. Oi, gostaria de saber se o suporte a iframe foi implementado e como resolver um problema quando a imagem e menor que o conteúdo da parte inferior, no Firefox ele simplesmente quebra o que seria normal porém no Internet Explorer ele cria scroll e fica muito ruim… existe uma forma do Internet não criar scroll

  42. Estou tendo problemas com o lightbox também com o IE7.
    Testei no FF 3.02, Opera 9.5, Google Chrome, IE6 e IE7.

    Apenas no IE7, o overlay nao preenche toda a pagina, fica mais ou menos na metade da imagem que se abre.
    Alguem ja descobriu o que pode ser?

    Abração!

  43. I’m yet another person who doesn’t speak Portuguese.. Hope you don’t mind!

    I keep all my javascripts in a sub diretory called “javascripts”. However jQuery.lightbox doesn’t find the pictures (next, prev, close) anymore when I do that.

    I think if you would set the pictures as background images in the css it would be relative. Meaning that it would find all the icons wherever I put the javascript..

  44. Just saw that there are some nice properties I can override.. Means I have to override pretty much all of them but this way I’m free to use my own icons. Guess this is the best way!

  46. Hi!
    You hav a bug in IE6 – the next button is going left in double width of border around image.
    To prevent it I’ve added next:
    $(‘#lightbox-nav’).css({width:intWidth});

    in the “function _resize_container_image_box” before the line:
    $(‘#lightbox-container-image-data-box’).css({ width: intImageWidth });

    Good luck.

  47. Olá Leandro, primeiramente gostaria de parabenizá-lo pelo belo trabalho, já na vs. 0.5. Excelente!
    Situação: Na galeria que estou fazendo, os nomes das fotos estão em um BD e utilizo o recurso de paginação do dreamweaver para limitar o espaço que os thumbs ocuparão na página. Na execução, quando clico num deles, ao carregar o efeito (overlay), os comandos NEXT e PREV só reconhecem as fotos da paginação atual, fazendo com que o usuário tenha que sair do modo visualização sempre q terminam as fotos da página. Ou seja, se tenho um limite de 5 thumbs e tenho 20 fotos, o efeito só reconhece as 5, depois as outras cinco, etc.
    Pergunta: Onde o script jquery.lightbox-0.5.js pega a quantidade de fotos a serem exibidas? É possível fazer com que ele reconheça o total de registros? Sou leigo em javascript… :(

  48. Opa, tudo bom? eu uso o lightbox em alguns casos mas estou com problemas, talvez um problema que todos que usam essa ferramenta já tiveram.
    Tipo, no IE, quando exibo o lightbox a overlay nao fica por cima da pagina toda, ela apenas fica do tamanho exato da screen, e se eu descer a barra de rolagem a overlay nao acompanha, a parte que eu descer fica com fundo branco.
    Alguma idéia de como resolver isso?

  49. Olá Leandro td bem?
    Estou usando a versão 0.5, estou desenvolvendo uma galeria de produtos via BD no MySql, o primeiro resultado ele funciona, mas a partir do segundo a imagem abre direto no navegador!

    olha como eu fiz:

    $consulta = mysql_query(“SELECT * from produtos”) or die (mysql_error());
    while ($num_rows = mysql_fetch_array($consulta)) {

    $codigo = $num_rows['cod'];
    $identificacao = $num_rows['id'];
    $nome = $num_rows['nome'];
    $descricao = $num_rows['descricao'];
    $aplicacao = $num_rows['aplicacao'];
    $imagem = $num_rows['imagem'];
    $link = $num_rows['link'];

    echo ‘

    ‘;

    echo ‘Produto‘.$nome;
    echo ‘Descrição‘.$descricao;
    echo ‘Aplicação‘.$aplicacao;
    echo ”.$link;
    }
    }
    ?>