Saudações meus queridos, vamos com mais uma vídeo aula de Ajax com jQuery. No curso criando um site profissional aprendemos a usar a lightbox 2, que é um plugin do framework prototype.
Nesta vamos ver o plugin Shadowbox, que pode ser usado com qualquer plugin. E vamos usar o jQuery e o SB para abrir vídeos, imagens e páginas com efeito lightbox nesta aula!
Espero que gostem, deixo um grande abraço e o link para os SCRIPTS. Até logo!
muito legal suas aulas
aprend muito …vlw
Cara, mandou bem nessa vídeo aula, muito show. Esse shadowbox é muito flexível. Estava consultando as opções de uso e queria fazer como você fez na vídeo aula só que, quando clicar no link puxar no box o conteúdo de uma DIV, achei lá o comando “content” mas não estou conseguindo fazer desse jeito que te falei, será que tem como?
Abraço, vlw!
@Mauro Galvão: Fala querido, é possivel sim, deixo um exemplo pra você!
<a rel="shadowbox" href="#upinside">Abrir Div</a> <div id="upinside" style="display:none;"> <div id="up_content" style="color:#FFF; padding:10px;"> Todo conteúdo a mostrar na div da galeria vai aqui! </div><!--upinside--> </div><!--up_content-->Muito obrigado Robson, já implementei aqui e está funcionando certinho, “pena” não funcionar no IE 6 e 7. Se você souber de alguma janela modal ou box que puxe conteúdo através de Divs igual esse que foi feito, por favor me indique se puder.
Abraço!
Esqueci de falar, o modal ou box que pedi pra indicar tem que funcionar no IE 6 e 7, Vlw!
bom e outra coisa que não é nessesario ser em php =d
eu uzo o lingthbox no meu site
complexdesigner.hd1.com.br
Essa samana vo compra minha ospedaguem com a UPINSIDE HOSPEDAGEM DE SITES ja estou desenvolvendu um dinamico aqui
@Mauro Galvão: Ela funciona no IE6 e 7 meu querido. Só cuide pra não deixar virgula desnecessária na chamada do script! Veja abaixo!
<script type="text/javascript"> Shadowbox.init({ language: 'pt', player: ['img', 'html', 'swf'] <!-- AQUI SEM VIRGULA --> }); </script>Se estiver com virgula o Ie6 e 7 fazem a leitura tentando encontrar outro parâmetro, quando não encontram da o erro! Basta remover a ultima virgula
Eita, essa eu não sabia não rapaz, pior que essa vírgula faz toda a diferença mesmo, funcionou de boa no IE 6 e 7 com a retirada da vírgula. Obrigado pelo esclarecimento da dúvida.
Abraço!
Show de bola!
CARA ADD ESSE SHADOWBOX PARA CARREGAR UMA PAG EM PHP SÓ Q O FUNDO DAS PÁG TÃO APARECENDO PRETOS E OS LINKS DE TRAIS TÃO SENDO POSSIVEL ACESSAR POR CIMA DA SHADOWBOX MESM.
?
Nossa muito show em robson muito bom entao eu te mandei umas duvidas sobre uma video aula q tu poderia fazer velho tbm sobre o http://highslide.com/ tem com tu fazer um tutorial ensinando a mostrar as fotos etc…
Muito Bom!, Show de Bola, tava procurando aprender como era que fazia esse plugin, vc tah me ensinando várias coisas legais ^^, vlw ae, e belo site!
Ai Robson agradeço mesmo ai por mais essa dica!
Obrigado Robinson, valeu mesmo!!!
No meu caso funcionou tudo certinho, só que aparece a seguinte mensagem de erro na barra de status do navegado:
Mensagem: ‘script.parentNode’ é nulo ou não é um objeto
Linha: 34
Caractere: 713
Código: 0
URI: http://174.142.97.164/~iagnusb/shadowbox/shadowbox.js
Para acessa: http://www.edertondesigner.com.br/iagnus
O que pode ser isso? tem como consertar?
Cara, eu uso o Shadowbox ja faz um tempo.
Mas ainda não consegui fazer abrir a div =/
Será porque eu to usando outra base e não jQuery?
Porque a tela ate escurece, mas nao abre nada =/
Olá,
O link do shadowbox está dando pau e não tá dando pra baixar.
Tem como vc disponibilizar esses arquivos em algum lugar pra baixar?
Valeu e parabéns!
Como sempre, suas videos aulas dispensam comentário, são todas excelentes.
Comigo aqui não funcionou nada, copiei “exatamente” sua video aula sem mudar nada,não funcionou nem no IE8 e nem no Firefox! .
Tem algum arquivou ou sei la algum dll no pc que esta faltando e não faz funcionar?
Abraços
Grande vídeo aula, isso é ensinar a pescar
Funciona no IE 8 sem problemas, só não funciona em IFRAMES ou FRAMES, funciona perfeito com a função $_REQUEST do PHP no IE, aconselho usar a biblioteca JQUERY e SHADOWBOX junto com o site e não On-Line, chamando a função desta maneira:
Shadowbox.init();
Olá Robson, muito show sua video aula, fiz e funcionou tudo certo, mas estou com um problema no ie8 pois quando abre o site com o efeito da shadowbox, o body não aparece todo na tela portanto se aplciar esse efeito em um link muito embaixo eu tenho que subir na barra de rolagem para visualizar o efeito.
Já no Firefox e Chrome aparece perfeito, se tiver um link no final da página com o shadowbox, o efeito é carregado exatamente onde está o link, não preciso ir até o topo para visualizar o arquivo.
Veja de pode me orientar em como alterar o height do body para o ie7 e 8.
Aí Robson essa pergunta que te fiz acima eu já resolvi, agora estou com outra dúvida como acertar os erros de caracteres da paginação das imagens ( Quando colocamos o Vocation, em português nas setas Anterior e Próximo, no próximo está dando erro de acentuação, já pesquisei em tudo e até agora não achei a solução.
Sabe como resolver isso.
Obrigado pelo tuto.
Fiz da forma que você explicou na vídeo aula e funcionou no FireFox 3.5+ e Internet Explorer 7+!
Mas no Chrome não está funcionando… Teria alguma coisa que eu possa fazer???
Shadowbox.init({
language: ‘pt’,
player: ['img', 'html', 'swf']
});
@Eduardo: remova a última virgula!
Shadowbox.init({
language: ‘pt’,
player: ['img', 'html', 'swf']
})
Quero Saber uma Duvida Qual É o Editor de htmls?
Robson, vc ñ tem noção do galho q me quebrou com esse video. vlw.
Legau de mais esta video aula ensina tudo direito passo a passo gostei mesmo mais
(((eu gostaria de abri a Shadowbox dentro de uma div específica de meu site isto é possível?
E como eu faria isto?)))
Cara, valeu!
Muito bom
Gostei muito da video aula mas estava precisando de fazer uma galeria shadowbox dinamica com banco de dados tem jeito?E dentro de uma div.O site só troca a parte do meio
Boa tarde! Comigo não funcionou no IE… no Firefox e Chrome sim… o que posso fazer? Obrigada!
cara, valeu mesmo!!!
vc salvou meu site……rs
muito obrigado
Cara, adorei o tutorial! Valeuzão!
Cara mato a pau nessa video aula .. muito boa mesmo parabens ..
Soh fikei com uma duvida .. pra usar a opção de arrastar a img “drag” como eu faço?
grande abraço
Obrigado Deus por ter feito o Robson ,cara muito massa essa aula ,vc tem um dom pra explicar vei muito boa a aula nota 100000000000000000000000000000000000.
Abraço!
Cara, sem brincadeira, sou leigo em programação e segui seu passo a passo, FUNCINOU PERFEITAMENTE. Gostaria sinceramente de te parabenizar pelo ótimo conteúdo e pelo trabalho colaborativo que faz na rede. PARABÉNS E OBRIGADO MAIS UMA VEZ. Acabou de ganhar um fã.
Estou fazendo um site que o cliente msm quer fazer as atualizaçoes e ele só manja o HTML, to na luta de fazer td em HTML, só falta a galeria de fotos, fiz ela com jQuery e Shadowbox, conforme o tutorial dessa pagina, porem tenho que joga-la em iframe, mas ela só abre na area do iframe, gostaria que ela abri-se em toda pagina, alguem pode me ajudar por gentileza.
OBS.: PARABÉNS PELO O TUTORIAL, FANTASTICO
Legal…. Como faço para abrir vários videos. Ou seja que apareça vários videos e o usuário escolher um e ver.
Show de bola esse video aula, eu preciso criar algo parecido com a tua video aula so que gostaria de saber se ao inves de vc clicar nos links teria como abrir de forma automatica o efeito sem precisar clicar nos links. Obrigado
Olá… segui os passos desse tutorial e consegui fazê-lo funcionar! Porém, algo que não entendi bem é que, determinados links não carregam as páginas HTML. Links como meu perfil do Facebook, You Tube, Picasa e Twitter não abrem. Ficam com uma tela escura e não sai disso. Outros links como LinkedIn e Blogger está carregando normalmente.
Como corrigir o problema?
Buenas, Robson!
Primeiramente parabéns pela Vídeo Aula!
Olha só, estou desenvolvendo um site e possuo nele alguns includes e iframes.
A função da da shadow estta ok(realiza o efeito), só que por algum motivo esta fazendo o efeito somente no topo do site, exatamente onde tenho um include.
Pergunto, há uma solução para isso?
Link do projeto: http://www.aguiaazul.net.br/galeria.php?id=14
Atenciosamente,
Róger
@Róger: Pra min funfo normal oO
Caraca muito bom o tuto,
estou num projeto e a 2 dias testando algumas galerias para exibir videos
e nao obtia sucesso e agora em menos de 10 minutos ja esta no ar.
só que estou utilizando varios videos puxados do banco de dados
e a maioria funcionava somente no 1º link
ola amigo, como tirar o fundo preto e colocar branco?
mt obg
fala Robson!!
venho acompanhando várias video aulas suas, e sempre funfo certinho em meu site,
só q dessa vez, coloquei em meu site mas num da certo!
quando clico no link, ao inves de abrir com o efeito lightbox, abre os videos e em tela cheia.
já hospedei os arquivos em .css e em .js na internet para dar td certinho, pq direto do meu browser num funciona, só q mesmo assim num dá em nd, só acontece oq citei acima.
está tudo neste link q é uma página de testes>>
http://www.worldofskate.com.br/logo/
vc pode me dar uma força por favor?
obrigadão mesmo ai.
ah! e outra coisa.
só está funfando no Firefox 4.
No IE9 e no Google Chrome não
@Guto Sanches: na inicialização do plugin no seu head, veja se o último comando esta com “;” se sim remova e teste.
como fazer a galeria abrir por cima da pagina, sendo que a galeria esta no iframe
Robson, boa tarde mestre!
Seguinte: Parabéns pela video aula. Show de Bola.
Porém não to conseguindo fazer a integração desse efeito com a galeria swf do meu site.
Pois na video-aula, vc utilizou um index.html
E no meu site, em php, eu utilizo os meus swfs em uma listagem desordenada, ul – li.
Pode me ajudar a fazer essa integração.
PS: graças a sua grande ajuda é que meu site está no ar hoje.
Obrigado
Pessoal estou usando o shadowbox para abrir uma página de pesquisa, o funcionamento é o seguinte, tenho um página com dois campos e um link ao clicar no link abro a página de pesquisa com shadow, nessa página é feitra a escolha de um nome após clicar nele gostaria de atualizar a caixa de texto da página que chamou o shadow, alguem sabe como devo fazer?
Robson, desculpe-me por estar te enchendo, mas eu fiz oq vc falo acima, e num deu em nd, continua sem funfar, quer dizer, soh funciona msm no Firefox 4, no Google Chrome e no IE9 não.
se puder me dar mais uma ajudinha ai amigo, te agradeço mto msm.
Se vc tiver alguma idéia do q seja, por favor me diga, preciso mto desse efeito.
@Guto Sanches: tenta inicializa o shadowbox assim:
</script> <script type="text/javascript"> Shadowbox.init({ language: 'pt', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'], }); </script>Veja se não existe outro aplicativo java incluso em seu projeto. Usar 2 frames pode ocasionar em conflito e o jQuery para de funcionar!
Robson a minha janela não fecha no icon X. O que será? Também queria saber se é possivel que essa janela tenha o tamaho de acordo com o conteudo.
Adorei sua video aula muito boa vc esta de parabens, gostaria de saber se vc sabe fazer o efeito page flip com o jquery e como se faz? tem como fazer isso?
boa tarde gostei muito deste plugin do jQuery vou acrescentar em alguns dos meus trabalhos, pois gosto muito de usar o jQuery, parabens pela video aula.
aproveito para perguntar o seguinte: vc tem alguma video aula publicada que mostra como fazer upload multipos e resize de imagem com php, consigo fazer eles separados, mas nao os dois ao mesmo tempo
Olá, publiquei um problema que ocorre em determinado carregamento de websites dentro do shadowbox. Ainda não consegui resolver esse problema (se é que tem como). Gostaria de saber se alguém teve esse problema e se conseguiu resolver?
Grato quem puder me ajudar!
@Daniel: adicione o seguinte codigo:
<script type="text/javascript"> Shadowbox.init({ language: 'pt', players: ['img', 'wmp', 'swf', 'flv'], }); </script>Olá amigo eu vi uma video aula sua sobre shadowbox e fiz para meu site, oque ocorreu foi o seguinte do lado esquerdo das imagens que estão pegando o efeito shadowbox a uma div
com videos com efeito cycle, com o navegadoe firefox 3.5 abre perfeitamente a imagens sobre todas as divs, ja com crome e explorer, não abre por sobre a div que esta o video entende a imangem entra dentro da div e fica metade escondida atraz do video oque fazer para resolver isso
amigo?
Olá Robson gostei muito desse plugin eu usava o Lightbox e agora mudei para o shadowbox e gostei muito, porem eu tenho uma duvida quando clico na imagem o fundo escurece para dar destaque na imagem que vai aparecer tem como diminuir a claridade do fundo pra poder ficar com mais destaque a imagem que vai aparecer valewwww….
Olá Robson, gostei muito deste topico, e fiz uma página de comentários onde o form é aberto dentro do shadowbox, e quando o usuário clica em enviar vai para a pagina de de envio do form. O que gostaria de fazer é apos a confirmação do envio fechar o shadowbox e atualizar a página atual. Tem como fazer isso
Parabéns cara!! Mto bom.. Sempre acompanho a UpInside e está cada dia melhor!!
Abraço!
Opa! Muito obrigado pela video aula..só não sei uma coisa, e precisava aprender.
Queria que ao abrir o site, automaticamente abrisse uma shadowbox com uma imagem..um anuncio, no caso.
Poderia me explicar como fazer?
Brigadão!
Simples assim, ele clica no link:
window.onload = function(){ document.getElementById("ID do link").click(); }Parabens pela video-aula!mt boa, Mas tenho uma duvida, no site que estou criando, uso o shadowbox numa pagina de agenda de eventos, onde tem varios elementos (miniaturas) que quando se clica, abrem com mais informaçoes pelo shadowbox. Quero adicionar o link “curtir” do facebook dentro do conteudo, aberto no shadowbox.. Ate ai td bem, só que seria interessante que quando uma outra pessoa, clicar no link divulgado dentro do facebook, quero que ela caia na página agenda, com o shadowbox aberto, referente ao link dela (e não a pagina do evento em si avulsa). Espero ter sido claro na minha duvida. Obrigado e parabens ai
Oi Robson…
Blz Robson, show de aula.
Cara como eu faço para colocar aquelas “setas” abaixo da shadow para mostrar outras imagens?
Eu vi no site do shadowbox, eu li no site, mas não consegui.
Valeu mano!!! Fique com Deus.
Blz Robson, show de aula.
Cara como eu faço para colocar aquelas “setas” abaixo da shadow para mostrar outras imagens?
Eu vi no site do shadowbox, eu li no site, mas não consegui.
Valeu mano!!! Fique com Deus.
@Fabio Rodrigo: Você tem que determinar o grupo de imagens para que ele reconheça como galeria, rell=”shadowbox[galeria]“. galeria seria o identificador do grupo, todas as imagens com esse identificador serão paginadas em uma shadowbox!
Bom dia, eu configurei o shadowbox, deu tudo certo, porem eu gostaria de o video já sair rodando, percebi que dentro do shadowbox.js ele ja estah setado como autoplayMovies:true, há alguma outra coisa que posso fazer para ele iniciar assim que clicado no link? Desde já agradeço.
Tenho uma duvida, se eu quiser abrir o shadowbox dentro de uma div ela abriria só na div ou na tela toda?
Olá Robson, meu querido.
Fiz um outro site acompanhando as video-aulas do curso em DVD e está funcionando uma maravilha com o painel de gerenciamento e tudo mais no Firefox e Crome, exceto no famigerado Internet Explore, vrsões 8 e 9. Neste está ocorrendo erro na galeria de imagens usando o plugin jquery fancybox (a imagem aparece crua, sem o efeito) e naquele, o menu dropdown não aparece. Se você puder acessá-lo pra constatar os erros e posteriormente me dar uma mãozinho, agradeço! Este novo site está hospedado no subdomínio do meu site: http://www.vhouse.com.br/renerfranco
Querido, meu site carrega o conteúdo em uma determinada div, ou seja, a imagem que quero abrir em lightbox está em um arquivo próprio que não é o index e será carregado em uma div do index, nesse caso o shadowbox não funcionou, você poderia me dizer se tem como fazer?
Muito bom! Aprendi muito, valeu!
Como faço para que abra automaticamente a shadowbox quando abrir o site. Tipo, quero que quando a pessoa entre no meu site abra a shadowbox automaticamente para que ela veja um vídeo sem a necessidade de clicar no link que é gerado. Também gostaria de saber como fazer para o vídeo rodar automaticamente sem a necessidade de apertar o play. Grato, ótima vídeo aula!
Parabéns Robson, muito bom.
Funcionou beleza. Tenho uma pergunta e vou fazer pq tentei de tudo e não consegui. Como tirar a barra de rolagem da página html que abre dentro do shadowbox?
Grande abraço
Está aí, a quantidade de comentários nesta página mostra a qualidade desta aula. É a melhor que eu encontrei sobre lightbox. Só tenho a agradecer.
Oi Robson,
Cara não sei se você vai saber, mas como eu faria para quando fechar a Shadowbox atualizar a página anterior? Pois quando eu abro a shadowbox e cadastro tenho que atualizar na mão para ver o resultado.
Valeu…
Estou usando o Shadowbox juntamente com a jCarouselLite, o problema é que no jCarouselLite tem apenas 2 imagens, quando clico em uma habilitando o Shadow na janela supensa duplica a quantidade de imagens e aparece: 1 de 4 ao invés de 1 de 2.
O que poderia ser?
Robson,
Não estou conseguindo fazer o download do Shadowbox. Tem como você me enviar por e-mail?
Grato
Kara gostei da aula, porém gostaria de saber se tem como retirar esse fundo escuro… tipo deixar so a imagem abrindo sem o fundo escuro… um abraço
OLá Luciano, o Shadowbox vem com um arquivo CSS. nele você pode alterar ester parametros!
Boa aula Robson! Só estou com uma dúvida e problema, quando o título que coloco no link é maior que a imagem ele não aparece todo, como posso resolver esse problema?
Ei, alguem sabe como faço para o vídeo que inicializa dentro do shadowbox, ficar sem a necessidade de apertr o play?
nao consegui ainda colocar um box do lado direito do lightbox para que possa colocar uma ficha tecnica da foto ou video.
Abrir PDF no shadowbox.
O shadowbox não da suporte para abrir PDF, segundo informações no site da shadowbox.
Com este script http://shadowbox.1309102.n2.nabble.com/file/n3700612/shadowbox-gdoc.js
e incluindo ‘GDOC’ no Shadowbox.init é possível abrir arquivos em pdf
abraços
Robson,
Preciso abrir fotos e videos com o shadowbox, mas com uma ficha tecnica do lado esquerdo desses elementos. uma ficha diferente para cada galeria.
Jairo Brasil,
antes de fazer o download voce pode configurar o que vai baixar la na pagina do shadowbox.
william,
no css do shadowbox voce pode mudar a cor do fundo e até deixa-lo transparente.
Funcionou em todos os navegadores, exceto no IE como sempre, então depois de pesquisar um pouco encontrei a solução:
No shadowbox.js localizar esta parte do código e remover
‘style=”visibility:hidden” onload=”this.style.visibility=\’visible\’”‘+
Depois encontre esta parte do código
win.location.href = this.obj.content;
e substitua por:
win.location = this.obj.content;
Com isso o IE abrirá o PDF dentro da shadowbox.
Mantenha a chamada dos dois arquivos, shadowbox.js (alterado para IE) e o shadowbox-gfoc.js (para os demais navegadores), que funcionará perfeitamente nos seguintes navegadores (pelo menos nos que eu testei): IE, Firefox, Opera, Chrome e Safari.
Fonte de pesquisa para alteração do arquivo: http://www.shadowbox-js.com/forum.html
Ao lado da imagem junto com a modal? cria um HTML com o modelo pronto e chama o HTML pela Shadow!
Olá, parabéns pelo tutorial!
Uma pergunta amigo.
Como eu faço para usar uma imagem de fundo no lugar do overlay com opacidade?
Abraço
Olá amigo, sua aula é muito boa como todos já falaram, agora uma coisa que estou quebrando a cabeça é: Como deixar os vídeos em miniatura, como esse seu, não consigo fazer isso, você poderia mim da alguma explicação, eu agradeceria muito..
Robson, eu estou utilizando o shadowbox para criar uma “galeria” de fotos, buscando as mesmas de um banco de dados mysql, onde se encontra os nomes das imagens. Porem ao buscar todas, ao invés de abrir a primeira, ele abre a última, sendo assim, tendo que ficar voltado, ao invés de avançar ! Gostaria de saber se teria como arrumar isto !
Excelente video aula, ta de Parabéns!
Olá, Robson, tdo bem cara? Meu suas aulas são muito boas, estou aprendendo muito contigo cara, estou construindo meu site com as suas aulas.
Mas estou com um pequeno problema na shadowbox. Ela está funcionando, mas ao abrir a imagem na shadowbox, abre somente metade da imagem, o que pode ser, aguardo sua resposta meu querido Robson.
Fico muito Grato!
Obrigado.
Fala Robson blz cara? Muito bom suas aulas, mas estou com um pequeno problema em minha shadowbox.
Ela está abrindo normal, mas ao abrir aparece na tela apenas metade da imagem.
O que pode ser?!
Desde já agradeço. Até!
Muito bom o tutorial.
É possível abrir uma foto usando esse efeito a partir de um arquivo SWF? Como ficaria a Action do botão?
Obrigado!
Show de BOLAAAAAAAAAAAAAAAAAAAAAA
Simplesmente…
Muito bom parabéns valeu….
Olá Robson, Parabéns.
Obrigada por compartilhar seus conhecimentos conosco.
Funcionou direitinho.
Só não estou gostando do IE como sempre não funciona conforme o esperado. Valeu mesmooo
Eu só consegui fazer o shadowbox funcionar para todas e para abrir o conteúdo só as fotos deram certo. De qualquer maneira, meus parabéns, tenho certeza que o meu caso deve ser alguma coisa boba.
Muito boa essa vídeo aula. Maravilha! Será que é possível indicar algum tutorial em português de como usar mais o Shadowbox? Tipo ser um usuário avançado desse plugin do JQuery?
Bom dia amigo.
O trem funcionou legal, o único problema é que eu uma página muito “alta” e o link para o vìdeo estando muito em baixo, ele gera o efeito no início da página. Vc sabe como resolver isso?
Se mais alguém souber eu agradeço.
At.,
[...] Vídeo Aula de Referencia: Abrindo imagens, páginas e vídeos com jQuery e Shadowbox! [...]
Olá Ronson!!! Parabéns pela vídeo aula!!! Estava instalando o plugin em um site de testes e estava meio complicado, após assistir sua V.A. ai descomplicou…
No Chrome e no FireFox funcionou corretamente… mas no IE9 trava… ele cria uma borda azul envolta das imagens e quando clicka na mesma, o site trava, o cursor perde a funcionalidade de acessar qualquer coisa na página, e só resolve se atualizar o navegador, mas ai nem pensar em clickar novamente nas imagens…rsrsrsrs
Já verifiquei os códigos, scripts do site, e controles activex do ie, java etc…
Não sei o que pode estar acontecendo, vc pode dar alguma dica?
Deixei o mesmo pedido de ajuda no:
http://www.upinside.com.br/codigo-pronto/abra-imagens-galerias-videos-e-paginas-em-efeito-lightbox
Grato pela atenção!
Olá Alexandre. tenho sim. Clique aqui!
Oi Robson, não sei se você sabe. Tem como tirar a barra lateral?
Obrigado