Como colocar logo aleatório no meu fórum?

[Eduardo Lima]

Detalhes da questão

Endereço do fórum: http://www.brasilplayforever.com/forum
Versão do fórum: phpBB3

Descrição

Tava querendo colocar logo aleatório que mude conforme o tempo estipulado... peguei o código do tópico abaixo, mas não tive sucesso... queria uma forcinha de vocês para poder consertar isso.

https://ajuda.forumeiros.com/t22290-tutorial-logo-aleatorio

[iScroll]

Tente esse JS em todas as páginas:

Código:

; (function ($) {
        'use strict';
   
        var slides, list, styles;
   
        slides = [{
            image: 'LINK DA IMG',
            link: 'LINK PARA ONDE A IMAGEM VAI REDIRECIONAR'
        }];
   
        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);

[Eduardo Lima]

Tente esse JS em todas as páginas:

Código:

; (function ($) {
        'use strict';
   
        var slides, list, styles;
   
        slides = [{
            image: 'LINK DA IMG',
            link: 'LINK PARA ONDE A IMAGEM VAI REDIRECIONAR'
        }];
   
        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);

Não entendi essa parte: 'LINK PARA ONDE A IMAGEM VAI REDIRECIONAR'
Tô querendo colocar mais de um logo que fique alternando conforme o tempo, sem precisar atualizar a página... sabe, passa uns segundos e muda de logo, depois muda pra outro, assim por diante...

[iScroll]

Esse código faz exatamente isso, só que esse só da pra adicionar uma imagem pq apaguei onde colocava o 2º e 3º banner.
O link de onde vai redirecionar é qnd clicar na imagem, no caso do seu fórum redireciona para /forum.

O código está ai, creio que os moderadeiros podem lhe ajudar com a configuração dele.
Mas faça o teste com 1 banner mesmo para ver se funciona e não dá nenhum erro.

[Eduardo Lima]

Testei aqui e não resulta em nada

[Fraise]

Boas,

Eu testei e o código está funcional, Eduardo. Você seguiu os passos do tutorial corretamente?
O JavaScript a ser utilizado é este aplicado em todas as páginas:

Código:

var banner = new Array();

banner[0]='ENDERECO_DA_IMAGEM';
banner[1]='ENDERECO_DA_IMAGEM2';
banner[2]='ENDERECO_DA_IMAGEM3';

document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

É só substituir ENDERECO_DA_IMAGEM, ENDERECO_DA_IMAGEM2, ENDERECO_DA_IMAGEM3 pelas respetivas imagens desejadas.

Abraço.

[Shek]

Boa noite.

Primeiramente, recomendamos não usar tags ou prefixos em suas dúvidas, por favor. Isso não é vantajoso.

Para complementar a resposta do Fraise, o funcionamento do código pode estar sendo comprometido em sua comunidade simplesmente pelo fato de haver milhares de erros de scripts. Ao entrar no fórum já vejo que há colisões nos scripts:
- http://www.brasilplayforever.com/15489.js
- http://www.brasilplayforever.com/99011.js
- http://www.brasilplayforever.com/12557.js

Se não corrigir estes erros apresentados no Console, qualquer script que incluir no fórum não vai funcionar.

Atenciosamente.

[Eduardo Lima]

Desativei/excluí os scripts que estavam em colisão... apenas um que não posso, que é um sistema de logs que temos para ver os moderadores que editem a barrinha de avisos dos usuários... esse script está investido em todas as páginas.
Eu não sou nenhum programador, então nem sei se o script tem alguma parte errada, mas ele está funcionando.

Mesmo assim, o código não resulta. ):

Aparece esse erro no console: 19343.js:1 Uncaught TypeError: Cannot read property 'firstChild' of null

[Shek]

Olá!

Então, este script: http://www.brasilplayforever.com/19343.js é o problema? Reaplique o tutorial Logo rotativo: https://ajuda.forumeiros.com/t22323-tutorial-logo-rotativo O firstChild está retornando valor nulo. É como se não houvesse nada lá.

Se não usas mais este script, é recomendável desativá-lo.

[Eduardo Lima]

Deletei o script anterior e criei outro do tutorial Logo rotativo (na qual já estava): http://www.brasilplayforever.com/15045.js mas continua dando esse erro no console: firstChild. Desativei todos os scripts só para ver se estava dando conflito com algum, mas mesmo assim não funciona...

[Luiz]

Troque por:

Código:

(function ($) {
  'use strict';

  // Lista de URL's das logos:
  var logos = [
    'https://i.imgur.com/VwWqItZ.png',
    'endereço_url_2',
    'endereço_url_3',
    '...'
  ];

  $(function () {
    // Gerar um número aleatório de acordo com a quantidade de URL's listadas acima.
    var $el    = $('#logo > img');
    var number = Math.floor(Math.random() * logos.length);

    // Trocar o atributo `src` original:
    $el.attr('src', logos[number]);
  });
}(jQuery));

Você poderá configurar as URL's nesse array:

Código:

var logos = [
  'https://i.imgur.com/VwWqItZ.png',
  'endereço_url_2',
  'endereço_url_3',
  '...'
];

Lembre-se de adicionar uma vírgula após cada URL, exceto na última da lista, como no exemplo acima.
Espero ter ajudado. o/

[Eduardo Lima]

Perfeito, está trocando agora, mas só quando atualiza a página... tem como fazer com que troque sozinho em um tempo X sem que precise atualizar a página? Com algum efeito na troca, sem ser diretão, sacas?

[Luiz]

Aí é mais fácil que o senhor crie um slider para o seu fórum:
-> https://ajuda.forumeiros.com/t98820-tutorial-gerador-de-slides

Creio que não seja possível fazer uma "transição leve" para mudanças de atributo, como o src.

o/

[Eduardo Lima]

Muito obrigado, irei usar esse formulário aí, Luiz.


Grato a todos.

[Kyo Panda]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.