BBcode: Anteprima immagine dentro Tooltip [Migliorato]

[Astro86]

Descrizione:
Questo BBcode vi farà creare una miniuatura di un'immagine che al passaggio del mause farà apparire una tooltip arrotondato* contenente l'immagine in dimenzioni reali.
*Alcuni browser non riconoscono lo stile arrotondato!.

Prima di tutto scarica questo zip, scompatta e inserisci la cartella nella root del forum.

js.zip

Infine crea un BBcode e inserisci:

BBcode:

Codice: Seleziona tutto

[imgt]{TEXT}[imgt]

HTML:

Codice: Seleziona tutto

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
            #imgPreviewWithStyles,
            #imgPreviewWithStyles2,
            #imgPreviewWithStyles3 {
                background: #222 url(loading.gif) no-repeat center;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                padding: 15px;
                z-index: 999;
                border: none;
            }
            #imgPreviewWithStyles span,
            #imgPreviewWithStyles2 span,
            #imgPreviewWithStyles3 span {
                color: white;
                font-size: 1em;
                text-align: center;
                display: block;
                padding: 10px 0 3px 0;
            }
            
            .loading {
                height: 32px;
                width: 32px;
            }
        </style>
<ul id="third">
<a href="{TEXT}"><img src="{TEXT}" width="150" height="150"></a>
</li>
</ul>
</script>
<script src="js/imgpreview.full.jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    //<![CDATA[
jQuery.noConflict();
(function($){  
    
$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).css({opacity:0});
    },
    // When image has loaded:
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    // When container hides: 
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});
})(jQuery);
    //]]>
    </script>

Aiuto in linea:

anteprima Immagine dentro Tooltip: [imgt]Link Immagine[imgt]

Miglioramenti dalla versione ogirinale:
1 Tooltip automatico al passaggio del mause.
2 Effetto visivo opacità della miniatura all'apertura de tooltip.
3 Arrotondamento Tooltip*.
*Alcuni brouser non riconoscono questo effetto.

Versioni in fase di sviluppo:
V2 che comporta il seguente miglioramento..
1 Tooltip fisso quando si richiama il tooltip.
2 Chiusura del Tooltip con clik del mause.