dois plugins jquery nao funcionam na mesma pagina

vitorferreira · Fevereiro 6, 2014

Peço ajuda tentei ja algumas maneiras de ajustar meu código para que funcionasse os plugins no meu site porem nao da certo alguem me ajude, onde estou errando??

<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" /> 
     
     <script src="[url=http://code.jquery.com/jquery-1.9.1.js]http://code.jquery.com/jquery-1.9.1.js [/url]">  </script>
<script src="[url=http://newsweek.shu.edu.tw:8080/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js]http://newsweek.shu.edu.tw:8080/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js [/url]"></script>
<script>
$(document).ready(function() {
$("#splash").zAccordion({
timeout: 6500,
speed: 600,
slideClass: 'slide',
animationStart: function () {
$('#splash').find('li.slide-previous div').fadeOut();
},
animationComplete: function () {
$('#splash').find('li.slide-open div').fadeIn();
},
buildComplete: function () {
$('#splash').find('li.slide-closed div').css('display', 'none');
$('#splash').find('li.slide-open div').fadeIn();
},
startingSlide: 0,
slideWidth: 600,
width: 820,
height: 270,
auto: true
});
});
</script><style type="text/css">

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

 <div id="wrapper">
              <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="nivo-slider/demo/images/02.jpg" data-thumb="images/toystory.jpg" alt="" />
  <img src="nivo-slider/demo/images/apresentacao03.jpg" data-thumb="images/up.jpg" alt="" title="" />
                <img src="nivo-slider/demo/images/index_r3_c3.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="nivo-slider/demo/images/03.jpg" data-thumb="images/nemo.jpg" alt="" title="" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong> VENHA  </strong>. 
            </div>
        </div>
 
    </div>
    <script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
  
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

 
<!--proximo item-->
<li> <img src="images/arquitetura.jpg"
alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">
  <map name="Map">
    <area shape="circle" coords="204,149,40" href="images/testedesign.png">
  </map> 
<div>  </ strong> 
<p texto explicativo class="splash-text">. </ P> 
</ div> 
</ li>             
<!--proximo item-->
<li> <img src="images/linguas.jpg"
alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">
  <map name="Map">
    <area shape="circle" coords="204,149,40" href="images/testedesign.png">
  </map> 
<div>  </ strong> 
<p texto explicativo class="splash-text">. </ P> 
</ div> 
</ li>   
<!--proximo item-->
</ ul>
<!--fim slide-->

William Bruno · Fevereiro 6, 2014

Importe o core do jQuery uma única vez

vitorferreira · Fevereiro 6, 2014

como assim?? tem como deixar um exemplo

William Bruno · Fevereiro 6, 2014

<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" /> 
     
     <script src="http://code.jquery.com/jquery-1.9.1.js">  </script>
<script src="http://newsweek.shu....y.zaccordion.js"></script>
<script>
$(document).ready(function() {
$("#splash").zAccordion({
timeout: 6500,
speed: 600,
slideClass: 'slide',
animationStart: function () {
$('#splash').find('li.slide-previous div').fadeOut();
},
animationComplete: function () {
$('#splash').find('li.slide-open div').fadeIn();
},
buildComplete: function () {
$('#splash').find('li.slide-closed div').css('display', 'none');
$('#splash').find('li.slide-open div').fadeIn();
},
startingSlide: 0,
slideWidth: 600,
width: 820,
height: 270,
auto: true
});
});
</script><style type="text/css">

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

 <div id="wrapper">
              <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="nivo-slider/demo/images/02.jpg" data-thumb="images/toystory.jpg" alt="" />
  <img src="nivo-slider/demo/images/apresentacao03.jpg" data-thumb="images/up.jpg" alt="" title="" />
                <img src="nivo-slider/demo/images/index_r3_c3.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="nivo-slider/demo/images/03.jpg" data-thumb="images/nemo.jpg" alt="" title="" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong> VENHA  </strong>. 
            </div>
        </div>
 
    </div>
<!--
não ter esse cara aqui, pois vc já importou lá em cima.   
 <script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
-->
  
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
 
<!--proximo item-->
<li> <img src="images/arquitetura.jpg"
alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">
  <map name="Map">
    <area shape="circle" coords="204,149,40" href="images/testedesign.png">
  </map> 
<div>  </ strong> 
<p texto explicativo class="splash-text">. </ P> 
</ div> 
</ li>             
<!--proximo item-->
<li> <img src="images/linguas.jpg"
alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">
  <map name="Map">
    <area shape="circle" coords="204,149,40" href="images/testedesign.png">
  </map> 
<div>  </ strong> 
<p texto explicativo class="splash-text">. </ P> 
</ div> 
</ li>   
<!--proximo item-->
</ ul>
<!--fim slide-->

vitorferreira · Fevereiro 6, 2014

o nivo carrega normal porem o accordion desloca a lista fica uma imagem embaixo da outra

William Bruno · Fevereiro 6, 2014

Como está o seu código agora ?

vitorferreira · Fevereiro 6, 2014

<html>

<head>

<script

src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js"></script><script>

$(document).ready(function() {

$("#splash").zAccordion({

timeout: 6500,

speed: 600,

slideClass: 'slide',

animationStart: function () {

$('#splash').find('li.slide-previous div').fadeOut();

},

animationComplete: function () {

$('#splash').find('li.slide-open div').fadeIn();

},

buildComplete: function () {

$('#splash').find('li.slide-closed div').css('display', 'none');

$('#splash').find('li.slide-open div').fadeIn();

},

startingSlide: 0,

slideWidth: 600,

width: 820,

height: 270,

auto: true

});

</script>

<!--

#apDiv1 {

position:absolute;

width:200px;

height:115px;

z-index:1;

left: 380px;

top: 56px;

}

#apDiv2 {

position:absolute;

width:54px;

height:30px;

z-index:2;

left: 115px;

top: 363px;

}

-->

</style>

</head>

<body>

<tr>

<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>

</div>

</div></td>

</tr>

<tr>

</tr>

</table>

$(window).load(function() {

$('#slider').nivoSlider();

});

</script>

<li> <img src="images/saude.jpg"

alt = "" border="0" usemap="#Map2" style = "width: 618px; height: 262px;">

</map>

</ div>

</ li>

<li> <img src="images/adm.jpg"

alt = "" border="0" usemap="#Map3" style = " width: 618px; height: 262px; ">

</map>

</ div>

</ li>

<li> <img src="images/Sem Título-1.jpg"

alt = "" style = "width: 618px; height: 262px;">

</ strong>

</ div>

</ li>

<li> <img src="images/informatica.jpg"

alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">

</map>

</ div>

</ li>

<li> <img src="images/arquitetura.jpg"

alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">

</map>

</ div>

</ li>

<li> <img src="images/linguas.jpg"

alt = "" border="0" usemap="#Map" style = "width: 618px; height: 262px;">

</map>

</ div>

</ li>

</ ul>

</body>

</html>

William Bruno · Fevereiro 6, 2014

aperte Ctrl + Shift + J no Firefox ou Chrome e veja oque aparece no console de erros.

Leia para entender oq são os erros:

http://wbruno.com.br/javascript-puro/como-debugar-javascript-firefox-erros-comuns/

vitorferreira · Fevereiro 10, 2014

depois de organizado tudo foi criado em outra pagina uma janela modal , porem no IE roda perfeito ja nos outros navegadores nao funciona direito a imagem popup do modal roda no meio da pagina. o q fazer?

<html>

<head>

$(document).ready(function() {

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

$('#dialog2').css('top', winH/2-$('#dialog2').height()/2);

$('#dialog2').css('left', winW/2-$('#dialog2').width()/2);

$('#dialog2').fadeIn(2000);

$('.window .close').click(function (e) {

e.preventDefault();

$('#mask').hide();

$('.window').hide();

});

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

</script>

#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:transparent;

display:none;

}

#boxes .window {

position:absolute;

left:0;

top:0;

width:400px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #dialog2 {

background:transparent;

width:650px;

margin:0 auto;

margin-top:-160px;

}

.close{display:block; text-align:right;}

</style>

<script

src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js"></script>

$(document).ready(function() {

$("#splash").zAccordion({

timeout: 6500,

speed: 600,

slideClass: 'slide',

animationStart: function () {

$('#splash').find('li.slide-previous div').fadeOut();

},

animationComplete: function () {

$('#splash').find('li.slide-open div').fadeIn();

},

buildComplete: function () {

$('#splash').find('li.slide-closed div').css('display', 'none');

$('#splash').find('li.slide-open div').fadeIn();

},

startingSlide: 0,

slideWidth: 600,

width: 720,

height: 400,

auto: true

});

</script>

<style>

#splash div {-moz-border-radius:5px;-webkit-border-radius:5px;background-color:rgba(0,0,0,0.4);border-radius:5px;bottom:0;margin:10px;padding:5px;position:absolute;z-index:10;}

#splash h2 {font-size:1.4em;margin-bottom:5px; font-family:Verdana, Geneva, sans-serif;}

#splash strong {color:white;font-size:1.21em;text-shadow:none; font-family:Verdana, Geneva, sans-serif;}

#splash p {color:white;font-size:1.03;line-height:1.2em;margin:0!important;text-shadow:none; font-family:Verdana, Geneva, sans-serif;}

</style>

</head>

<body>

</div>

</div>

<tr>

</td>

</tr>

<tr>

<li> <img src="../www/flash/nivo-slider/demo/images/4.jpg"

alt="" style="width: 600px; height: 400px;">

</div>

</li>

<li> <img src="../www/flash/nivo-slider/demo/images/index_r3_c3.jpg"

alt="" style="width: 600px; height: 400px;">

</div>

</li>

<li> <img src="../www/flash/nivo-slider/demo/images/03.jpg"

alt="" style="width: 600px; height: 400px;">

</div>

</li>

<li> <img src="../www/flash/nivo-slider/demo/images/02.jpg"

alt="" style="width: 600px; height: 400px;">

</div>

</li>

</ul>

</td>

</tr>

<tr>

</tr>

</table>

</html>

Arquivado

dois plugins jquery nao funcionam na mesma pagina

Recommended Posts

vitorferreira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitorferreira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitorferreira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitorferreira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

vitorferreira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante