‘imgPreview’

Otra forma de visualizar nuestras imágenes, y de las que más me han gustado. Es cosa de james.padolsey.com, y podéis ver cómo funciona en Blogger en esta Entrada (Pasad el ratón sobre los links y se abrirán las imágenes)

No es nada difícil una vez que se ha entendido el proceso, salvo por lo que se refiere a los dichosos conflictos de query con otras librerías que podáis tener en el blog. Así que vamos a ver cómo se hace:

.- CSS + SCRIPTS: Para abreviar, podemos contener un link al Css dentro de un script, de la siguiente forma:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.js' type='text/javascript'/>

<script type='text/javascript'>/*<![CDATA[*/    $(function(){

        $('<link rel="stylesheet" type="text/css" href="http://2tkh1q.blu.livefilestore.com/y1pSjVrqkXEv0WRIlF5gWR0UpNZrUXRHpKRx3Tcyotg57YJJhx3lMaXkA61xNt-V1v_lJ9a-Llzcgq7ZI8BUdcv8g/imgPreview_styles.css" />').appendTo('head');

        // the plugin:

        (function($){$.expr[':'].linkingToImage=function(elem){return!!($(elem).is('a')&&elem.href&&elem.href.match(/\.(gif|jpe?g|png|bmp)$/i))};$.fn.imgPreview=function(userDefinedSettings){var s=$.extend({imgCSS:{},distanceFromCursor:{top:10,left:10},preloadImages:true,onShow:function(){},onHide:function(){},onLoad:function(){},containerID:'imgPreviewContainer',containerLoadingClass:'loading'},userDefinedSettings),$container=$('<div/>').attr('id',s.containerID).append('<img/>').hide().appendTo('body'),$img=$('img',$container).css(s.imgCSS);if(s.preloadImages){this.each(function(){if($(this).is(':linkingToImage')){$('<img/>')[0].src=this.href}})}this.filter(':linkingToImage').mousemove(function(e){$container.css({top:e.pageY+s.distanceFromCursor.top+'px',left:e.pageX+s.distanceFromCursor.left+'px'})}).hover(function(){var link=this;$container.addClass(s.containerLoadingClass).show();$img.load(function(){$container.removeClass(s.containerLoadingClass);s.onLoad.call($img[0],link)}).attr('src',link.href);s.onShow.call($container[0],link)},function(){$container.hide();$img.unbind('load').attr('src','');s.onHide.call($container[0],this)});return this}})(jQuery);

        

    $('#imgpreview-demo a').imgPreview({

        imgCSS: {

            // Limit preview size:

            height: 200

        },

        onShow: function(link){

            // Animate link:

            $(link).stop().animate({opacity:0.4});

            // Reset image:

            $('img', this).stop().css({opacity:0});

        },

        onLoad: function(){

            // Animate image

            $(this).animate({opacity:1}, 300);

        },

        onHide: function(link){

            // Animate link:

            $(link).stop().animate({opacity:1});

        }

    });

    });/*]]>*/</script>

Ojo, como ya he dicho, al "query no conflict" y... please... os dejo mi link al CSS, pero subidlo en cuanto podáis a vuestro propio host (lo de siempre: si a mi pc o mi servidor les pasa algo, os quedáis sin Css)