[Resolvido] Problema com .click

allex_carvalho · Outubro 7, 2011

Bom dia.

Estou com um problema com o .click. Estou usando ele para abrir o conteúdo de um link dentro de uma div. Vejam o código:

<div id="playerVideo">
               	<?php
					$obj->setTabela("multimidia");
					$obj->setCompararCampos("idMultimidia");
					$obj->setOrderBy("idMultimidia DESC");
					$obj->setLimit(0,1);
					$Qr = $obj->select();
					$Rs = mysql_fetch_object($Qr);
					$video = new incorporarVideo($Rs->linkMultimidia,$Rs->servidorMultimidia);
					$video->getVideo();
				?>
               </div><!--playerVideo-->
			<div id="outrosVideos">
               <?php
				$obj->setTabela("multimidia");
				$obj->setCompararCampos("idMultimidia");
				$obj->setOrderBy("idMultimidia DESC");
				$obj->setLimit(0,3);
				$QrNot = $obj->select();
				$totalRegistrosNot = $obj->totalRegistros($QrNot);
					if ($totalRegistrosNot > 0){
						while($RsNot = mysql_fetch_object($QrNot)){
			?>
				<p>
					<a href="?p=multimidia&id=<?=base64_encode($RsNot->idMultimidia)?>" title="<?=$RsNot->tituloMultimidia?>"><?=$RsNot->tituloMultimidia?>
                       	<img src="@img/ifCanal-camera.png" width="15" height="14" alt="" />
                       </a>
				</p>
                   <script type="text/javascript">
					$(document).ready(function() {
							$("#outrosVideos a").click(function(event) {
									event.preventDefault();
									$("#playerVideo").load($(this).attr("href"));
							});
					});
       			</script>

Quando clica no link para abrir o vídeo na div acima só fica a bagunça. Estou em dúvida quanto a estrutura do link, como deve ficar. Percebo que abre o link, porém, o conteudo completo. Lembrando que a função getVideo() está assim:

public function getVideo(){
	if ($this->servidor=="YouTube"){
		echo '<iframe width="325" height="202" src="http://www.youtube.com/embed/'.$this->link.'" frameborder="0" allowfullscreen></iframe>';
	}
	else {
		echo '<iframe src="http://player.vimeo.com/video/'.$this->link.'?title=0&byline=0&portrait=0" width="325" height="202" frameborder="0"></iframe>';
	}
}

Obrigado.

William Bruno · Outubro 7, 2011

Estou com um problema com o .click.

qual problema ?

Quando clica no link para abrir o vídeo na div acima só fica a bagunça.

e oq isso significa ?

explique melhor, se possível com imagens, pois pelo que entendi o teu problema é CSS.

allex_carvalho · Outubro 7, 2011

Bom dia William, pelo que vejo está abrindo a pagina multimidia.php completo ai dentro da div. Veja a imagem:

A dúvida é, teria que criar um outro arquivo só com o video ou dá para fazer o video abrir na div sem ter que criar outro arquivo?

Obrigado.

William Bruno · Outubro 7, 2011

ok.. isso é por causa do teu .load() ali.. completamente explicavel..

você queria clicar ali, e abrir só o vídeo, é isso ?

allex_carvalho · Outubro 7, 2011

Exatamente, veja o layout abaixo:

Ai quando clicar em algum dos 3 videos abaixo ele abriria no player mesmo. Sem carregar outra pagina.

Obrigado pela atenção.

William Bruno · Outubro 7, 2011

ok, então você deve fazer assim:

<a href="LINK DO YOUTUBE OU DO VIMEO" title="<?=$RsNot->tituloMultimidia?>"><?=$RsNot->tituloMultimidia?>

dessa forma:

<a href="http://www.youtube.com/embed/gaasd556">...

ok ?

e então:

$("#outrosVideos a").click(function(event) {
   event.preventDefault();

   var href = $(this).attr("href");
   $("#playerVideo").html('<iframe src="'+href+'" ...');
});

entendeu ?

allex_carvalho · Outubro 7, 2011

Bem... Mais ou menos. Para fazer o primeiro js me basiei num exemplo que achei aqui no forum, porque não sei muito js e php estou começando agora.

Veja minha estrutura completa da div videos:

<div id="videos">
			<h2>Vídeo Destaque</h2>
			<span><a href="?p=multimidia">+</a> </span>

			<div id="playerVideo">
               	<?php
					$obj->setTabela("multimidia");
					$obj->setCompararCampos("idMultimidia");
					$obj->setOrderBy("idMultimidia DESC");
					$obj->setLimit(0,3);
					$Qr = $obj->select();
					$Rs = mysql_fetch_object($Qr);
					$video = new incorporarVideo($Rs->linkMultimidia,$Rs->servidorMultimidia);
					$video->getVideo();
				?>
               </div><!--playerVideo-->
			<div id="outrosVideos">
               <?php
				$obj->setTabela("multimidia");
				$obj->setCompararCampos("idMultimidia");
				$obj->setOrderBy("idMultimidia DESC");
				$obj->setLimit(0,3);
				$QrNot = $obj->select();
				$totalRegistrosNot = $obj->totalRegistros($QrNot);
					if ($totalRegistrosNot > 0){
						while($RsNot = mysql_fetch_object($QrNot)){
			?>
				<p>
                   <?php if ($this->servidor=="YouTube"){
					echo '<a href="http://www.youtube.com/embed/'.$this->link.'" title="'.$RsNot->tituloMultimidia.'"'.$RsNot->tituloMultimidia.'</a>';
				}
				else {
					echo '<a href="http://player.vimeo.com/video/'.$this->link.'" title="'.$RsNot->tituloMultimidia.'"'.$RsNot->tituloMultimidia.'</a>';
				}
				?>
				</p>

                   <?php
						}
					} else {
						echo '<span class="error">Não existem dados cadastrados.</span>';
					}
				?>
                   <script type="text/javascript">
					$('#outrosVideos>p:nth-child(3n)').css("border-bottom", "0");   
				</script>
                   <script type="text/javascript">
					$("#outrosVideos a").click(function(event) {
						event.preventDefault();
						var href = $(this).attr("href");
						$("#playerVideo").html('<iframe src="'+href+'" ...');
					});
       			</script>
			</div>
		</div><!--videos-->

Agora não está aparecendo os titulos embaixo. Só o video dentro do player.

Obrigado.

William Bruno · Outubro 7, 2011

aqui nesse trecho:

$("#playerVideo").html('<iframe src="'+href+'" ...');

você deve colocar todo o html q você quer mostrar, assim como o restante do iframe.

é html isso cara.. leia, releia e entenda.

os ... ali, é pseudocodigo, deixei para você completar !!

allex_carvalho · Outubro 7, 2011

Então...

Tenho um if/else, no último código que postei ele está lá. Para ver qual é o servidor. Como eu vou inserir o resultado dele no javascript?

Obrigado pela atenção.

William Bruno · Outubro 7, 2011

não precisa !!! pensa bem.

independente do servidor, o iframe é o mesmo !!

se tiver com duvidas por causa dos outros parametros, ja faça o link com eles:

echo '<a href="http://player.vimeo.com/video/'.$this->link.'?title=0&byline=0&portrait=0" title="'.$RsNot->tituloMultimidia.'"'.$RsNot->tituloMultimidia.'</a>';

ta entendendo ? é facil cara.

allex_carvalho · Outubro 7, 2011

Mais independentemente do javascript ele não teria que aparecer o conteúdo? Veja só como está agora:

Obrigado (acho que agora pela paciência, rss)

William Bruno · Outubro 7, 2011

o conteudo só irá ficar desse modo ai, se você tiver erro de html.

analise o html e corrija.

assim q você abre fica desse modo ai ?

ou é depois q você clica em algum ?

allex_carvalho · Outubro 7, 2011

assim q você abre fica desse modo ai ?

ou é depois q você clica em algum ?

Ao abrir a index já fica com o erro, não preciso clicar em nenhum deles para os itens sumirem.

Obrigado.

William Bruno · Outubro 7, 2011

Então é erro de HTML.

básico, valide:

http://validator.w3.org

não tem mágica cara.

allex_carvalho · Outubro 14, 2011

Bom dia. Estou aqui de novo com o problema (acredito) quase resolvido. Agora ele não abre nada, fica no primeiro video quando clica em algum dos 3 links para trocar o video.

Fiz o player em arquivo separado, ficando assim:

player.php

<div id="playerVideo">
<?php
	require_once("painelQA+/@regrasNegocios/manipulaDados.php");
	require_once("painelQA+/@regrasNegocios/incorporarVideo.php");
	require_once("painelQA+/@regrasNegocios/funcoes.php");
	$obj = new manipulaDados();
	$obj->setCamposTabela("*");
	$obj->setTabela("multimidia");
	$obj->setCompararCampos("idMultimidia");
	$obj->setOrderBy("idMultimidia DESC");
	$obj->setLimit(0,3);
	$Qr = $obj->select();
	$Rs = mysql_fetch_object($Qr);
	$video = new incorporarVideo($Rs->linkMultimidia,$Rs->servidorMultimidia);
	$video->getVideo();
?>

E o arquivo que exibe o iframe e os links para abrir os videos dentro deste iframe:

<div id="videos">
			<h2>Vídeo Destaque</h2>
			<span><a href="?p=multimidia">+</a> </span>

			<iframe src="player.php" width="350" height="218"></iframe>
			<div id="outrosVideos">
               <?php
				$obj->setTabela("multimidia");
				$obj->setCompararCampos("idMultimidia");
				$obj->setOrderBy("idMultimidia DESC");
				$obj->setLimit(1,3);
				$QrNot = $obj->select();
				$totalRegistrosNot = $obj->totalRegistros($QrNot);
					if ($totalRegistrosNot > 0){
						while($RsNot = mysql_fetch_object($QrNot)){
			?>
               	<p>
                       <a href="?p=multimidia&id=<?=base64_encode($RsNot->idMultimidia)?>" title="<?=$RsNot->tituloMultimidia?>"><?=limitarTexto(strip_tags($RsNot->tituloMultimidia),43)?>
                           <img src="@img/ifCanal-camera.png" width="15" height="14" alt="" />
                       </a>
                   </p>

                   <?php
						}
					} else {
						echo '<span class="error">Não existem dados cadastrados.</span>';
					}
				?>
                   <script type="text/javascript">
					$('#outrosVideos>p:nth-child(3n)').css("border-bottom", "0");   
				</script>
                   <script type="text/javascript">
					$("#outrosVideos a").click(function(event) {
						event.preventDefault();
						var href = $(this).attr("href");
						$("#playerVideo").html('<iframe src="'+href+'"player.php"></iframe>');
					});
       			</script>
			</div>
		</div><!--videos-->

Obrigado.

William Bruno · Outubro 14, 2011

esse teu href está muito estranho.

acesse ele diretamente, e corrija até aparecer o video que você quer.

allex_carvalho · Novembro 17, 2011

Reabrindo o tópico porque voltei com o projeto e não obtive evolução.

Atualmente tenho um arquivo player.php na raiz (juntamente com o arquivo que vai ter o player)

<?php
class incorporarVideo {
protected $link;
protected $servidor;

public function __construct ($l,$s){
	$this->link = $l;
	$this->servidor = $s;
}
public function getVideo(){
	if ($this->servidor=="YouTube"){
		echo '<iframe width="325" height="202" src="http://www.youtube.com/embed/'.$this->link.'" frameborder="0" allowfullscreen></iframe>';
	}
	else {
		echo '<iframe src="http://player.vimeo.com/video/'.$this->link.'?title=0&byline=0&portrait=0" width="325" height="202" frameborder="0"></iframe>';
	}
}
}
?>

E a parte do player no site está assim:

<div id="videos">
			<h2>Vídeo Destaque</h2>
			<span><a href="?p=multimidia">+</a> </span>
               <div id="playerVideo">
                       <?php
                                               $obj->setTabela("multimidia");
                                               $obj->setCompararCampos("idMultimidia");
                                               $obj->setOrderBy("idMultimidia DESC");
                                               $obj->setLimit(0,1);
                                               $Qr = $obj->select();
                                               $Rs = mysql_fetch_object($Qr);
                                               $video = new incorporarVideo($Rs->linkMultimidia,$Rs->servidorMultimidia);
                                               $video->getVideo();
                                       ?>
               </div><!--playerVideo-->
                               <div id="outrosVideos">
               				<?php
                                       $obj->setTabela("multimidia");
                                       $obj->setCompararCampos("idMultimidia");
                                       $obj->setOrderBy("idMultimidia DESC");
                                       $obj->setLimit(1,3);
                                       $QrNot = $obj->select();
                                       $totalRegistrosNot = $obj->totalRegistros($QrNot);
                                               if ($totalRegistrosNot > 0){
                                                       while($RsNot = mysql_fetch_object($QrNot)){
                               ?>
                                       <p>
                                               <a href="?p=multimidia&id=<?=base64_encode($RsNot->idMultimidia)?>" title="<?=$RsNot->tituloMultimidia?>"><?=limitarTexto(strip_tags($RsNot->tituloMultimidia),42)?>
                               <img src="@img/ifCanal-camera.png" width="15" height="14" alt="" />
                       </a>
                                       </p>
                       		<?php
									}
								}
								else {
									echo "<span class=\"erro\">Não existem dados cadastrados...</span>";
								}
							?>                
                   <script type="text/javascript">
					$("#outrosVideos a").click(function(event) {
						event.preventDefault();
						var href = $(this).attr("href");
						$("#playerVideo").html('<iframe src="'+href+'"player.php');
					});
				</script>
                   <script type="text/javascript">
					$('#outrosVideos>p:nth-child(3n)').css("border-bottom", "0");   
				</script>
			</div>
		</div><!--videos-->

É isso ai pessoal, obrigado.

William Bruno · Novembro 17, 2011

isso aqui:

$("#playerVideo").html('<iframe src="'+href+'"player.php');

está completamente errado.

não tem nada a ver com nada.

Releia meus posts antigos nesse tópico.

em especial o post #6. Se você fizer corretamente oq está nele, vai resolver.

allex_carvalho · Novembro 17, 2011

Vamos lá então.

Esse link seria para os 3 titulos fora do player? E o href no js está certo?

Obrigado.

William Bruno · Novembro 17, 2011

Faça exatamente isso aqui:

ok, então você deve fazer assim:

<a href="LINK DO YOUTUBE OU DO VIMEO" title="<?=$RsNot->tituloMultimidia?>"><?=$RsNot->tituloMultimidia?>

dessa forma:

<a href="http://www.youtube.com/embed/gaasd556">...

ok ?

e então:

$("#outrosVideos a").click(function(event) {
   event.preventDefault();

   var href = $(this).attr("href");
   $("#playerVideo").html('<iframe src="'+href+'"></iframe>');
});

entendeu ?

Arquivado

[Resolvido] Problema com .click

Recommended Posts

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501