Jquerty image slider e slideshow de patrocínios
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Jquerty image slider e slideshow de patrocínios
Qual é minha questão:
Boas,
Queria saber se alguém me consegue arranjar o código para criar um slideshow como este:
http://www.serie3.info/s3slider/demonstration
Vi o setup aqui (http://www.serie3.info/s3slider/) mas não sei como arrumá-lo.
O objectivo era colocá-lo no portal e passar lá as notícias.
Outra coisa era arranjar um slideshow daqueles de patrocínios onde aparecem os logos a rolar de uma ponta a outra.
Estas duas coisas que procuro estão neste site: http://www.vavgaming.com/
É algo desse género que quero.
Cumprimentos.
Endereço do meu fórum:
http://www.thelordsclan.com
Versão do fórum:
INVISION
Boas,
Queria saber se alguém me consegue arranjar o código para criar um slideshow como este:
http://www.serie3.info/s3slider/demonstration
Vi o setup aqui (http://www.serie3.info/s3slider/) mas não sei como arrumá-lo.
O objectivo era colocá-lo no portal e passar lá as notícias.
Outra coisa era arranjar um slideshow daqueles de patrocínios onde aparecem os logos a rolar de uma ponta a outra.
Estas duas coisas que procuro estão neste site: http://www.vavgaming.com/
É algo desse género que quero.
Cumprimentos.
Endereço do meu fórum:
http://www.thelordsclan.com
Versão do fórum:
INVISION
Re: Jquerty image slider e slideshow de patrocínios
Saudações!
Peguei o código do site passado aqui está os três exemplos que mostra.
Exemplo 1
Exemplo 2
Exemplo 3
Até
Peguei o código do site passado aqui está os três exemplos que mostra.
Exemplo 1
- Código:
<h4>Example 1</h4>
<p>This example shows the layer appears on top or bottom.</p>
<div id="slider0">
<ul id="slider0Content">
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/1.jpg" />
<span class="top"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" />
<span class="top"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" />
<span class="bottom"><strong>In hac habitasse</strong><br />Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" />
<span class="bottom"><strong>Fusce rhoncus</strong><br />Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" />
<span class="top"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
</li>
<div class="clear slider0Image"></div>
</ul>
</div>
<!-- // slider0 -->
<br />
Exemplo 2
- Código:
<h4>Example 2</h4>
<p>This example shows the layer appears on left or right.</p>
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/1.jpg" width="650" height="271" />
<span class="left offset"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
</li>
<li class="slider1Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/2.jpg" width="650" height="271" />
<span class="right"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
</li>
<li class="slider1Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/3.jpg" width="650" height="271" />
<span class="right offsetRight"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span>
</li>
<li class="slider1Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/4.jpg" width="650" height="271" />
<span class="left"><strong>Fusce rhoncus</strong><br />Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.</span>
</li>
<li class="slider1Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/5.jpg" width="650" height="271" />
<span class="right"><strong>In hac habitasse</strong><br />Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio.</span>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
<!-- // slider1 -->
<br />
Exemplo 3
- Código:
<h4>Example 3</h4>
<p>This example shows the layer appears on all sides (left, right, bottom or top).</p>
<div id="slider2">
<ul id="slider2Content">
<li class="slider2Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/5.jpg" width="650" height="271" />
<span class="top"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
</li>
<li class="slider2Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/4.jpg" width="650" height="271" />
<span class="left offset"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
</li>
<li class="slider2Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/1.jpg" width="650" height="271" />
<span class="bottom"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span></li>
<li class="slider2Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/2.jpg" width="650" height="271" />
<span class="right"><strong>Fusce rhoncus</strong><br />Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.</span>
</li>
<li class="slider2Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/3.jpg" width="650" height="271" />
<span class="bottom"><strong>In hac habitasse</strong><br />Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio.</span>
</li>
<div class="clear slider2Image"></div>
</ul>
</div>
<!-- // slider2 --> <h4>Google ads</h4>
<div class="google-ads-holder">
<script type="text/javascript"><!--
google_ad_client = "pub-4107133095318878";
/* 728x90, for s3slider page */
google_ad_slot = "3008033110";
google_ad_width = 720;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</section>
<aside>
<h3 class="title">workshop</h3>
<ul>
<li>
<h4><a href="/s3slider">s3Slider, slick jQuery slideshow plugin</a></h4><p>
ABOUT
The s3Slider jQuery plugin is made by example of jd`s ...</p>
</li>
<li>
<h4><a href="/s3capcha">s3Capcha, jQuery captcha plugin</a></h4><p>
ABOUT
The s3Capcha jQuery plugin is made by an example of We...</p>
</li>
<li>
<h4><a href="/s3shareit">s3ShareIt, fancy social share jQuery plugin</a></h4><p>
ABOUT
The s3ShareIt jQuery plugin is a fancy social network ...</p>
</li>
<li>
<h4><a href="/affordable-word-of-mouth">Affordable word of mouth for you or your customers?</a></h4><p>
Affordable word of mouth for you or your customers?
I can ...</p>
</li>
</ul>
Até
Convidado- Convidado
Re: Jquerty image slider e slideshow de patrocínios
Olá!
Não fornecemos suporte a códigos jQuery aqui no fórum dos fóruns.
Até mais!
Não fornecemos suporte a códigos jQuery aqui no fórum dos fóruns.
Até mais!
Re: Jquerty image slider e slideshow de patrocínios
Olá,Adicione em uma Pagina HTML:
- Código:
<!-- CSS -->
<link href="/css/s3Slider/s3Slider.css" rel="stylesheet" type="text/css" media="screen" />
<!-- JavaScripts-->
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider0').s3Slider({
timeOut: 3000
});
$('#slider1').s3Slider({
timeOut: 4000
});
$('#slider2').s3Slider({
timeOut: 5000
});
});
</script>
<h4>Example 1</h4>
<p>This example shows the layer appears on top or bottom.</p>
<div id="slider0">
<ul id="slider0Content">
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/1.jpg" />
<span class="top"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" />
<span class="top"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" />
<span class="bottom"><strong>In hac habitasse</strong><br />Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" />
<span class="bottom"><strong>Fusce rhoncus</strong><br />Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.</span>
</li>
<li class="slider0Image">
<img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" />
<span class="top"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
</li>
<div class="clear slider0Image"></div>
</ul>
</div>
<!-- // slider0 -->
<br />
Tópicos semelhantes
» Slider top 5
» Como por image no nick
» Adicionar image shack no meu fórum
» Instalação de um slider
» Código do slider
» Como por image no nick
» Adicionar image shack no meu fórum
» Instalação de um slider
» Código do slider
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos