Jquerty image slider e slideshow de patrocínios

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Jquerty image slider e slideshow de patrocínios

Mensagem por Possessed 13.04.13 13:48

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
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Jquerty image slider e slideshow de patrocínios

Mensagem por .Danni. 13.04.13 13:59

Bom dia,

Veja este tutorial: https://ajuda.forumeiros.com/t51052-

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Jquerty image slider e slideshow de patrocínios

Mensagem por Convidado 13.04.13 14:49

Saudações!

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>
Basta editar como queira, o locais que aceitam HTML são "Home page", "Gestão de páginas de HTML", Widget e se acaso estiver o HTML ativo em seu fórum nos tópicos.

Até Piscada
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Jquerty image slider e slideshow de patrocínios

Mensagem por Possessed 13.04.13 17:24

Não funcionou Pablo. Veja.

http://lordstesting.omeuforum.net/
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Jquerty image slider e slideshow de patrocínios

Mensagem por seender 15.04.13 14:45

Olá!

Não fornecemos suporte a códigos jQuery aqui no fórum dos fóruns.

Até mais!
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Jquerty image slider e slideshow de patrocínios

Mensagem por Evidaaηc 15.04.13 16:02

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 />
Evidaaηc

Evidaaηc
Membro

Membro desde : 06/07/2012
Mensagens : 706
Pontos : 966

http://world.forumbrasil.net/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste sub-fórum
Não podes responder a tópicos