Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
conflito Conflito de jQuery
Por
itagibadf, em Javascript
Recommended Posts
-
Conteúdo Similar
-
Por Caio Henrique Bottigelli
Olá, estou desenvolvendo um sistema em asp.net Framework MVC, usando o banco de dados Postgresql. Quando 2 usuários diferentes usam o sistema acontece conflito de informações, por exemplo, no cadastro de clientes, preciso vincular uma pessoa a um determinado cliente, caso 2 usuários estiverem usando, e os 2 fizerem essa ação de vincular pessoas a um cliente, no 2º usuário vai aparecer a pessoa que o 1º usuário vinculou. É como se o sistema estivesse usando uma única Lista e os 2 usuários estivessem compartilhando essa lista.
As variáveis de conexão não estão estáticas, toda vez que alguém entrar no sistema, vai ser criado uma nova instancia de conexão.
Alguém sabe como resolver esse conflito de informação entre usuários?
-
Por PeeWee
Boa tarde pessoal, estou com um problema aqui de conflito de javascript, ja pesquisei e aquela solução de trocar a $ não deu certo. Preciso por dois ou mais códigos iguais a esses pois ele faz aparecer um alert na tela conforme a informação é alterada no banco de dados, exemplo: se está 1 ele exibe uma informação, se está 2 ele exibe outra, Segue o código
-
Por jardeldint
Olá pessoal, tudo bem?
To com um problemão doido... já to quase careca (não falta muito pra isso)!
Fiz uma estrutura simples de html5 e css3 nesse endereço: Estrutura Básica.
Ali funcionou perfeitamente... show de bola mesmo.
Porém eu precisei inserir essa estrutura dentro de uma página .JSP, que essa página é feita com o bootstrap. O código dela está abaixo:
<%@page import="java.util.ArrayList"%> <%@page import="com.sun.javafx.binding.SelectBinding.AsObject"%> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="br.com.tuter.modelo.Associado" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>BackOffice Tuter - Meus Dados</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/arvore.css" rel="stylesheet" type="text/css" media="screen"> <!-- Custom CSS --> <link href="css/sb-admin.css" rel="stylesheet"> <!-- Morris Charts CSS --> <link href="css/plugins/morris.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <% Associado associado = (Associado) session.getAttribute("currentSessionUser"); session.setAttribute("loginAssociado", associado.getLogin()); //Grava a session com o Login ArrayList<String> lst = (ArrayList<String>)session.getAttribute("listaOrdenada"); //out.println("session login " + session.getAttribute("loginAssociado")); %> </head> <body> <div id="wrapper"> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo-tuter-new-pb.png" /></a> </div> <!-- Top Menu Items --> <ul class="nav navbar-right top-nav"> <li class="dropdown"><!-- BOTÃO DE PERFIL --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <% out.println(associado.getNome()); %> <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="meusDados"><i class="fa fa-fw fa-user"></i> Meus Dados</a> </li> <li class="divider"></li> <li> <a href="logof"><i class="fa fa-fw fa-power-off"></i> Sair</a> </li> </ul> </li> </ul> <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li class="active"> <a href="dashBoard"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> </li> <li> <a href="meusDados"><i class="fa fa-fw fa-bar-chart-o"></i> Meus Dados</a> </li> <li><a href="rede" ><i class="fa fa-spinner fa-spin fa-1x fa-fw"></i> Minha Rede</a> </li> <li><a href="backoffice/loginFinanceiro.html"><i class="fa fa-fw fa-money"></i> Financeiro</a> </li> <li><a href="backoffice/educacional.html"><i class="fa fa-fw fa-desktop"></i> Educacional</a> </li> <li><a href="backoffice/propaganda.html"><i class="fa fa-bullhorn"></i> Propaganda</a> </li> <li><a href="backoffice/suporte.html"><i class="fa fa-life-ring"></i> Suporte</a> </li> </ul> </div> <!-- /.navbar-collapse --> </nav> <div id="page-wrapper"> <div class="container-fluid"> <!-- Page Heading --> <div class="container"> <div class="row"> <h2>Passe o mouse para Buscar em sua Rede</h2> <div class="search"> <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" size="40" /> <button type="submit" class="btn btn-primary btn-sm">Busque</button> </div> </div> </div> <% if (associado.getStatus() == '2'){ %> <br><br><p><%= associado.getNome() %></p> <p><%= associado.getLogin() %></p> <p><%= associado.getPacote() %></p> <p><%= associado.getStatus() %></p> <p><h2>Seu Cadastro ainda está inativo.</h2><h3>Ative seu cadastro para receber pontos por sua Arvore de indicados!</h3> <% } else { /*%> <form id="AtualizaCadastro" action="atualizaAssociado" method="post"> <table border="0"> <tr><th colspan="5" ><h4>Lateral a Inserir Novos Associados</h4></th> </tr> <tr> <td><input type="radio" name="lateral" id="esquerda" value="E"> <label for="esquerda">Esquerda</label></td><td> </td> <td><input type="radio" name="lateral" id="automatico" value="A"> <label for="automatico">Automático</label></td><td> </td> <td><input type="radio" name="lateral" id="direita" value="D"> <label for="direita">Direita</label> </tr> </table> </form> <% */ %> <p> <br> <br> <br> </p> <!-- Inicio da tabela Arvore --> <div class="quadTotal"> <div class="quadUm"> JARDEL </div> <div class="quadDoisG espacoBaixo"> <div class="quadDois"> GISLENE </div> </div> <div class="quadTresG espacoBaixo"> <div class="quadTres"> DAVI </div> </div> <div class="quadQuatroG espacoBaixoDois"> <div class="quadQuatro"> JORGE </div> <div class="quadCinco"> ANGELO </div> </div> <div class="quadCincoG espacoBaixoDois"> <div class="quadSeis"> NEI </div> <div class="quadSete"> JAILSON </div> </div> </div> <!-- Fim da tabela Arvore --> <% } %> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-hover table-striped"> <thead> <th>Plano</th> <th>Equipe Esquerda</th> <th>Equipe Direita</th> </thead> <tbody> <tr> <td>Bronze</td> <td>100</td> <td>120</td> </tr> <tr> <td>Prata</td> <td>100</td> <td>120</td> </tr> <tr> <td>Ouro</td> <td>100</td> <td>120</td> </tr> <tr> <td>Diamante</td> <td>100</td> <td>120</td> </tr> </tbody> </table> </div> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> </body> </html> O arquivo arvore.css está assim:
.quadTotal { width: 90%; height: 80%; position: relative; top: 5%; background-color: #86C8CC; text-align: center; } .quadUm { position: absolute; display: block; width: 100%; height: 33%; top: 0; text-align: center; background-color: #E5D4BF; } .espacoBaixo { display: inline-block; position: absolute; height: 33%; top: 33%; } .espacoBaixoDois { display: inline-block; position: absolute; height: 33%; top: 66%; } .quadDoisG { display: block; position: absolute; width: 50%; left: 0; float: left; background-color: #E3E5BF; text-align: center; } .quadTresG { display: block; position: absolute; width: 50%; right: 0; float: right; background-color: #BFE3E5 ; text-align: center; } .quadQuatroG { display: block; position: absolute; width: 50%; left: 0; float: left; background-color: #EFD8EE ; text-align: center; } .quadCincoG { display: block; position: absolute; width: 50%; right: 0; float: right; background-color: #CFC9CF ; text-align: center; } .quadDois {} .quadTres {} .quadQuatro { width: 50%; display: inline-block; background-color: white; float: left; } .quadCinco { width: 50%; display: inline-block; background-color: gray; float: right; } .quadSeis { width: 50%; display: inline-block; background-color: white; float: left; } .quadSete { width: 50%; display: inline-block; background-color: gray; float: right; } Quando renderiza a página, só aparece na tela o conteúdo da ultima linha, que é esse trecho de código:
<div class="quadQuatroG espacoBaixoDois"> <div class="quadQuatro"> JORGE </div> <div class="quadCinco"> ANGELO </div> </div> <div class="quadCincoG espacoBaixoDois"> <div class="quadSeis"> NEI </div> <div class="quadSete"> JAILSON </div> Teoricamente não deveria causar nenhum tipo de conflito, sabendo que o arquivo que criei não tem nenhum seletor repetido em nenhum outro arquivo externo de css.
Preciso da ajuda de vocês pra resolver esse mistério.
Fico no aguardo!
-
Por rodrigomarden
Estou importando um jquery.min, mas ele está dando conflito com o jquery de uma biblioteca que eu não tenho acesso, ai fica minha duvida de como resolver o conflito...
Segue o código completo:
<?xml version='1.0' encoding='UTF-8' ?> <!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" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Cadastrar Usuário</title> <script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" href="mypattern.css"/> </h:head> <h:body style="background-color: #{config.BackgroudColor}"> <h:form id="form" acceptcharset="ISO-8859-1"> <ui:include src="/topo.xhtml"/> <p:panel header="Cadastro de usuário" toggleable="true" toggleTitle="Minimizar"> <p:panelGrid columns="2"> <p:outputLabel value="Nome" for="nome"/> <p:inputText id="nome" value="#{userController.usuarios.nome}" onkeypress="return checkValidChar(this,'0123456789abcdefghijlmnopqrstuvxzwykABCDEFGHIJLMNOPQRSTUVXZWYK-_ ','Não é possível inserir caracteres especiais. !@#ç$%',event);" required="true" requiredMessage="O campo nome é obrigatório."/> <p:outputLabel value="Matrícula" for="matricula"/> <p:inputText id="matricula" value="#{userController.usuarios.matricula}" onkeypress="return checkValidChar(this,'0123456789abcdefghijlmnopqrstuvxzwykABCDEFGHIJLMNOPQRSTUVXZWYK-_ ','Não é possível inserir caracteres especiais. !@#ç$%',event);" required="true" requiredMessage="O campo matrícula é obrigatório."/> <p:outputLabel value="Senha" for="new_senha"/> <p:password feedback="true" goodLabel="Média" weakLabel="Fraca" strongLabel="Segura" promptLabel="Por favor, digite a senha" id="new_senha" value="#{userController.usuarios.senha}" required="true" requiredMessage="O campo senha é obrigatório."/> <p:outputLabel value="Regional" for="regional"/> <p:autoComplete id="regional" value="#{userController.cidade}" completeMethod="#{userController.completeCidades}" var="cidade" itemLabel="#{cidade.cidade}" itemValue="#{cidade}" maxResults="8" forceSelection="true" tabindex="1"> <p:ajax event="itemSelect"/> </p:autoComplete> </p:panelGrid> <p:dataTable id="table_cidades" style="width: 70%" var="cid" value="#{userController.dataModel}" selection="#{userController.hasUsuarios}" rowKey="#{cid.regionaisHasUsuariosPK.id}" selectionMode="single"> <f:facet name="header"> Lista de Cidades </f:facet> <p:ajax event="rowSelect"/> <p:column headerText="ID"> #{cid.cidades.id} </p:column> <p:column headerText="Cidade"> #{cid.cidades.cidade} </p:column> </p:dataTable> <p:commandButton value="Adicionar" actionListener="#{userController.addCidadeInList}" update="table_cidades, msg, regional" immediate="true"/> <p:commandButton value="Remover" actionListener="#{userController.removeCidadeFromList}" update="table_cidades, msg, regional" immediate="true"/> <p:selectManyCheckbox layout="pageDirection" value="#{userController.permissoes}"> <f:selectItem itemLabel="Solicitação" itemValue="1" /> <f:selectItem itemLabel="Triagem" itemValue="2" /> <f:selectItem itemLabel="Expedição" itemValue="3" /> <f:selectItem itemLabel="Estoque" itemValue="4" /> <f:selectItem itemLabel="Administração" itemValue="5" /> </p:selectManyCheckbox> </p:panel> <p:commandButton value="Salvar" action="#{userController.salvarForm()}" ajax="false"/> <p:commandButton value="Voltar" action="#{userController.voltar}" ajax="false" immediate="true"/> </h:form> <script type="text/javascript" src="mypattern.js"></script> </h:body> </html> Ai essa jquery:
<script type="text/javascript" src="jquery.min.js"></script> Está dando conflito com a usada na biblioteca primefaces quando utilizo a funçao autocomplete que é originada dela:
<p:autoComplete id="regional" value="#{userController.cidade}" completeMethod="#{userController.completeCidades}" var="cidade" itemLabel="#{cidade.cidade}" itemValue="#{cidade}" maxResults="8" forceSelection="true" tabindex="1"> <p:ajax event="itemSelect"/> </p:autoComplete> -
Por rodrigo1207
Olá, estou com dificuldades para fazer funcionar 2 codigos em Jquery na mesma página... só funciona 1.. tenho um index.php que estou chamando um banner rotativo em jquery. ok , funciona beleza.. no final da página quero colocar uma galeria de fotos, porém ela não funciona.. já tentei chamar somente 1 vez jquery.js porem nao deu certo.. seguem os códigos: index.php <div id="topo"> <?php include("banner.php"); ?> </div> <div id="galeria"> <?php include("galeria.php"); ?> </div> banner rotativo: (banner.php)
<!-- it works the same with all jquery version from 1.x to 2.x --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- use jssor.slider.mini.js (40KB) instead for release --> <!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) --> <script type="text/javascript" src="js/jssor.js"></script> <script type="text/javascript" src="js/jssor.slider.js"></script> <script> jQuery(document).ready(function ($) { var _CaptionTransitions = []; _CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; _CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; _CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; _CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; _CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }; _CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} }; _CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} }; _CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} }; _CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 }; _CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} }; _CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} }; var options = { $FillMode: 2, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0 $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false $SlideEasing: $JssorEasing$.$EaseOutQuint, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad $SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20 //$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container //$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0 $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0. $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1 $DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1 $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1 }, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: 8, //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: 8, //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 }, $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 } }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); //responsive code begin //you can remove responsive code if you don't want the slider scales while window resizes function ScaleSlider() { var bodyWidth = document.body.clientWidth; if (bodyWidth) jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920)); else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); //responsive code end }); </script> <!-- Jssor Slider Begin --> <!-- To move inline styles to css file/block, please specify a class name for each element. --> <div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 300px; overflow: hidden;"> <!-- ############################# TAMANHO AKI height --> <!-- Loading Screen --> <div u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> </div> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 300px; overflow: hidden;"> <div> <img u="image" src="img/1920/red.jpg" /> <div u="caption" t="NO" t3="RTT|2" r3="137.5%" du3="3000" d3="500" style="position: absolute; width: 445px; height: 300px; top: 100px; left: 600px;"> <img src="img/new-site/c-phone.png" style="position: absolute; width: 445px; height: 300px; top: 0px; left: 0px;" /> <img u="caption" t="CLIP|LR" du="4000" t2="NO" src="img/new-site/c-jssor-slider.png" style="position: absolute; width: 102px; height: 78px; top: 70px; left: 130px;" /> <img u="caption" t="ZMF|10" t2="NO" src="img/new-site/c-text.png" style="position: absolute; width: 80px; height: 53px; top: 153px; left: 163px;" /> <img u="caption" t="RTT|10" t2="NO" src="img/new-site/c-fruit.png" style="position: absolute; width: 140px; height: 90px; top: 60px; left: 220px;" /> <img u="caption" t="T" du="4000" t2="NO" src="img/new-site/c-navigator.png" style="position: absolute; width: 200px; height: 155px; top: 57px; left: 121px;" /> </div> <div u="caption" t="RTT|2" r="-75%" du="1600" d="2500" t2="NO" style="position: absolute; width: 470px; height: 220px; top: 120px; left: 650px;"> <img src="img/new-site/c-phone-horizontal.png" style="position: absolute; width: 470px; height: 220px; top: 0px; left: 0px;" /> <img u="caption" t3="MCLIP|L" du3="2000" src="img/new-site/c-slide-1.jpg" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" /> <img u="caption" t="MCLIP|R" du="2000" t2="NO" src="img/new-site/c-slide-3.jpg" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" /> <img u="caption" t="RTTL|BR" x="500%" y="500%" du="1000" d="-3000" r="-30%" t3="L" x3="70%" du3="1600" src="img/new-site/c-finger-pointing.png" style="position: absolute; width: 257px; height: 300px; top: 80px; left: 200px;" /> <img src="img/new-site/c-navigator-horizontal.png" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" /> </div> <div style="position: absolute; width: 480px; height: 120px; top: 30px; left: 30px; padding: 5px; text-align: left; line-height: 60px; text-transform: uppercase; font-size: 50px; color: #FFFFFF;">Touch Swipe Slider </div> <div style="position: absolute; width: 480px; height: 120px; top: 300px; left: 30px; padding: 5px; text-align: left; line-height: 36px; font-size: 30px; color: #FFFFFF;"> Build your slider with anything, includes image, content, text, html, photo, picture </div> </div> <div> <img u="image" src="img/1920/layout.jpg" /> <div u="caption" t="NO" t3="RTT|2" r3="137.5%" du3="3000" d3="500" style="position: absolute; width: 445px; height: 300px; top: 100px; left: 600px;"> </div> <div u="caption" t="RTT|2" r="-75%" du="1600" d="2500" t2="NO" style="position: absolute; width: 470px; height: 220px; top: 120px; left: 650px;"> </div> <div style="position: absolute; width: 480px; height: 120px; top: 30px; left: 30px; padding: 5px; text-align: left; line-height: 60px; text-transform: uppercase; font-size: 50px; color: #FFFFFF;"> </div> <div style="position: absolute; width: 480px; height: 120px; top: 300px; left: 30px; padding: 5px; text-align: left; line-height: 36px; font-size: 30px; color: #FFFFFF;"> </div> </div> <div> <img u="image" src="img/1920/layout.jpg" /> <div u="caption" t="NO" t3="RTT|2" r3="137.5%" du3="3000" d3="500" style="position: absolute; width: 445px; height: 300px; top: 100px; left: 600px;"> </div> </div> <div> <img u="image" src="img/1920/purple.jpg" /> <div style="position: absolute; width: 480px; height: 120px; top: 30px; left: 30px; padding: 5px; text-align: left; line-height: 60px; text-transform: uppercase; font-size: 50px; color: #FFFFFF;">Touch Swipe Slider </div> <div style="position: absolute; width: 480px; height: 120px; top: 300px; left: 30px; padding: 5px; text-align: left; line-height: 36px; font-size: 30px; color: #FFFFFF;"> Build your slider with anything, includes image, content, text, html, photo, picture </div> </div> <div> <img u="image" src="img/1920/blue.jpg" /> <div style="position: absolute; width: 480px; height: 120px; top: 30px; left: 30px; padding: 5px; text-align: left; line-height: 60px; text-transform: uppercase; font-size: 50px; color: #FFFFFF;">Touch Swipe Slider </div> <div style="position: absolute; width: 480px; height: 120px; top: 300px; left: 30px; padding: 5px; text-align: left; line-height: 36px; font-size: 30px; color: #FFFFFF;"> Build your slider with anything, includes image, content, text, html, photo, picture </div> </div> </div> <!--#region Bullet Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html'>http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html --> <style> /* jssor slider bullet navigator skin 21 css */ /* .jssorb21 div (normal) .jssorb21 div:hover (normal mouseover) .jssorb21 .av (active) .jssorb21 .av:hover (active mouseover) .jssorb21 .dn (mousedown) */ .jssorb21 { position: absolute; } .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av { position: absolute; /* size of bullet elment */ width: 19px; height: 19px; text-align: center; line-height: 19px; color: white; font-size: 12px; background: url(img/b21.png) no-repeat; overflow: hidden; cursor: pointer; } .jssorb21 div { background-position: -5px -5px; } .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; } .jssorb21 .av { background-position: -65px -5px; } .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; } </style> <!-- bullet navigator container --> <div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;"> <!-- bullet navigator item prototype --> <div u="prototype"></div> </div> <!--#endregion Bullet Navigator Skin End --> <!--#region Arrow Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html'>http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --> <style> /* jssor slider arrow navigator skin 21 css */ /* .jssora21l (normal) .jssora21r (normal) .jssora21l:hover (normal mouseover) .jssora21r:hover (normal mouseover) .jssora21l.jssora21ldn (mousedown) .jssora21r.jssora21rdn (mousedown) */ .jssora21l, .jssora21r { display: block; position: absolute; /* size of arrow element */ width: 55px; height: 55px; cursor: pointer; background: url(img/a21.png) center center no-repeat; overflow: hidden; } .jssora21l { background-position: -3px -33px; } .jssora21r { background-position: -63px -33px; } .jssora21l:hover { background-position: -123px -33px; } .jssora21r:hover { background-position: -183px -33px; } .jssora21l.jssora21ldn { background-position: -243px -33px; } .jssora21r.jssora21rdn { background-position: -303px -33px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;"> <!--#endregion Arrow Navigator Skin End --> <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a> </div> <!-- Jssor Slider End --> código da galeria (que não funciona)galeria.php
<!-- it works the same with all jquery version from 1.x to 2.x --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- use jssor.slider.mini.js (40KB) instead for release --> <!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) --> <script type="text/javascript" src="js/jssor.js"></script> <script type="text/javascript" src="js/jssor.slider.js"></script> <script> jQuery(document).ready(function ($) { var _SlideshowTransitions = [ //Fade in L {$Duration: 1200, x: 0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade out R , { $Duration: 1200, x: -0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in R , { $Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade out L , { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in T , { $Duration: 1200, y: 0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade out B , { $Duration: 1200, y: -0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade in B , { $Duration: 1200, y: -0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade out T , { $Duration: 1200, y: 0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in LR , { $Duration: 1200, x: 0.3, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade out LR , { $Duration: 1200, x: 0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade in TB , { $Duration: 1200, y: 0.3, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade out TB , { $Duration: 1200, y: 0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in LR Chess , { $Duration: 1200, y: 0.3, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade out LR Chess , { $Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in TB Chess , { $Duration: 1200, x: 0.3, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade out TB Chess , { $Duration: 1200, x: -0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade in Corners , { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade out Corners , { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true } //Fade Clip in H , { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade Clip out H , { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade Clip in V , { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } //Fade Clip out V , { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } ]; var options = { $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false $SlideDuration: 800, //Specifies default duration (swipe) for slide in milliseconds $SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random $ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false }, $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 1 //[Required] 0 Never, 1 Mouse Over, 2 Always }, $ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 $SpacingX: 8, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 $DisplayPieces: 10, //[Optional] Number of pieces to display, default value is 1 $ParkingPosition: 360 //[Optional] The offset position to park thumbnail } }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); //responsive code begin //you can remove responsive code if you don't want the slider scales while window resizes function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300)); else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); //responsive code end }); </script> <!-- Jssor Slider Begin --> <!-- To move inline styles to css file/block, please specify a class name for each element. --> <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px; height: 456px; background: #191919; overflow: hidden;"> <!-- Loading Screen --> <div u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"> </div> <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"> </div> </div> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;"> <div> <img u="image" src="../img/alila/01.jpg" /> <img u="thumb" src="../img/alila/thumb-01.jpg" /> </div> <div> <img u="image" src="../img/alila/02.jpg" /> <img u="thumb" src="../img/alila/thumb-02.jpg" /> </div> <div> <img u="image" src="../img/alila/03.jpg" /> <img u="thumb" src="../img/alila/thumb-03.jpg" /> </div> <div> <img u="image" src="../img/alila/04.jpg" /> <img u="thumb" src="../img/alila/thumb-04.jpg" /> </div> <div> <img u="image" src="../img/alila/05.jpg" /> <img u="thumb" src="../img/alila/thumb-05.jpg" /> </div> <div> <img u="image" src="../img/alila/06.jpg" /> <img u="thumb" src="../img/alila/thumb-06.jpg" /> </div> <div> <img u="image" src="../img/alila/07.jpg" /> <img u="thumb" src="../img/alila/thumb-07.jpg" /> </div> <div> <img u="image" src="../img/alila/08.jpg" /> <img u="thumb" src="../img/alila/thumb-08.jpg" /> </div> <div> <img u="image" src="../img/alila/09.jpg" /> <img u="thumb" src="../img/alila/thumb-09.jpg" /> </div> <div> <img u="image" src="../img/alila/10.jpg" /> <img u="thumb" src="../img/alila/thumb-10.jpg" /> </div> <div> <img u="image" src="../img/alila/11.jpg" /> <img u="thumb" src="../img/alila/thumb-11.jpg" /> </div> <div> <img u="image" src="../img/alila/12.jpg" /> <img u="thumb" src="../img/alila/thumb-12.jpg" /> </div> </div> <!--#region Arrow Navigator Skin Begin --> <style> /* jssor slider arrow navigator skin 05 css */ /* .jssora05l (normal) .jssora05r (normal) .jssora05l:hover (normal mouseover) .jssora05r:hover (normal mouseover) .jssora05l.jssora05ldn (mousedown) .jssora05r.jssora05rdn (mousedown) */ .jssora05l, .jssora05r { display: block; position: absolute; /* size of arrow element */ width: 40px; height: 40px; cursor: pointer; background: url(../img/a17.png) no-repeat; overflow: hidden; } .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05l.jssora05ldn { background-position: -250px -40px; } .jssora05r.jssora05rdn { background-position: -310px -40px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px"> </span> <!--#endregion Arrow Navigator Skin End --> <!--#region Thumbnail Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html --> <style> /* jssor slider thumbnail navigator skin 01 css */ /* .jssort01 .p (normal) .jssort01 .p:hover (normal mouseover) .jssort01 .p.pav (active) .jssort01 .p.pdn (mousedown) */ .jssort01 { position: absolute; /* size of thumbnail navigator container */ width: 800px; height: 100px; } .jssort01 .p { position: absolute; top: 0; left: 0; width: 72px; height: 72px; } .jssort01 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .jssort01 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .jssort01 .c { position: absolute; top: 0px; left: 0px; width: 68px; height: 68px; border: #000 2px solid; box-sizing: content-box; background: url(../img/t01.png) -800px -800px no-repeat; _background: none; } .jssort01 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 68px; height: 68px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%; } .jssort01 .p:hover .c { top: 0px; left: 0px; width: 70px; height: 70px; border: #fff 1px solid; background-position: 50% 50%; } .jssort01 .p.pdn .c { background-position: 50% 50%; width: 68px; height: 68px; border: #000 2px solid; } * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { /* ie quirks mode adjust */ width /**/: 72px; height /**/: 72px; } </style> <!-- thumbnail navigator container --> <div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;"> <!-- Thumbnail Item Skin Begin --> <div u="slides" style="cursor: default;"> <div u="prototype" class="p"> <div class=w><div u="thumbnailtemplate" class="t"></div></div> <div class=c></div> </div> </div> <!-- Thumbnail Item Skin End --> </div> <!--#endregion Thumbnail Navigator Skin End --> <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a> </div> <!-- Jssor Slider End -->
-