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

Esqueci minha senha

Últimos assuntos
» Kit avatar e assinatura.
Hoje à(s) 06:16 pm por Fou-Lu

» [Avatar] Fórum
Hoje à(s) 06:10 pm por Fou-Lu

» Rank para o meu fórum | Nota: O pedido será liberado em [23/10/2017]
Hoje à(s) 05:46 pm por Fou-Lu

» Rank para meu fórum
Hoje à(s) 05:40 pm por Fou-Lu

» [Ranks] Ranks para Fórum
Hoje à(s) 05:36 pm por Fou-Lu

» Botoes aprovado e reprovado
Hoje à(s) 05:34 pm por Fou-Lu

» botão Drop Down no Widgets
Hoje à(s) 04:42 pm por Lancer91

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
iScroll
 
Ketholy123
 
Matt Shultz
 
Harleen
 
Shek
 
T1ag0
 
Fou-Lu
 
zHugh
 
PlayWillian
 

Quem está conectado
266 usuários online :: 10 usuários cadastrados, Nenhum Invisível e 256 Visitantes :: 2 Motores de busca

Fou-Lu, Hancki, Ketholy123, Lancer91, Lecxa, Luiz, ofmelo.man-blog.net, Pedxz, Railison Ramon, soldado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 04/11/16, 04:17 pm

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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 04/11/16, 06:56 pm

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 : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 04/11/16, 10:09 pm

Não resultou, amigo.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por while em 04/11/16, 11:14 pm

avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 04/11/16, 11:19 pm


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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por while em 04/11/16, 11:29 pm

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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279
  • 0

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 04/11/16, 11:34 pm

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 : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 05/11/16, 03:59 pm

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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 05/11/16, 06:09 pm

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!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 05/11/16, 06:15 pm

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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 05/11/16, 06:23 pm

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 : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 05/11/16, 06:36 pm

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 05/11/16, 06:43 pm

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!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 05/11/16, 06:58 pm

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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por Kyo Panda em 05/11/16, 07:00 pm

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

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

^-^


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Slide na pagina inicial

Mensagem por iScroll em 05/11/16, 07:07 pm

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

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1385
Pontos Ativos : 1892

Ver perfil do usuário http://ultimatelife.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