Simple slide show

Nerdmonkey · Março 26, 2015

Boa tarde.

Porque esse plugin não funciona ?

index.html

<div class="pg-contact">
    <aside id="slideshow">
        <ul>
            <li><img src="./view/template/im/assets/slide1.fw.png" alt="Slide 1"></li> 
            <li><img src="./view/template/im/assets/slide2.fw.png" alt="Slide 2"></li>
            <li><img src="./view/template/im/assets/slide3.fw.png" alt="Slide 3"></li>
            <li><img src="./view/template/im/assets/slide4.fw.png" alt="Slide 4"></li>
        </ul>
    </aside>
</div>

style.css

.pg-contact {
    position: relative;}
#slideshow img {
    display: none;
    position: absolute;}

jquery.simpleslideshow.js

    /**
     * Slideshow
     */
    ( function( $ ){
        $.simpleSlideShow = function( selector, settings ){
            // Setings
            var config = {
                'delay' : 2000,
                'fadeSpeed' : 500 
            }
 
            if( settings ){$.extend( config, settings );}
 
            // Variables
            var obj = $( selector );
            var img = obj.children( 'img' );
            var count = img.length;
            var i = 0;
 
            // Show first img
            img.eq( 0 ).show();
 
            // Run slide
            setInterval( function(){
                img.eq( i ).fadeOut( config.fadeSpeed );
                i = ( i + 1 == count ) ? 0 : i + 1;
                img.eq( i ).fadeIn( config.fadeSpeed );
            }, config.delay );
 
            return this;
        }
    })(jQuery);

Use

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="./view/template/js/jquery.simpleslideshow.js"></script>
<script>$.simpleSlideShow( '#slideshow' );</script>

Maykel-ctba · Março 26, 2015

Já debugou no console para ver os erros retornados?

William Bruno · Março 26, 2015

Isso não é um plugin cara.. quem fez não estava muito ciente de como o jQuery trabalha.

Plugins possuem a seguinte assinatura:

jQuery('#slideshow').simpleSlideShow({ delay: 1000 });

Funcionando

http://wbruno.github.io/examples/simple-slideshow/

Código corrigido:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }

#slideshow {
  margin: 0 auto;
  position: relative;
  width: 400px; height: 200px;
}
#slideshow li {
  display: none;
  position: absolute;
}
</style>
</head>
<body>

<div class="pg-contact">
  <aside id="slideshow">
    <ul>
      <li><img src="http://placehold.it/400x200/ff0000" alt="Slide 1"></li>
      <li><img src="http://placehold.it/400x200/00ff00" alt="Slide 2"></li>
      <li><img src="http://placehold.it/400x200/0000ff" alt="Slide 3"></li>
      <li><img src="http://placehold.it/400x200/ffff00" alt="Slide 4"></li>
    </ul>
  </aside>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function($) {
  'use strict';
  $.fn.simpleSlideShow = function(settings) {
    var config = {
      'delay' : 2000,
      'fadeSpeed' : 500
    };
    var $obj  = $(this),
        $lis   = $obj.find( 'li' ),
        count = $lis.length,
        i     = 0;

    $.extend( config, settings || {} );

    $lis.eq( 0 ).show();

    setInterval(function() {
      $lis.eq( i ).fadeOut( config.fadeSpeed );
      i = ( i + 1 == count ) ? 0 : i + 1;
      $lis.eq( i ).fadeIn( config.fadeSpeed );
    }, config.delay );

    return this;
  }
})(jQuery);
</script>
<script>jQuery('#slideshow').simpleSlideShow({ delay: 1000 });</script>

</body>
</html>

Nerdmonkey · Março 26, 2015

Achei bem estranho também, mas segundo o autor isso seria um template para um método :assobiando:

E porque isso ?

...
'use strict';
...

William Bruno · Março 26, 2015

Boas práticas do javascript, ecma5.

Nerdmonkey · Março 26, 2015

A sim, entendi.

Só mais uma pergunta :D

Use this.each para iterar sobre o conjunto atual de elementos correspondentes

Nesse exemplo foi usado

setInterval();
 
return this

Eu posso retornar qualquer loop numa boa para iterar sobre os elementos do objeto ?

William Bruno · Março 26, 2015

Eu posso retornar qualquer loop numa boa para iterar sobre os elementos do objeto ?

hum ?

1. vc não retorna loops

2. quais elementos de qual objeto?

o return this é o próprio elemento jQuery('#slideshow'), apenas uma boa prática do jQuery: não quebre a corrente.

Eu não retornei o loop. Não iterei sobre os elementos do objeto, eu explicitamente peguei eles:

$lis   = $obj.find( 'li' ),

Talvez valha a pena vc reformular a pergunta, pois ela não fez muito sentido, então não sei se consegui te responder.

Nerdmonkey · Março 26, 2015

Jamais, não quero quebrar a corrente e sim, entendê-la. :D

Esse é objeto retornado, correto ?

jQuery('#slideshow')

Porque pelo que venho lendo diz que uma função jQuery sempre deve retornar

return this.each( function(){
// iteração
});

Quer dizer que o

$.simpleSlideShow

é o nosso objeto e nele eu posso configurar o dalay e o fadeSpeed. isso irá me retornar o ? método ? setInterVal() que faz o slide se mover na tela ? Não sei se compliquei mais ainda a pergunta :pinch:

Complementando aqui, porque as duas primeiras variáveis receber o cifrão e a count não recebe ?

William Bruno · Março 26, 2015

Ah sim, então calma...

