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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» Remover cores da categoria e do menu iniciar
Hoje à(s) 14:03 por xBreninho_.

» Avatar que "gira"
Hoje à(s) 13:46 por Appoloz

» Título mensagem privada
Hoje à(s) 13:46 por Appoloz

» Efeito ao passar o Mouse no Nick
Hoje à(s) 12:51 por Brunelli

» Tema do Meu fórum Mais Avançado.
Hoje à(s) 12:10 por Cepheus

» Versão mais avançada
Hoje à(s) 9:39 por David Silva

» Descrição da categoria
Hoje à(s) 7:37 por Jhool

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Magazine 2016
Participe da pesquisa de satisfação 2016 e dê sua opinião sobre os diversos serviços de Forumeiros.
Parceiros Forumeiros
Quem está conectado
185 usuários online :: 6 usuários cadastrados, 1 Invisível e 178 Visitantes :: 2 Motores de busca

[NVC]Brahma, Alexandre Gori, iScroll, Quakeline, xBreninho_., zNeon

[ 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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 2821
Pontos Ativos : 4200

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 2821
Pontos Ativos : 4200

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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 : 1916
Pontos Ativos : 4598

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 9

Masculino
Inscrito dia : 08/03/2015
Mensagens : 220
Pontos Ativos : 999

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