Ir para conteúdo

Arquivado

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

Juliana Mesquita

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

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 ??

<!-- Fancybox -->

  <!-- Add jQuery library -->
  <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! ) :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

<!-- Fancybox -->

  <!-- Add jQuery library -->
  <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>


<!-- Popups -->

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


<!-- MENU -->

<script type='text/javascript' src='../cod/menu.js'></script>

<!-- redes socais shareaholic -->

<script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='1d22d94a0d55116381f8582aa720e5b1' data-cfasync='false' async='async'></script>


<!-- SlideShow -->
	  	
<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="../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>

<!-- PopUP normal -->
<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>
	
<!-- [end SlideShow] -->




</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 :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

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"/>


<!-- CSS -->
<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">


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


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


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


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

Veja se está ok.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
×

Informação importante

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