Miniatura de imagem dos tópicos

Ir em baixo

Miniatura de imagem dos tópicos Empty Miniatura de imagem dos tópicos

Mensagem por JScript em Ter 04 Mar 2014, 2:20 am

Olá!

Este tutorial permite exibir uma miniatura de uma imagem postada na primeira mensagem do tópico!

Principais características:
- Cria uma miniatura automaticamente a partir da primeira mensagem de um tópico e exibe como uma miniatura do tópico.
- Pré-visualização de imagem quando o mouse está em cima da miniatura.
- Para evitar a proteção do Request Limit, só é feita a requisição ao tópico para obter a imagem se e somente se estiver visível na tela! Em outras palavras: As imagens só aparecerão a medida que o usuário vai visualizando a página.

Basta adicionar este código na seção de JavaScript com investimento nos sub-fóruns:
Código:

/***
 * Application: Topic Thumbnail
 * Description: This application can displays thumbnails of topics.
 * Version: 1.03032014-jq1.9.1 - Udyat (Argumentum parvam)
 * Made and Optimizations by JScript - 2014/03/03
 * View more in: http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
$(function () {
    var sCSS =
        '<style>' +
        '.bim_mainThumb {' +
            'opacity: 1;' +
            'visibility: visible;' +
            'max-width: none;' +
            'max-height: none;' +
            'width: 100%;' +
            'height: auto;' +
            'display: block;' +
            'image-rendering: auto' +
        '}' +
        '.bim_thumbPreview {' +
            'float: right;' +
            'position: relative;' +
            'z-index: 0;' +
        '}' +
        '.bim_img_container {' +
            'height: 70px;' +
            'width: 70px;' +
        '}' +
        '.bim_thumbPreview span {' +
            'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);' +
            'margin-left: 84px;' +
            'margin-top: -68px;' +
            'position: absolute;' +
            'visibility: hidden;' +
            'z-index: 100;' +
        '}' +
        '.bim_thumbPreview:hover span {' +
            'visibility: visible;' +
        '}' +
        '.bim_thumbPreview span img {' +
            'border: 3px solid #000000;' +
            'max-width: 300px;' +
        '}' +
        '</style>';
    document.head.insertAdjacentHTML('beforeEnd', sCSS);

    var sHtml =
            '<a class="bim_thumbPreview">' +
                '<div style="padding: 1px; border: 1px solid #d5d5d5;">' +
                    '<div class="thumbIMG">' +
                        '<div class="bim_img_container" style="overflow: hidden; background-image: none;">' +
                            '<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<span class="previewIMG"><img src="http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg"></span>' +
            '</a>';
   
    var oTarget = 0,
        sFound = 'td:eq(2)',
        sInsert = '',
        sCommon = 'a.topictitle',
        sOverflow = 'auto',
        sGetIMG = '';
       
    /* Forum versions! */
    var phpBB2 = jQuery('#emptyidcc table:eq(1).forumline tbody tr');
    var phpBB3 = jQuery('.topiclist.topics.bg_none li');
    var punbb = jQuery('.statused tr');
    var invision = jQuery('.borderwrap table.ipbtable tbody tr');
   
    if (phpBB2.length) {
        oTarget = phpBB2;
        sInsert = 'div.topictitle';
        sGetIMG = '.postbody:first div:eq(0) img:first';
    } else if(phpBB3.length) {
        oTarget = phpBB3;
        sFound = 'dd.dterm';
        sInsert = 'div.topic-title-container';
        sOverflow = 'inherit';
        sGetIMG = '.postbody:first .content img:first';
    } else if(punbb.length) {
        oTarget = punbb;
        sFound = '.tcl.tdtopics';
        sInsert = 'span.status';
        sGetIMG = '.entry-content:first img:first';
    } else if(invision.length) {
        oTarget = invision;
        sInsert = sCommon;
        sGetIMG = '.post-entry:first img:first';
    };

    oTarget.each(function( index ) {
        var oFound = jQuery(this).find(sFound);
        var oInsert = oFound.find(sInsert);
        var sUrl = oFound.find(sCommon).attr('href');
        var ID = 'Udyat_' + index;

        oFound.attr('id', ID);
        oFound.css('overflow', sOverflow);
        jQuery(sHtml).insertAfter(oInsert);

        /***
        * Only show the image if is visible in browser window (view port)!!!
        * Made and Optimizations by JScript at www.jscript.forumeiros.com
        */
        var elem = document.getElementById( ID );       
        if (isInViewPort(elem)) {
            jQuery.get(sUrl, function(data) {
                var oImg = jQuery(sGetIMG, data);
                var sImg = '';

                if (oImg !== undefined) {
                    sImg = oImg.attr('src');
                    if (sImg !== undefined) {
                        oFound.find('.bim_img_container img').attr('src', sImg);
                        oFound.find('.previewIMG img').attr('src', sImg);
                    } else {
                        oFound.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                    }
                }
            });           
        } else {
            /* Fire event for 'scroll' to show the image... */
            jQuery(window).on('scroll.' + sUrl, showImage(sUrl, elem, oFound, sGetIMG));
        }
    });
});
/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
   var rect = elem.getBoundingClientRect();

   return (
   rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
/* Start function to show the image... */
function showImage(event, elem, oBject, sString) {
   return function() {
        /* Chech if the element is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.' + event);
            jQuery.get(event, function(data) {
                var oImg = jQuery(sString, data);
                var sImg = '';

                if (oImg !== undefined) {
                    sImg = oImg.attr('src');
                    if (sImg !== undefined) {
                        oBject.find('.bim_img_container img').attr('src', sImg);
                        oBject.find('.previewIMG img').attr('src', sImg);
                    } else {
                        oBject.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                    }
                }
            });
        }
   }
}
Nota: Funciona em todas as versões!

Resultado:
Miniatura de imagem dos tópicos W1w3CVX

JS
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

http://autoitbrasil.com

Voltar ao Topo Ir em baixo

Miniatura de imagem dos tópicos Empty Re: Miniatura de imagem dos tópicos

Mensagem por waghcwb em Ter 04 Mar 2014, 10:18 am

Hum é um tanto interessante esse recurso! Obrigado JScript


The quieter you become, the more you are able to hear

Miniatura de imagem dos tópicos Btn_viewmy_160x25_pt_BR



study
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

http://wagneraugusto.com.br/

Voltar ao Topo Ir em baixo

Miniatura de imagem dos tópicos Empty Re: Miniatura de imagem dos tópicos

Mensagem por DiogoR. em Seg 09 Mar 2015, 6:42 pm

Um efeito espetacular.

Mas da para implementar apenas em 2 ou 3 áreas no meu forum ?

Pois queria que aparecesse apenas em determinadas areas.


Edit:
@D.Rocha -> Com certeza que sim, abra um tópico e relate o que deseja!

JS


Última edição por JScript em Seg 09 Mar 2015, 7:08 pm, editado 1 vez(es) (Razão : Editar para não postar!)
DiogoR.
DiogoR.
Membro
Membro

Time Online : 325d 4h 18m 58s
Mensagens : 93
Data de inscrição : 03/03/2015

Voltar ao Topo Ir em baixo

Miniatura de imagem dos tópicos Empty Re: Miniatura de imagem dos tópicos

Mensagem por Helix em Sex 17 Jul 2015, 9:49 am

Obrigado pelo tutorial
Helix
Helix
Novato

Time Online : 25m 40s
Mensagens : 2
Data de inscrição : 17/07/2015

Voltar ao Topo Ir em baixo

Miniatura de imagem dos tópicos Empty Re: Miniatura de imagem dos tópicos

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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