o que você "vem lendo":

return this.each( function(){

});

se aplica quando o plugin recebe diversos objetos. Como estamos num slideshow, e configuramos um slideshow de cada vez, não fazemos o loop, pois só temos um único objeto, o objeto do ID.

Vou explicar linha por linha.. creio que será mais produtivo.

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

(function($) {
//
})(jQuery);

esse 'invólucro' é uma função anônima auto executável. Nada para se preocupar no momento. O propósito dela é "lacrar" o escopo das nossas variáveis e funções, assim como "deixar amigável" o jQuery para o símbolo $ (assim, evitando conflitos com outras libs que usam esse mesmo apelido).

$.fn.simpleSlideShow = function(settings) {

$ é o jQuery em si.

.fn. é o apelido que o jQuery dá para o prototype dele. Que é uma forma de injetarmos novos métodos em um objeto

.simpleSlideShow é o nome do "plugin" que estamos criando.

function(settings) { é a função em si. O plugin.

settings é o argumento de configurações que pode ser enviado na hora de "usar".

    var config = {
      'delay' : 2000,
      'fadeSpeed' : 500
    };

são as configurações padrões. Caso nada seja enviado, são esses valores que serão usados.

Pulando algumas linhas:

$.extend( config, settings || {} );

esse trecho do extend, é onde o "merge" das configs padrões é feito com aquelas enviadas:

.simpleSlideShow({ delay: 1000 });

então, como enviei o delay, o valor final de config será:

config = {
      'delay' : 1000,
      'fadeSpeed' : 500
    };

com delay em 1000 e não mais 2000, pois o settings sobrescreve pelo extend. Okay ?

    var $obj  = $(this),
        $lis   = $obj.find( 'li' ),
        count = $lis.length,
        i     = 0;

$obj é o elemento em qual o plugin foi chamado jQuery('#slideshow'), apenas um apelido interno, para não usarmos o $(this).. nada de mais.

$lis = $obj.find( 'li' ), é um array com cada uma das tags <li> que são filhas do elemento id="slideshow".

count = $lis.length, é igual a 4, pois temos 4 tags <li>

i = 0; é um contador.

 $lis.eq( 0 ).show();

mostra o primeiro slide. Faz o show() do primeiro li(índice zero). Trocando o display: none; para display: block; Entendeu ? assim que o slideshow "mostra as imagens", trocando display: none para display: block;

Veja o css:

#slideshow li {
  display: none;

TODOS as tags li começam com display: none; E depois quando eu quero mostrar elas, eu vou dando display: block; uma a uma. Escondo uma e mostro outra, isso é como o slideshow funciona.

    setInterval(function() {
      //..
    }, config.delay );

pense no setInterval como um loop, mas não somente isso. Ele executa uma função a cada x milisegundos, e depois de tantos milisegundos, executa novamente, e assim por diante, infinitamente.

config.delay vale 1000, lembra ? no caso 1000ms que equivale a um segundo (1s)

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

Olhando a parte que realmente interessa agora:

$lis.eq( i ).fadeOut( config.fadeSpeed );

lembra da linha $lis(0) ? isso pegava a primeira tag <li> e mostrava ela. Agora essa linha com o fadeOut(), pega a linha onde i nesse momento vale zero e esconde ela. (fadeOut)

$lis.eq( i ).fadeIn( config.fadeSpeed );

essa linha faz a mesma coisa, só que ao inverso, ela mostra em vez de esconder.

E aqui, finalmente a mágica é feita:

i = ( i + 1 == count ) ? 0 : i + 1;

a nossa variável contadora, é limitada ao número de slides que existem, no caso 4 tags <li>, portanto cada vez que o loop setInterval é executado, eu somo + 1 na variável i. Até ela ser menor que 4, pois quando ela chega a 4, eu volto ela para zero, e o slideshow mostra novamente o primeiro slide.

Por fim:

 return this;

retornamos: jQuery('#slideshow')! pois alguém pode vir e continuar a corrente:

jQuery('#slideshow')
    .simpleSlideShow({ delay: 1000 })
    .css({ "color": "#f00" });

"Isso" é a corrente. Vc poder encadear métodos. Não quebramos a corrente, pois ao retornarmos o próprio slideshow, o método .css() irá agir sobre o slideshow!

Essa é uma definição do core do jQuery: "Não quebre a corrente".

É só isso :lol:

Nerdmonkey · Março 26, 2015

Perfeito cara, sua explicação!

Essa linha

i = ( i + 1 == count ) ? 0 : i + 1;

Estava mesmo complicada.

Se i + 1 for == count vai valer zero, voltando pro início, se não será i + 1, o que nos dá a próxima imagem.

Agora ficou claro :joia:

Vou dar uma mega estudada nesses conceitos e utilizar esse tópico pra ir implementando esse slide. Vai ser minha tarefa de casa fazer algo como o jcarousel ou aqueles fullwidth que são lindos. Se precisar pode fechar o tópico por enquanto e obrigadão pela ajuda.

William Bruno · Março 26, 2015

Dá uma olhada nos outros códigos que eu disponiblizei naquele github

https://github.com/wbruno/examples

tem uns 2 ou 3 slides ai, veja o código deles também

Nerdmonkey · Março 26, 2015

Massa. Vou ver sim

Arquivado

Simple slide show

Recommended Posts

Nerdmonkey 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maykel-ctba 233

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

Nerdmonkey 3

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

Nerdmonkey 3

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

Nerdmonkey 3

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

Nerdmonkey 3

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

Nerdmonkey 3

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