Προβολή εικόνας

Γεια σας,

πως μπορώ να φτιάξω στην σελίδα μου
να φαινεται η πρωτη εικονα του θεματος πριν μπεις στο θεμα μεσα;

Παράδειγμα:

Kώστα ευχαριστούμε για το ενδιαφέρον που δίχνεις να ρωτάς και να μαθαίνεις , όταν θα μπει ο Παυλος θα σε βοηθησει περι αυτου . Αν μπορεις κανε λιγο πιο συγκεκριμενα τη εκδοση εχεις και λιγο πιο αναλυτικα τι θελεις , αν υπαρχει καμια εικονα εδω στο φορουμ που να διευκρινιζει αυτο που θελεις , στα λεω αυτα γιατι θα στα ρωτησει ο Παυλος.

Το θέλω για την punBB γιατί θα αναβαθμίσω την σελίδα μου και όσο για αυτό που ζητάω το βρήκα σε ένα ελληνικό φόρουμ στην Forumotion με την έκδοση που θα βάλω και εγώ την punBB. Τώρα αυτό που ζητάω είναι να φαίνεται η πρώτη φωτογραφία του θέματος πριν μπεις στην δημοσίευση πχ.

Για την εικονα δεν νομιζω να μπορει να γινει το μονο που γνωριζω εναι το avatar του τελευταιου μελους που σχολιαζει φαινεται.

Ακομα μπορεις να προσθεσεις εσυ καποιες εικονες στα θεματα πριν μπεις μεσα να βαλεις καποιες στανταρ και να τις προσθετεις πριν φτιαξεις το θεμα ετσι θα φαινεται πριν μπεις μεσα αλλα θα πρεπει ο αλλος να μπει στην κατηγορια για να το δει.

Κατα τη γνωμη μου ανοιξε ολες τις κατηγοριες να φαινονται καθως και τα θεματα,ο αλλος δεν θα κανει εγγραφη για να μπει μεσα χωρις να δει τι εχεις ηδη μεσα στα θεματα.
Μπηκα πριν λιγο στη σελιδα σου ειδα καποιες κατηγοριες με θεματα οταν πατησα μεσα να δω τι εχει μου ζητησε να κανω εγγραφη.Αυτο δεν τραβαει τον αλλο καθως δεν θα χασει καποιος 2 λεπτα απο το χρονο του για να κανει εγγραφη αν δεν βλεπει απο εξω τι εχει μεσα η σελιδα.

Θα βάλεις στο css:

Κώδικας:

.list_image {
    display: block;
    height: 70px;
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.list_imagepreview {
    float: left;
    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;
}

Και javascript: --> In the sub-forums

Κώδικας:

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('scroll.' + 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('scroll.' + 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');
                        }
                    }
                });
            }
      }
    }

Το θεμα να κλεισει. Ευχαριστω