Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

faguinho

Problema Lightbox com vídeo

Por , em Desenvolvimento frontend

Recommended Posts

faguinho    0

faguinho
Postado

Pessoal, beleza?

 

Estou precisando de uma ajuda de vocês com o light box que estou tentando implementar no meu site, para exibir vídeos. Já realizei testes em uma página demonstração e tudo funciona, porém quando adiciono o código a mínha página, não consigo ter sucesso.

 

Meu site é em HTML5 Responsive.

 

Segue o código entre o head:

<head>
<!-- Video Lightbox Youtube -->
<link href='assets/video/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='assets/video/shadowbox/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
handleOversize: "resize",
modal: false
});
</script>
</head>

 

 

 

Código entre o body

<body>

<div class="members_carousel animatedParent" data-sequence="400">
            <figure class="animated fadeInLeft" data-id="1"> <a title="Teaser Gean Ramos" href="https://www.youtube.com/embed/RzKpusj0xn4?list=PLdJ-c469BlTdqibMaG_MSuSyySF7eNyWH" rel="shadowbox; width=480;height=385"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Teaser Gean Ramos" border="0" alt="" src="assets/img/team/member-1.jpg" /></a>
            </figure>

</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Faguinho,

Primeiro, vamos a uma recomendação: Coloque todos os scripts da sua página no final de <body>. Você pode entender o porquê disso no link abaixo.

Quanto ao seu problema: O Lightbox precisa de jQuery pra funcionar e no seu HTML você não está chamando ele em momento algum. Faça o seguinte:

<head>
	<!-- Video Lightbox Youtube -->
	<link href='assets/video/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>
</head>
<body>

	<div class="members_carousel animatedParent" data-sequence="400">
		<figure class="animated fadeInLeft" data-id="1"> <a title="Teaser Gean Ramos" href="https://www.youtube.com/embed/RzKpusj0xn4?list=PLdJ-c469BlTdqibMaG_MSuSyySF7eNyWH" rel="shadowbox; width=480;height=385"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Teaser Gean Ramos" border="0" alt="" src="assets/img/team/member-1.jpg" /></a>
		</figure>
	</div>

	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src='assets/video/shadowbox/shadowbox.js' type='text/javascript'></script>
	<script type='text/javascript'>
		Shadowbox.init({
			handleOversize: "resize",
			modal: false
		});
	</script>
</body>

Esse é seu código HTML. Só ajustei e coloquei o script do jQuery e os seus logo abaixo.

Obs.: Você cometeu alguns erros ao estruturar esse HTML. A div não estava fechada, o script também não estava fechado. Tentou usar o self-close numa tag script, o que é errado. Estude estrutura e validações HTML primeiro, depois comece a dar passos mais largos.

Teste isso e veja se funciona.

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

faguinho    0

faguinho
Postado

Henrique, beleza?

 

Obrigado pela ajuda.

 

Porém continua não funcionando, na verdade as falhas que vc mencionou do div e script foi falha minha na hora de colocar o código aqui.

 

Fiz do jeito que me recomendou, porém continua não funcionando. Ao invés de abrir o efeito, ele está linkando a imagem e abrindo o video em outra página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Opa Faguinho, tudo certo e contigo?

Então é o seguinte... Abra o site do shadowbox novamente e veja se todos os arquivos que precisa realmente estão dentro do seu site e estruturados da forma que a documentação explica.

Se eu não me engano, com o LIGHTBOX (Não o shadow), quando você cria um elemento de imagem, você precisa referenciar os data no link. Exemplo:

<a href="link-da-imagem" data-title="titulo-da-imagem" data-lightbox="id-galeria">
   <img src="imagem" class="#" alt="#">
</a>

Se quiser ver se funciona, faça um site do 0 e hospede no mesmo local onde está o seu agora e replique a documentação do shadowbox lá dentro da melhor forma possível. Se funcionar, então existe algum erro no código do seu atual que esteja interferindo no funcionamento.

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

faguinho    0

faguinho
Postado

Henrique, valeu a ajuda!

 

Consegui resolver aqui. Tirei a referência de DIV CLASS da "members_carousel animatedParent" e funcionou sem problemas.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito