Publicado em 15 de jun.

Fancybox (html,javascript,Jquery,css) (NÃO FUNCIONA)

#desenvolvimento-frontend #fancybox #jquery

Gostaria de ajuda para solucionar um problema, segui um tutorial para por Fancybox na pagina porem quando jogo o arquivo no servidor e separo as importações do corpo da pagina ao qual chamo o Fancybox ele não funciona, porem no corpo da pagina quando exibo o código aparece todas as importações e a imagem chamando o Fancybox, Alguém teria como me ajudar por favor?? :(

Segui esse Tutorial : http://websocialdev.com/2014/05/06/fancybox-plugin-para-galeria-multimidia/#comment-2742419844 e http://fancyapps.com/fancybox/

Pagina: http://aleporto.com.br/blog/?id=2147

Fotos do código e do arquivo:

https://drive.google.com/open?id=0B2ZXOB75cIuCV3hsdmYwNHh6YzA

Servidor

Chamando class e rel na imagem:

Código inspecionado da pagina

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

rikaschmitt· 15 de jun.

Ele tá retornando erro que não está reconhecendo a função "fancybox".

Estranho.

Seria interessante você dar uma revisada em todos os plugins .js que estão sendo carregados no <head>, pois dando uma analisada por cima, tem muuuita coisa repetida, como por exemplo 3 arquivos da biblioteca jquery. Não precisa disso, 1 apenas está bom. Talvez dando uma organizada e ordenando melhor os carregamentos, funcione.

Juliana Mesquita· 15 de jun.

Repetida em que sentido?? os arquivos chamados são diferentes, a semelhança e a extensão. :(

A não ser que esteja dando alguma incompatibilidade com outras chamadas no corpo do html, no decorrer do head, isso é possível?? caso seja possível essa incompatibilidade seria a nomes de arquivos semelhantes e extensões ou algo do tipo ??

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <!-- Add fancyBox -->
 <link rel="stylesheet" href="cod/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/jquery.fancybox.pack.js"></script>

 <!-- Optionally add helpers - button, thumbnail and/or media -->
 <link rel="stylesheet" href="cod/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-media.js"></script>

 <link rel="stylesheet" href="cod/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
 $(".fancybox").fancybox();
 });
 </script>

 (Obrigada pela resposta! ) :)

Juliana Mesquita· 15 de jun.

Vou por o código todo abaixo para ver se alguém consegue ver onde estaria errado :

<!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'>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title><?php require ('cod/metadadosIndex.php'); ?></title>

<meta property="og:description" content=<?php require ('cod/metadadosIndex2.php'); ?>>
<meta property="og:image" content=<?php require ('cod/metadadosIndex3.php'); ?>>

<meta property="fb:admins" content="100002261645925"/>
<meta property="fb:app_id" content="434934516595377"/>

<link href="../cod/index.css" rel="stylesheet" type="text/css">
<link href=<?php require ('cod/metadadosBody.php'); ?> rel="stylesheet" type="text/css">
<script language="javascript" src="script.js"></script>
<script language="JavaScript">
</script>

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <!-- Add fancyBox -->
 <link rel="stylesheet" href="cod/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/jquery.fancybox.pack.js"></script>

 <!-- Optionally add helpers - button, thumbnail and/or media -->
 <link rel="stylesheet" href="cod/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-media.js"></script>

 <link rel="stylesheet" href="cod/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
 <script type="text/javascript" src="cod/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
 $(".fancybox").fancybox();
 });
 </script>

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js" ></script>
<script type='text/javascript' src='../cod/jquery.js'></script>

<script type="text/javascript" src="../slide/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="../slide/jquery.orbit-1.2.3.min.js"></script>
<style type="text/css">

.timer { display: none !important;
}

<!--[if IE]>

 <style type="text/css">
 .timer { display: none !important; }
 div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
 </style>
 <![endif]-->

 <!-- Run the plugin -->
 <script type="text/javascript">
 $(window).load(function() {
 $('#featured').orbit();
 });
 </script>

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
}

//-->

</script>

</style>

<script type="text/javascript">

$(window).load(function() {

$('#featured').orbit();

});

</script>

</head>

<body bgcolor='#FFFFFF' topmargin="0">

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<table width='1136' align='center' border='0' cellpadding='0' cellspacing='0'>
 <tr>
 <td width="1136" height="109" align="center" > <table width='100%' height="100%" border='0' align='center' cellpadding='0' cellspacing='0'>
 <tr>
 <td width='320' valign="top" background="img/cabeca.png"></td>
 <td width='816' valign="top" background="../img/cabeca2.png">
 <?php require ("cod/menuhome.php");
?>
 </td>
 </tr>
 </table></td>
 </tr>

 <tr>
 <td width="1136" height='598' align="center" valign="top" background=<?php require ('cod/logomenumateriafundo.php'); ?>>

	<table width='100%' height="100%" border='0' align='center' cellpadding='0' cellspacing='0'>
 <tr>
 <td width="216" height="57" valign="top"></td>
 <td width="920" height="55" valign="top"></td>
 <td width="16" height="57" valign="top"></td>
 </tr>
 <tr>
 <td width="216" height="103" valign="top"></td>
 <td width="920" height="103" valign="top"><div align="left">
 <table width='100%' height="30" border='0' align='center' cellpadding='0' cellspacing='0'>
 <tr>
 <td width='51' height="67" valign="top"> </td>
 <td width="861" >
 <?php require ("cod/menublog.inc.php"); ?>
 </td>
 </tr>
 </table>
 </div></td>
 <td width="16" height="103" valign="top"></td>
 </tr>
 <tr>
 <td width="216" height="60" valign="top"></td>
 <td width="920" height="60" valign="top"><div align="left">
 <table width='100%' height="100%" border='0' align='center' cellpadding='0' cellspacing='0'>
 <tr>
 <td width="5%" valign="top"> </td>
 <td width="95%" valign="top">
 <?php
require ("cod/titulo.php");
?>
 </td>
 </tr>
 </table>
 </div></td>
 <td width="16" height="60" valign="top"> </td>
 </tr>
 <tr>
 <td width="216" height="387" valign="top"> </td>
 <td height="387" colspan="2" valign="top"><table width='100%' height="100%" cellpadding='0' cellspacing='0'>
 <tr>
 <td width="725" valign="top"><img src="<?php require ("cod/fotogrande.php");?>" width='695'""/></td>
 <td width="199" valign="top">
 <?php require ("cod/colunafoto.inc.php"); ?>
 </td>
 </tr>
 </table></td>
 </tr>
</table>
 </td>
 </tr>

 <tr>
 <td align="center"> <table width='1136' align='center' border='0' cellpadding='0' cellspacing='0'>
 <tr>
 <td width='1136' height="95" valign='top' background="../img/ultimasnoticias.png">
 <div align="center">
 <table width='100%' height="100%" border='0' align='center' cellpadding='0' cellspacing='0'>
 <tr>
 <td width="109" valign="top"></td>
 <td width="826" valign="top" background=<?php require ('cod/fundotextomateria.php'); ?>>

 <?php
require ("cod/blog.inc.php");
?>
 </td>
 <td width="201" valign="top">
 <div align="justify"></div>
 <div align="right">
 <?php require ("cod/coluna.inc.php"); ?>
 </div></td>
 </tr>
 <tr>
 <td valign="top"></td>
 </tr>
 </table>
 </div></td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td width="1136" height="10" align="center" valign="top"></td>
 </tr>
 <tr>
 <td width="1136" height="500" align="center" ><table width='1136' height='500' align='center' border='0' cellpadding='0' cellspacing='0' background="<?php require ('cod/mapadositegeral.php'); ?>">
 <tr>
 <td width='1136' height="40" valign='top'> <div align="center"></div></td>
 </tr>
 <tr>
 <td width='1136' height="425" valign='top' ><div align="center">
 <?php require ("../cod/mapadosite.php"); ?>
 </div></td>
 </tr>
 <tr>
 <td width='1135' height="35" valign='top' ><div align="center">
 <?php require ('cod/pedositegeral.php'); ?>
 </div></td>
 </tr>
 </table></td>
 </tr>
</table>

</body>
</html>

