Carlos Rocha Posted October 1, 2014 Report Share Posted October 1, 2014 (edited) Pessoal, estou tentando fazer o plugin Coin Sider funcionar mas não consigo. Do código abaixo todos os anexos estão no lugar e as imagens tambem: Jquery, Coin Slider e seu css. O que ocorre é que as imagens aparecem uma abaixo da outra. Onde estou errando? <html> <head> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="js/coin-slider.js"></script> <script type="text/javascript" src="js/coin-slider.min.js"></script> <link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" /> </head> <body> <div id="coin-slider"> <a href="imagens/slide_1.jpg" target="_blank"> <img src="imagens/slide_1.jpg" > <span>Descricao para a imagem 1</span> </a> <a href="imagens/slide_2.jpg" target="_blank"> <img src="imagens/slide_2.jpg" > <span>Descricao para a imagem 2</span> </a> </div> <script type="text/javascript"> $(document).ready ( function() { $('#coin-slider').coinslider({ width: 900, height:500; navigation: true, delay: 5000 }); } ); </script> </body> </html> Essa é uma tentativa. <div id="coin-slider"> <img src="_img/_banner/banner(1).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(2).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(3).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(4).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(5).jpg" width="980px" height="500px"/> </div> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: '980px', height:'500px' }); }); </script> Em outra tentativa tudo funciona mas não imagens (embora não dê erro), não aparecem! Edited October 1, 2014 by carcleo Link to comment Share on other sites More sharing options...
KTachyon Posted October 1, 2014 Report Share Posted October 1, 2014 Tens um ';' vem dez de uma ',': $('#coin-slider').coinslider({ width: 900, height:500; navigation: true, delay: 5000 }); Mas se tivesses visto os erros do browser já tinhas apanhado o problema. “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.” -- Tony Hoare Link to comment Share on other sites More sharing options...
Carlos Rocha Posted October 1, 2014 Author Report Share Posted October 1, 2014 (edited) Correto. Mas a ideia é usar esse plugin em uma página. Mas as imagens não aparecem. <?php header ("Content-Type: text/html; charset=utf-8"); require_once("_global/_constantes/error.ini"); require_once("_global/_constantes/constantes.ini"); ?> <!DOCTYPE html> <html> <head> <title><?php echo tituloSite; ?></title> <?php require_once("_global/_meta/meta.ini"); ?> <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.png" /> <link type="text/css" rel="stylesheet" href="_global/_css/estiloSite.css" /> <link type="text/css" rel="stylesheet" href="_global/_css/estiloMenu.css" /> <link type="text/css" rel="stylesheet" href="_global/_css/coin-slider-styles.css" /> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/jquery-2.1.1.js"></script> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/coin-slider.js"></script> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/coin-slider.min.js"></script> </head> <body> <div id="coin-slider"> <img src="_img/_banner/banner(1).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(2).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(3).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(4).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(5).jpg" width="980px" height="500px"/> </div> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 900, height:500, navigation: true, delay: 5000 }); }); </script> </body> </html> Se os arquivos são os mesmos, porque as imagens não aparecem? Tú podes ver a funcionar aqui: http://funerariasaopedro.net.br/cetisa/ Edited October 1, 2014 by carcleo Link to comment Share on other sites More sharing options...
KTachyon Posted October 1, 2014 Report Share Posted October 1, 2014 (edited) Não estás a seguir a estrutura da documentação: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ Que até podes ver no repositório: https://github.com/kopipejst/coin-slider/blob/master/index.html Edited October 1, 2014 by KTachyon “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.” -- Tony Hoare Link to comment Share on other sites More sharing options...
Carlos Rocha Posted October 1, 2014 Author Report Share Posted October 1, 2014 (edited) Vamos lá então: Essa parte esta de acordo: <script type="text/javascript" src="_global/_scripts/_funcoes/_js/jquery-2.1.1.js"></script> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/coin-slider.js"></script> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/coin-slider.min.js"></script> Essa também está: <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 900, height:500, navigation: true, delay: 5000 }); }); </script> Pois funciona no arquivo de exemplo. Mas, nessa diz ser preciso colocar links. <div id="coin-slider"> <img src="_img/_banner/banner(1).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(2).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(3).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(4).jpg" width="980px" height="500px"/> <img src="_img/_banner/banner(5).jpg" width="980px" height="500px"/> </div> Seria esse o erro? Não consigo ver esse erro de estrutura. Já experientei fazer assim; <div id="coin-slider"> <a href="_img/_banner/banner(1).jpg" target="_blank"> <img src="_img/_banner/banner(1).jpg" > <span>Descricao para a imagem 1</span> </a> <a href="_img/_banner/banner(1).jpg" target="_blank"> <img src="_img/_banner/banner(1).jpg" > <span>Descricao para a imagem 2</span> </a> </div> Mas não funcionou também. O único erro que ocorre é que as imagens não são exibidas. Edited October 1, 2014 by carcleo Link to comment Share on other sites More sharing options...
KTachyon Posted October 2, 2014 Report Share Posted October 2, 2014 Só precisas ou do coinslider.js ou do coinslider.min.js. E, sim, precisas de ter o o <img> dentro do <a>. “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.” -- Tony Hoare Link to comment Share on other sites More sharing options...
Carlos Rocha Posted October 2, 2014 Author Report Share Posted October 2, 2014 (edited) Veja: .............. <link type="text/css" rel="stylesheet" href="_global/_css/coin-slider-styles.css" /> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/jquery-2.1.1.js"></script> <script type="text/javascript" src="_global/_scripts/_funcoes/_js/coin-slider.js"></script> .............. <div id="coin-slider"> <a href="#"> <img src="_img/_banner/banner(1).jpg" width="980px" height="500px"/> </a> <a href="#"> <img src="_img/_banner/banner(2).jpg" width="980px" height="500px"/> </a> <a href="#"> <img src="_img/_banner/banner(3).jpg" width="980px" height="500px"/> </a> <a href="#"> <img src="_img/_banner/banner(4).jpg" width="980px" height="500px"/> </a> <a href="#"> <img src="_img/_banner/banner(5).jpg" width="980px" height="500px"/> </a> </div> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 980, height:500, navigation: true, delay: 5000 }); }); </script> http://funerariasaopedro.net.br/cetisa/ Ainda não funcionou. Ou seja, as imagens não aparecem. Edited October 2, 2014 by carcleo Link to comment Share on other sites More sharing options...
Carlos Rocha Posted October 2, 2014 Author Report Share Posted October 2, 2014 Achei! Por incrível que pareça Os nomes das imagens estavam assim: Banner(1).jpg, Banner(2).jpg, Banner(3).jpg, Banner(4).jpg, Banner(5).jpg, Ele não estava aceitando os parênteses nos nomes das imagens. Troquei para Banner1.jpg, Banner2.jpg, Banner3.jpg, Banner4.jpg, Banner5.jpg, E agora funcionou! Obrigado! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now