Criando Simples Auto Image Slider Vertical

Nenhum comentário
Sorria, pois Jesus te ama

Esta barra é muito simples, como também anteriormente deslizante-slider , slider mesmo este trabalho automaticamente com base nas mais recentes artigos e categorias específicas. Para mais informações, por favor clique na demonstração acima, eu coloquei o controle deslizante na barra lateral direita com largura de 300px . Este olhar deslizante parece com um controle deslizante que existem em modelos de designers indianos como Aeroporto Lasantha , Lansindu , Sameera e outros, que ainda imagens e inserir a URL manualmente. Se você é um usuário de seus modelos artificiais, e quer substituir esse controle deslizante funciona automaticamente, por favor, consulte as seguintes etapas de fabricação:
  1. Uma vez conectado ao Blogger , selecione o blog que você quiser adicionar este slider.
  2. Então vá para Template >> Editar HTML (marque a caixa expandir modelos de widgets )
  3. Apoiado ou armazenado molde em primeiro lugar, se a qualquer momento, ocorre um erro pode ser devolvido à sua forma original.
  4. Clique em "Abrir" e insira o seguinte código acima do código ]]> </ b: skin>  :
    / * Slider * /
    . Sompret-wrapper {float: right; position: relative;}
    . Sompret {overflow: hidden; position: relative; width: 300px ; height: 400px ;}
    . Image_reel {position: absolute; top: 0; esquerda: 0; }
    . Img image_reel {overflow: hidden; float: left; width: 300px ; height: auto;}
    . Paging {background: # 878773; border: 1px solid # 676756; padding: 0 4px 2px; text-align: right; z-index: 100; }
    . Paginação a {text-indent:-9999px; Centro no-repeat; width: 10px; height: 10px; display: inline-block; margin: 3px; border: none; delinear: none; }
    A.active. Paginação {center no-repeat; border: none; delinear: none;}
    . Paginação a: hover {font-weight: bold; border: none; delinear: none;}
    . Crott {width: 280px ; display: none; position: absolute; bottom: 0; Esquerda: 0; z-index: 101; background: 10px; }
    . Crott a {color: # fff; fonte: 16px Oswald}
    . Crott p {color: # fff; fonte: Arial 12px;}
    Código vermelho é o tamanho do cursor acima, para uma largura de 300px e altura de 400px . Observe tudo e você tem que ajustar o tamanho da barra lateral no modelo que você está usando.
  5. Ainda em Editar HTML , insira o seguinte código de script acima </ head > :
    <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
    <script type='text/javascript'>
    / / <! [CDATA [
    jQuery (document) ready (função. () {

    Estado / / Definir padrão de cada peça portfolio
    . (". Busca") $ show ();
    . $ (". Paginação a: first") addClass ("ativo");

    / / Pega o tamanho das imagens, quantos são, em seguida, determin o tamanho da bobina de imagem.
    . var imageWidth = $ (". sompret") LARGURA ();
    . var imageSum = $ (". image_reel img") size ();
    var imageReelWidth = imageWidth * imageSum;

    / / Ajustar o carretel imagem ao seu novo tamanho
    . $ (". Image_reel") css ({'width': imageReelWidth});

    / / Paging + Função Slider
    Gire = function () {
       var triggerID = $ active.attr ("rel") - 1; / / Obtém o número de vezes que a deslizar
       var image_reelPosition = triggerID * imageWidth; / / Determina a distância da bobina imagem precisa deslizar

       . $ (". Paginação a") removeClass ("ativo"); / / Remove todos os tipos ativa
       $ Active.addClass ("ativo"); / / Adicionar classe ativa (US $ ativo é declarado na função rotateSwitch)
     
    . $ (". Crott") stop (true, true) slideUp ("lento").;

    . $ (". Crott") eq ($ () Attr ("rel") - 1 'Paginação a.active.'). SlideDown ("lento").;

       / / Animação Slider
       $ (". Image_reel"). Animar ({
           left:-image_reelPosition
       }, 500);


    };

    / / Rotação + Momento Evento
    rotateSwitch = function () {
    . $ (". Crott") eq ($ () Attr ("rel") - 1 'Paginação a.active.'). SlideDown ("lento").;
       jogar = setInterval (function () {/ / Set temporizador - isso vai se repetir a cada 3 segundos
           . $ Ativo = $ ('. A.active paginação') next ();
           if ($ active.length === 0) {/ / Se a paginação chega ao fim ...
               $ = $ ativos ("paging um:. primeiro '); / / Voltar para a primeira
           }
           girar (); / / Gatilho da paginação e função deslizante
       }, 10000); Velocidade / / Timer em milissegundos (3 segundos)

    };

    rotateSwitch (); / / Função Run em lançamento

     / / Em Click
        $ (". Paginação um"). Clique (function () {  
            $ ativos = $ (this); / / Ative a paginação clicado
            / / Reset temporizador
            clearInterval (reprodução); / / Parar a rotação
            girar (); / Rotação / Gatilho imediatamente
            rotateSwitch (); / Rotação / Resume
            return false; Navegador Salto / / Previne um LigAção Âncora
        });  

    });

    / /]]>
    </ Script>
    <script type='text/javascript'>
    / / <! [CDATA [
    imgr = new Array ();
    imgr [0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-1ec1LKhnrYOm1R9oadC6NehIlJeooC9xLB4hLrLHHEhySsoaJob6bQmJyWio05xYeczjPyEq9Y5owNhgk_nR6LHD0wumhBZdlPcygMzvK6nZ-b91M2V2F5i2aSOarxg5OER8gREUug/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost1 = 80;
    summaryTitle = 20;
    numposts1 = 6 ;

    função removeHtmlTag (strX, costeleta) {
        var s = strx.split ("<");
        for (var i = 0; i <s.length; i + +) {
            if (s [i]. indexOf (">")! = -1) {
                . s [i] = s [i] substring (s [i] indexOf (">") +1, s [i] comprimento..);
            }
        }
        s = s.join ("");
        s = s.substring (0, pique-1);
        retornar s;
    }

    função showrecentposts1 (json) {
    j = (showRandomImg)? Math.floor ((+1 imgr.length) * Math.random ()): 0;
    img = new Array ();
       
      for (var i = 0; i <numposts1; i + +) {
        onde a entrada = json.feed.entry [i];
        . var posttitle = entry.title $ t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0, k <entry.link.length, k + +) {
          if (entry.link [k]. rel == 'alternativo') {
            posturl = entry.link [k] href.;
            break;
          }
        }

    for (var k = 0, k <entry.link.length, k + +) {
          if (entry.link [k]. rel == 'Responde' && entry.link [k]. type == 'text / html') {
            pcm entry.link = [k] title.split ("") [0].;
            break;
          }
        }

        if ("conteúdo" em entrada) {
          var PostContent = entry.content $ t;.}
        outro
        if ("resumo" em entrada) {
          var PostContent = entry.summary $ t;.}
        PostContent mais var = "";
       
        Posteriores = entry.published $ t.;

    if (j> imgr.length-1) j = 0;
    img [i] = imgr [j];

    s = postcontent ; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a), c = s.indexOf (" \ "", b +5); d = s.substr (b +5, cb-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    / / = Cmtext (text! = 'Localidade: Não')? <i> <font Color="'+acolor+'"> ('+ pcm +' '+ Texto +') </ font> </ i> ':'';


    var = MES [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    . dia var = postdate.split ("-") [2] subsequência (0,2);
    var m = postdate.split ("-") [1];
    var y = postdate.split ("-") [0];

    for (var u2 = 0; u2 <month.length; u2 + +) {
    if (parseInt (m) == mês [u2]) {
    m = month2 [u2]; break;
    }
    }

    var daystr = m +'' + dia +'' + y;

    trtd var = '<div class="crott"> <a href="'+posturl+'">' posttitle + + '</ a> <p>' + removeHtmlTag (PostContent, summaryPost1) + "... </ p> </ div> ';
    document.write (trtd);    

     j + +;
    }

    }

    função showrecentposts2 (json) {
    j = (showRandomImg)? Math.floor ((+1 imgr.length) * Math.random ()): 0;
    img = new Array ();
     
      for (var i = 0; i <numposts1; i + +) {
        onde a entrada = json.feed.entry [i];
        . var posttitle = entry.title $ t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0, k <entry.link.length, k + +) {
          if (entry.link [k]. rel == 'alternativo') {
            posturl = entry.link [k] href.;
            break;
          }
        }

    for (var k = 0, k <entry.link.length, k + +) {
          if (entry.link [k]. rel == 'Responde' && entry.link [k]. type == 'text / html') {
            pcm entry.link = [k] title.split ("") [0].;
            break;
          }
        }

        if ("conteúdo" em entrada) {
          var PostContent = entry.content $ t;.}
        outro
        if ("resumo" em entrada) {
          var PostContent = entry.summary $ t;.}
        PostContent mais var = "";
       
        Posteriores = entry.published $ t.;

    if (j> imgr.length-1) j = 0;
    img [i] = imgr [j];

    s = postcontent ; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a), c = s.indexOf (" \ "", b +5); d = s.substr (b +5, cb-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    / / = Cmtext (text! = 'Localidade: Não')? <i> <font Color="'+acolor+'"> ('+ pcm +' '+ Texto +') </ font> </ i> ':'';


    var = MES [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro "];

    . dia var = postdate.split ("-") [2] subsequência (0,2);
    var m = postdate.split ("-") [1];
    var y = postdate.split ("-") [0];

    for (var u2 = 0; u2 <month.length; u2 + +) {
    if (parseInt (m) == mês [u2]) {
    m = month2 [u2]; break;
    }
    }

    var daystr = dia +'' + m +'' + y;

    trtd var = '<a href="'+posturl+'"> <img src="'+img[i]+'"/> </ a>';
    document.write (trtd);    

     j + +;
    }

    }
     / /]]>
    </ Script>
    Observe o código de script vermelho no topo, se o modelo que você instalou o script que qualquer série, o código de script não devem ser incluídos, apenas um jquery existente em um modelo se houver dois ou mais sobreposições e uma de suas funções não é o caminho .. numposts : 6; são o número de mensagens que aparecem na barra
  6. Agora você deseja colocá-lo onde o cursor, se você quiser ser colocado na barra lateral à direita do topo, como mostrado no demo. Encontre código <div id='sidebar-wrapper'> ou barra lateral envolvendo código existente em seu modelo, em seguida, coloque o seguinte código antes ou acima <div id='sidebar-wrapper'> :
    <b:if cond='data:blog.pageType == "item"'>
    <div class='sompret-wrapper'>
    <div class='sompret'>
    <div class='image_reel'>
    <script>
    document.write ("<Roteiro src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
    </ Script> </ div>
    <div class='description'>
    <script>    
    document.write ("<Roteiro src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </ Script>
    </ Div>
    </ Div>
    <div class='paging'>
    <a href='#' rel='1'/>
    <a href='#' rel='2'/>
    <a href='#' rel='3'/>
    <a href='#' rel='4'/>
    <a href='#' rel='5'/>
    <a href='#' rel='6'/>
    </ Div>
    </ Div> </ b: if>
    Descrição:

    Mostrar deslizante usando o código acima apenas visível no post, se você quiser olhar para a página inicial deslizante remover a primeira e última luz azul código. Slider acima exibe o seu mais recente post, se você deseja alterar ser realizada por o rótulo que você acabou de adicionar o código -/your / label entre o código padrão e ? , gostaria que o / default - / sua etiqueta max-results? porque o código acima, há dois, você deve substituir ambos.
  7. Última salvar , feito.
Slider acima, você pode modificar a si mesmo, você também pode usar o controle deslizante para imagens horizontais (não necessariamente vertical) tentar ser mais criativo, alterando o comprimento ea largura do existente neste tutorial ou acrescentar enfeites de fita, por exemplo, como mostra a esta demonstração , de modo que parece mais atraente. Foi um tutorial para fazer um slider simples desta vez, se houver peasan menos óbvio, por favor deixe na área de comentários abaixo.

E para os amigos que já estão participando e animam os fóruns de discussão sobre este blog, gostaria de agradecer, por favor fale com o livre e saudável. Durante algum tempo, eu não tenho sido capaz de acompanhar ou escorregar, porque há muitos trabalhos que eu tenho que terminar . Todos pergunta off-topic neste artigo, por favor entrar no fórum de discussão, clique nos fóruns de discussão disponíveis no menu de navegação superior deste blog.

Nenhum comentário:

Postar um comentário

Postagens mais visitadas