Help :(

rikaschmitt· 15 de jun.

Não conheço bem o que está realmente sendo usado pelo site.

Dando uma olhada por cima, deixei assim o <HEAD>:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php require ('cod/metadadosIndex.php'); ?></title>
<meta property="og:description" content=<?php require ('cod/metadadosIndex2.php'); ?>>
<meta property="og:image" content=<?php require ('cod/metadadosIndex3.php'); ?>>
<meta property="fb:admins" content="100002261645925"/>
<meta property="fb:app_id" content="434934516595377"/>

<link href="../cod/index.css" rel="stylesheet" type="text/css">
<link href=<?php require ('cod/metadadosBody.php'); ?> rel="stylesheet" type="text/css">
<link rel="stylesheet" href="cod/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../slide/orbit-1.2.3.css">
<link rel="stylesheet" href="../slide/demo-style.css">

<script type="text/javascript" src="../slide/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="cod/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js" ></script>
<script type='text/javascript' src='../cod/menu.js'></script>
<script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='1d22d94a0d55116381f8582aa720e5b1' data-cfasync='false' async='async'></script>
<script type="text/javascript" src="../slide/jquery.orbit-1.2.3.min.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
 $(".fancybox").fancybox();
 });
</script>

<style type="text/css">
.timer { display: none !important; }
</style>

<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
</head>

Veja se está ok.

Juliana Mesquita· 15 de jun.

Você só organizou correto?? mas isso não interfere no código correto??

olha tenta dar uma olha nesse site e nele que estou aplicando o comando só que não funciona (http://aleporto.com.br/blog/?id=2147 )

Agora quando eu boto tudo no corpo da pasta funciona olha

(http://aleporto.com.br/blog/indexteste.html)

A mesma configuração a diferença é que a primeira opção está dentro do Mysql e a segunda está em um arquivo Html dentro do servidor.

L. Henrique· 15 de jun.

Juliana,

Faça um teste limpo com todos os plugins. O que isso significa: Pegar todo o tutorial e fazer uma nova versão de acordo com o que você está seguindo e ver se funciona.

Se não funcionar, existe algo de errado com o tutorial.

Se funcionar: Abra o seu site e remova por partes o que você adicionou que não estava incluso no tutorial e veja até onde isso vai. Uma hora você acha o problema. No momento estou sem muito tempo pra testar, mas essas são as dicas por enquanto.

----------------------------
Rikas,

Scripts não são aconselhados estarem dentro da <head> e sim ao fim do <body>. Leia este tópico: http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom-of-the-html-code

rikaschmitt· 15 de jun.

>
Juliana,

Faça um teste limpo com todos os plugins. O que isso significa: Pegar todo o tutorial e fazer uma nova versão de acordo com o que você está seguindo e ver se funciona.

Se não funcionar, existe algo de errado com o tutorial.

----------------------------

Rikas,

Sim, mas eu não quis mexer na estrutura que ela já tinha. :D

Juliana Mesquita· 15 de jun.

Obrigada aos dois, criei uma configuração própria, e fui vendo depois coloquei tudo no corpo de uma id e chamei dentro de todos os corpos do banco de dados e está funcionando obrigada! (Testei por no corpo do Mysql a importação dos arquivos e funcionou)

Colocamos o código dentro de um arquivo e importamos esse arquivo (com auxilio do meu chefe), que por sua vez foi inserido dentro de todos os corpos de texto do site (Funcionou):

<script type='text/javascript' src='lib/jquery-1.10.1.min.js' ></script>
<script type='text/javascript' src='source/jquery.fancybox.js'></script>
<link rel='stylesheet' type='text/css' href='source/jquery.fancybox.css' media='screen'>
<script type='text/javascript' >
 $(document).ready(function(){
 $('.fancybox').fancybox();
 });
</script>

Na hora de chamar a imagem acrescentei a configuração e funcionou:

<a class="fancybox" rel="group" data-fancybox-grup="gallary" href="imagens/nomedaimagem.jpg"><img src="imagens/nomedaimag
em.jpg" width = 620'/></a>

Pastas usadas para criar Fancybox (Lib e Source) :

https://drive.google.com/open?id=0B2ZXOB75cIuCQkdNRXVrOXNNMm8