Εικόνα από τα Θέματα στα Sub-Forums

:WAVE:
Θα απαντουσα στο θεμα του Κωστα (https://www.thegreeksenergy.com/t65299-topic)
αλλα εχω να ζητησω αρκετα πραγματα γιαυτο προτιμισα να ανοιξω καινουριο θεμα.
Οι κωδικες του Παυλου λειτουργησαν και τον ευχαριστω πολυ αλλα θα ηθελα καποιες περαιτερω επεξεργασιες.

δεν θελω να εμφανιζεται η εικονα οταν κανω hover. εκτος και αν εμφανιζονται ολοκληρες χωρις να υπαρχει scroll γιατι τωρα ειναι καπως κακο..
Επιπλεον, θα ηθελα αυτες οι εικονες απτα θεματα να εμφανιζονται μονο σε 2 κατηγοριες και οχι σε ολες. Πως μπορω να επιλεξω?
Τελος, τα "icons for topics" (θεμα, hot, ανακοινωση κλπ) καλυπτονται απο τις εικονες



Ευχαριστω εκ των προτερων για οποιες απαντησεις  :h123:

Κώδικας:

jQuery(function () {
        var html =
                '<a class="list_imagepreview">' +
                    '<div style="padding: 1px; border: 1px solid #ddd;">' +
                        '<div class="listimage">' +
                            '<div class="list_image2">' +
                                '<img src="http://2img.net/i/fa/empty.gif" class="list_image">' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '<span class="listimage2"><img src="http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg"></span>' +
                '</a>';
     
        var listt = 0,
            i1 = 'td:eq(2)',
            i2 = '',
            i3 = 'a.topictitle',
            i4 = 'auto',
            i5 = '';
         
      var punbb = jQuery('.statused tr:not(":empty")');
       
if (punbb.length) {
            listt = punbb;
            i1 = '.tcl.tdtopics';
            i5 = '.entry-content:first img';
            i2 = 'span.status';
       
        };

        listt.each(function( index ) {
            var i6 = jQuery(this).find(i1);
            if (i6.length) {
                var list_i = i6.find(i2);
                var listu = i6.find(i3).attr('href');
                var ID = 'imglist_' + index;

                i6.attr('id', ID);
                i6.css('overflow', i4);
                jQuery(html).insertAfter(list_i);

                var elem = document.getElementById( ID );       
                if (isInViewPort(elem)) {
                    jQuery.get(listu, function(data) {
                        var listimg2 = jQuery(i5, data);
                        var listimg = '';

                        if (listimg2 !== undefined) {
                            listimg = listimg2.attr('src');
                            if (listimg !== undefined) {
                                i6.find('.list_image2  img').attr('src', listimg);
                                i6.find('.listimage2 img').attr('src', listimg);
                            } else {
                                i6.find('.list_image2 img').attr('src', 'http://i59.servimg.com/u/f59/15/84/77/97/thumbn10.png');
                            }
                        }
                    });
                } else {

                    jQuery(window).on('' + listu, showImage(listu, elem, i6, i5));
                }
            }
        });
    });

    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() */ );
    }
   
    function showImage(event, elem, oBject, sString) {
      return function() {

          if (isInViewPort(elem)) {
             
            jQuery(window).off('' + event);
                jQuery.get(event, function(data) {
                    var listimg2 = jQuery(sString, data);
                    var listimg = '';

                    if (listimg2 !== undefined) {
                        listimg = listimg2.attr('src');
                        if (listimg !== undefined) {
                            oBject.find('.list_image2 img').attr('src', listimg);
                            oBject.find('.listimage2 img').attr('src', listimg);
                        } else {
                            oBject.find('.list_image2 img').attr('src', 'http://i59.servimg.com/u/f59/15/84/77/97/thumbn10.png');
                        }
                    }
                });
            }
      }
    }

Κώδικας:

.list_image {
    display: block;
    height: 70px;
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.list_imagepreview {
    float: right;
    position: relative;
    z-index: 0;
  margin-left: -30px;
}
.list_image2 {
    height: 70px;
    width: 70px;
}
.list_imagepreview span {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-left: 84px;
    margin-top: -68px;
    position: absolute;
    visibility: hidden;
    z-index: 100;
}
.list_imagepreview:hover span {
    visibility: visible;
}
.list_imagepreview span img {
    border: 1px solid #ddd;
    width: 300px;
}

Επιπλεον, θα ηθελα αυτες οι εικονες απτα θεματα να εμφανιζονται μονο σε 2 κατηγοριες και οχι σε ολες

Δεν γίνεται....

Hover κάνει μόνο αν πατάς πανω στην εικόνα

το video δεν πεζει http://prntscr.com/5e60ls

ναι το ξερω, το εσβησα επειδη λυθηκε το θεμα :)

οκ απλα το ανεφερα