Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Shek Crowley
 
Kyo Panda
 
Yeshua
 
Fou-Lu
 
Kyou
 
Smoke.xX
 
Holkis
 
CharlesIE1H
 
TZero
 
kakakoro
 

Quem está conectado
251 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 242 Visitantes :: 1 Motor de busca

Connor R., Daemon, Draconian, Hidan HZ, Luiz~, Shek Crowley, TZero, vitorsali, xBreninho_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Slide na pagina inicial

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

Resolvido Slide na pagina inicial

Mensagem por iScroll em Sex 4 Nov 2016 - 18:17

Detalhes da questão


Endereço do fórum: testealrpg.forumeiros.com
Versão do fórum: PunBB

Descrição


Olá pessoal.
Queria um slide banner deste modelo : http://i.imgur.com/enjqeyR.png

Igual a esse forum : https://test.cllv.in/darklagoon/

Só que ao invés das setinhas quero apenas umas "Bolinhas" de tamanho médio uma do lado da outra
Se possível também queria que ficasse no banner do meu fórum, Ex: já tem o banner lá ai vai ficar tipo um slide passando com outros banners da mesma dimensão e onde está o banner lá, entenderam?

Seria possível fazer? Desde já agradeço

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sex 4 Nov 2016 - 20:56

Olá,

  • Vá em Painel de controleVisualizaçãoImagens e CoresCoresFolha de estilo CSS e adicione o seguinte código ao final da caixa de texto:
    Código:
    .unslider {
        position: relative;
        overflow: hidden;
    }

    .unslider-nav {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        text-align: center;
    }
  • Vá em Painel de controleMódulosHTML & JavaScriptGestão dos códigos JavaScriptsCriar um novo JavaScript e adicione esse código com Investimento em Todas as páginas:
    Código:
    ; (function ($) {
        'use strict';

        var slides, list, styles;

        slides = [{
            image: 'http://i.imgur.com/EljhHzF.png',
            link: 'http://testealrpg.forumeiros.com'
        }, {
            image: 'http://i.imgur.com/EljhHzF.png',
            link: 'http://testealrpg.forumeiros.com'
        }, {
            image: 'http://i.imgur.com/EljhHzF.png',
            link: 'http://testealrpg.forumeiros.com'
        }];

        styles = [
            'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
            'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
        ];

        list = $('<ul>');

        $(function () {
            $.each(styles, function (key, style) {
                $('<link>', {
                    rel: 'stylesheet',
                    href: style
                }).appendTo('head');
            });

            $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {

                $.each(slides, function (key, slide) {
                    var item, link;

                    if (typeof slide.image !== 'undefined') {
                        item = $('<img>', {
                            src: slide.image
                        });
                    }

                    if (typeof slide.link !== 'undefined') {
                        link = $('<a>', {
                            href: slide.link,
                            html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                        });
                    }

                    $('<li>', {
                        html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                    }).appendTo(list);
                })
               
                $('#branding')
                    .html('')
                    .append(list)               
                    .unslider({
                        arrows: false
                    });
            });
        });
    })(jQuery);

    Você pode configurar quais serão os slides nessa parte do script:

    Código:
    slides = [{
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];

    Sendo image a URL da imagem do slide e link a URL do link do slide.


^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 0:09

Não resultou, amigo.

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por while em Sab 5 Nov 2016 - 1:14


while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2827
Pontos Ativos : 4234

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 1:19


Se pelo que vi não é bem isso que quero, While, seria mais pro meu banner mesmo mais tipo o desse : http://ajuda.forumeiros.com/t69709-pfv-me-passem-um-codigo-desse-slide-de-top#475589de-top

só que no meu banner, teria como ?

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por while em Sab 5 Nov 2016 - 1:29

Poderia me passar o código do seu template overall_header por gentileza?

O template se encontra em:
Painel de Controle -> Visualização -> Templates -> Geral

Mande-me o código dentro da tag [code] aqui no tópico. OBS: Somente a conta /u1 tem acesso aos templates.

Fico no aguardo,
Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2827
Pontos Ativos : 4234

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sab 5 Nov 2016 - 1:34

@iScroll escreveu:Não resultou, amigo.

Erro meu, perdão. Esqueci um ; no código.

Tente trocar o Javascript por esse:

Código:
; (function ($) {
    'use strict';

    var slides, list, styles;

    slides = [{
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];

    styles = [
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
    ];

    list = $('<ul>');

    $(function () {
        $.each(styles, function (key, style) {
            $('<link>', {
                rel: 'stylesheet',
                href: style
            }).appendTo('head');
        });

        $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {

            $.each(slides, function (key, slide) {
                var item, link;

                if (typeof slide.image !== 'undefined') {
                    item = $('<img>', {
                        src: slide.image
                    });
                }

                if (typeof slide.link !== 'undefined') {
                    link = $('<a>', {
                        href: slide.link,
                        html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                    });
                }

                $('<li>', {
                    html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                }).appendTo(list);
            });
           
            $('#branding')
                .html('')
                .append(list)               
                .unslider({
                    arrows: false
                });
        });
    });
})(jQuery);

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 17:59

Isso mesmo Kyo, mais seria possível deixar as bolinhas na lateral direita ? e passar automaticamente num tempo de 8 segundos ?

@while escreveu:Poderia me passar o código do seu template overall_header por gentileza?

O template se encontra em:
Painel de Controle -> Visualização -> Templates -> Geral

Mande-me o código dentro da tag [code] aqui no tópico. OBS: Somente a conta /u1 tem acesso aos templates.

Fico no aguardo,
Até mais.

Obrigado amigo, mais parece que o Kyo já resolveu o que eu queria kk, só falta alguns detalhes.

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sab 5 Nov 2016 - 20:09

Adicione ao CSS:

Código:
.unslider-nav ol {
    text-align: right;
    padding-right: 20px;
}

E troque o código Javascript por esse:

Código:
; (function ($) {
    'use strict';
 
    var slides, list, styles;
 
    slides = [{
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }, {
        image: 'http://i.imgur.com/EljhHzF.png',
        link: 'http://testealrpg.forumeiros.com'
    }];
 
    styles = [
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider.css',
        'http://cdn.rawgit.com/idiot/unslider/master/dist/css/unslider-dots.css'
    ];
 
    list = $('<ul>');
 
    $(function () {
        $.each(styles, function (key, style) {
            $('<link>', {
                rel: 'stylesheet',
                href: style
            }).appendTo('head');
        });
 
        $.getScript('http://cdn.rawgit.com/idiot/unslider/master/dist/js/unslider-min.js', function () {
 
            $.each(slides, function (key, slide) {
                var item, link;
 
                if (typeof slide.image !== 'undefined') {
                    item = $('<img>', {
                        src: slide.image
                    });
                }
 
                if (typeof slide.link !== 'undefined') {
                    link = $('<a>', {
                        href: slide.link,
                        html: typeof item !== 'undefined' ? item.prop('outerHTML') : ''
                    });
                }
 
                $('<li>', {
                    html: typeof link !== 'undefined' ? link.prop('outerHTML') : item.prop('outerHTML')
                }).appendTo(list);
            });
           
            $('#branding')
                .html('')
                .append(list)               
                .unslider({
                    arrows: false,
                    autoplay: true,
                    delay: 8000
                });
        });
    });
})(jQuery);

^-^


Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 20:15

Certo, resolveu a questão de passar automaticamente mais não está aquelas bolinhas no lado direito, seria possível aumentar elas apenas um pouco?

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sab 5 Nov 2016 - 20:23

Troque o CSS que te passei anteriormente por esse:

Código:
.unslider-nav ol {
    text-align: right !important;
    padding-right: 20px !important;
}

.unslider-nav li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    color: transparent !important;
}

^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 20:36

Não resultou, dessa vez sumiu as bolinhas...

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sab 5 Nov 2016 - 20:43

Pelo que vi no CSS, o senhor acabou por remover uma peça adicional do código. Mas tudo bem, adicione esse código ao CSS:

Código:
.unslider {
    overflow: hidden !important;
}

.unslider-nav {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

Uma hora nós acertamos. Desculpe os tropeços até o momento. >-<"

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 20:58

Relaxa man kkk, acontece, pior eu que não consegui nem a metade que tu ta fazendo por mim... Desde já agradeço...

Enfim, ainda não resultou nada, as bolinhas sumiram

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em Sab 5 Nov 2016 - 21:00

Quase lá. Adicione mais essa peça ao CSS:

Código:
.unslider {
    position: relative !important;
}

^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em Sab 5 Nov 2016 - 21:07

Caraca mano!! Simplesmente Pika!! TKS... Te agradeço de coração, se um dia precisar de algo só chamar Feliz hehe

iScroll
Nível 10

Masculino
Inscrito dia : 08/03/2015
Mensagens : 263
Pontos Ativos : 1082

http://testealrpg.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum