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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Formulário de postagens não redireciona
Hoje à(s) 3:27 por Japis Br

» Personalizar loja
Hoje à(s) 1:16 por YouTube3

» Menu de navegação
Hoje à(s) 1:16 por Biel_Staff

» Border no posthead
Hoje à(s) 1:11 por Jhool

» Mudar aspecto da barra Forumeiros
Hoje à(s) 1:00 por IsmaelS.

» Modificação do nome dos usuários
Hoje à(s) 0:59 por Holkis

» Ranks para fórum
Hoje à(s) 0:32 por Tiger

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
167 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 167 Visitantes :: 2 Motores de busca

Nenhum

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

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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.


^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

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

Não resultou, amigo.
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Slide na pagina inicial

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



Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3071
Pontos Ativos : 4760

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 ?
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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.


Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3071
Pontos Ativos : 4760

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);
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

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.
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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);

^-^



Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

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?
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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;
}

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

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...
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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. >-<"


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

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
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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;
}

^-^


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2731
Pontos Ativos : 5819

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
avatar

iScroll
Usuário avançado

Masculino
Inscrito dia : 08/03/2015
Mensagens : 413
Pontos Ativos : 1337

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