Jump to content

Plugin Coin Slider


Carlos Rocha
 Share

Recommended Posts

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 by carcleo
Link to comment
Share on other sites

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

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 by carcleo
Link to comment
Share on other sites

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

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 by carcleo
Link to comment
Share on other sites

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

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 by carcleo
Link to comment
Share on other sites

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

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
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.