Jump to content
Sign in to follow this  
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

Share this post


Link to post
Share on other 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.

  • +1 1

Share this post


Link to post
Share on other 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! ) :)

Share this post


Link to post
Share on other 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 :(

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

  • +1 1

Share this post


Link to post
Share on other 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

  • +1 1

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
    • By Infra Comnet
      Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.
      Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.
      Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.
      Veja o código completo abaixo:
      <html> <head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head> <!-- Script com link de JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},              {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},              {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},              {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},             ]; $('input[name="codigo"]').change(function(){   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val())); }); $('input[name="nome"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `)); }); $('input[name="tecnico"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `)); }); function pegaNome(cod){   var nome  = "Não existe na lista"   var nomes = "";      $.each(dados, function(i, val){     if (val.codigo == cod)       {         nome = val.Nome;         $.each(nome, function(index, value){           nomes += value + '\n\n';         });         }     });   return nomes; } String.prototype.replaceAll = function(searchStr, replaceStr) {     var str = this;     searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');     return str.replace(new RegExp(searchStr, 'gi'), replaceStr); }; </script> <body> <!-- Exibindo na página nos navegadores --> <tr>   <td>     Código:<input type="text" name="codigo" size="5">     Cliente: <input type="text" name="nome" size="28"></td></br>     Técnico: <input type="text" name="tecnico" size="28"></br></br>     <textarea name="nome pessoal" rows="10" cols="50"></textarea>   </td> </tr> </body> </html>  
    • By manoaj
      Boa tarde pessoal!
      Tenho As seguintes tabelas no meu banco:
       
      Tabela->clientes(Essa tabela guarda os clientes)
      Tabela-> Produtos (Essa tabela guarda os  produtos)
      Tabela -> Tamanhos (Essa tabela guarda os tamanhos e os preços)
      Tabela->Relação de tamanho (Essa tabela guarda a relação dos tamanhos que cada produto pode ter)
      Tabela-> Pedidos (Essa tabela guarda o pedido do cliente com tamanho e quantidade)
       
      E o problema e o seguinte: Como q eu faço uma seleção nessas tabelas para saber o valor total do pedido do meu cliente com base no tamanho e quantidade escolhida?
    • By Artes Ussler
      Olá
       
      Alguém já usou o modal deste link: 
       
      https://jquerymodal.com/
       
      e alterou ele para abrir um modal ao acessar a página, e não ao clicar em um link?
       
      Caso alguém tenha feito e puder me mostrar como faz, fico grato.
       
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.