Changeset 11947


Ignore:
Timestamp:
Aug 14, 2011, 5:41:48 PM (13 years ago)
Author:
flop25
Message:

js works with the parameter considerBorders and the others
the title of the thumbnail can be displayed
todo: all this paramaters in config

Location:
extensions/imgpreview
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • extensions/imgpreview/css/imgpreview.css

    r11946 r11947  
    66    min-width: 32px;
    77    padding: 12px;
    8     z-index: 900;
     8    z-index: 1000;
    99}
    1010#tooltip img {
     
    1212        max-width:600px;
    1313}
     14/* Text below image */
     15#tooltip span {
     16    color: #000;
     17    text-align: center;
     18    display: block;
     19    padding: 10px 0 3px 0;
     20}
  • extensions/imgpreview/js/imgpreview.js

    r11079 r11947  
    1 /*
    2  * imgPreview jQuery plugin
    3  * Copyright (c) 2009 James Padolsey
    4  * j@qd9.co.uk | http://james.padolsey.com
    5  * Dual licensed under MIT and GPL.
    6  * Updated: 09/02/09
    7  * @author James Padolsey
    8  * @version 0.22
    9  */
    10 /*
    11 (function(c){c.expr[':'].linkingToImage=function(a,g,e){return!!(c(a).attr(e[3])&&c(a).attr(e[3]).match(/\.(gif|jpe?g|png|bmp)$/i))};c.fn.imgPreview=function(j){var b=c.extend({imgCSS:{},distanceFromCursor:{top:10,left:10},preloadImages:true,onShow:function(){},onHide:function(){},onLoad:function(){},containerID:'imgPreviewContainer',containerLoadingClass:'loading',thumbPrefix:'',srcAttr:'href'},j),d=c('<div/>').attr('id',b.containerID).append('<img/>').hide().css('position','absolute').appendTo('body'),f=c('img',d).css(b.imgCSS),h=this.filter(':linkingToImage('+b.srcAttr+')');function i(a){return a.replace(/(\/?)([^\/]+)$/,'$1'+b.thumbPrefix+'$2')}if(b.preloadImages){(function(a){var g=new Image(),e=arguments.callee;g.src=i(c(h[a]).attr(b.srcAttr));g.onload=function(){h[a+1]&&e(a+1)}})(0)}h.mousemove(function(a){d.css({top:a.pageY+b.distanceFromCursor.top+'px',left:a.pageX+b.distanceFromCursor.left+'px'})}).hover(function(){var a=this;d.addClass(b.containerLoadingClass).show();f.load(function(){d.removeClass(b.containerLoadingClass);f.show();b.onLoad.call(f[0],a)}).attr('src',i(c(a).attr(b.srcAttr)));b.onShow.call(d[0],a)},function(){d.hide();f.unbind('load').attr('src','').hide();b.onHide.call(d[0],this)});return this}})(jQuery);
    12 */
    131/*
    142 * imgPreview jQuery plugin
     
    2311 * !!!!!!! -> This plugin contains ADDITIONS. 'considerBorders' param. You will have to add
    2412 * it yourself to newest version, if you use this param
    25  */
     13*/
    2614(function($){
    27 
     15   
    2816    $.expr[':'].linkingToImage = function(elem, index, match){
    2917        // This will return true if the specified attribute contains a valid link to an image:
    3018        return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i));
    3119    };
    32 
     20   
    3321    $.fn.imgPreview = function(userDefinedSettings){
    34 
     22       
    3523        var s = $.extend({
    36 
     24           
    3725            /* DEFAULTS */
    38             minWidth: 32,
    39             imgSrcHide: 'about:blank',
     26           
    4027            // CSS to be applied to image:
    4128            imgCSS: {},
    4229            // Distance between cursor and preview:
    43             distanceFromCursor: {top:20, left:20},
     30            distanceFromCursor: {top:10, left:10},
    4431            // Boolean, whether or not to preload images:
    4532            preloadImages: true,
     
    5845            // Where to retrieve the image from:
    5946            srcAttr: 'href',
    60             //The script moves the box depending on window borders
    61             // Added by Ujeen
    62             considerBorders: 'false'
    63 
     47                                                considerBorders:'false'
     48           
    6449        }, userDefinedSettings),
    65 
     50       
    6651        $container = $('<div/>').attr('id', s.containerID)
    6752                        .append('<img/>').hide()
    6853                        .css('position','absolute')
    6954                        .appendTo('body'),
    70 
     55           
    7156        $img = $('img', $container).css(s.imgCSS),
    72 
     57       
    7358        // Get all valid elements (linking to images / ATTR with image link):
    7459        $collection = this.filter(':linkingToImage(' + s.srcAttr + ')');
    75 
     60       
    7661        // Re-usable means to add prefix (from setting):
    7762        function addPrefix(src) {
    7863            return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2');
    7964        }
    80 
     65       
    8166        if (s.preloadImages) {
    8267            (function(i){
     
    8974            })(0);
    9075        }
    91 
     76       
    9277        $collection
    9378            .mousemove(function(e){
     
    120105                  // #--considerBorders
    121106                } else {
    122                   $container.css({
    123                       top: e.pageY + s.distanceFromCursor.top + 'px',
    124                       left: e.pageX + s.distanceFromCursor.left + 'px'
    125                   });
    126                 }
    127 
     107                $container.css({
     108                    top: e.pageY + s.distanceFromCursor.top + 'px',
     109                    left: e.pageX + s.distanceFromCursor.left + 'px'
     110                });
     111                                                                }
     112               
    128113            })
    129114            .hover(function(){
    130 
     115               
    131116                var link = this;
    132117                $container
     
    137122                        $container.removeClass(s.containerLoadingClass);
    138123                        $img.show();
    139                         $container.width($img.width());
    140124                        s.onLoad.call($img[0], link);
    141125                    })
    142                     .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) )
    143                     .$(function(){
    144                       // 'considerBorders' functionality
    145                       if (s.considerBorders == 'true') {
    146                         $(this).css({'display':'none'});
    147                       }
    148                       // #--considerBorders
    149                     });
    150                    
     126                    .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) );
     127
    151128                s.onShow.call($container[0], link);
    152 
     129               
    153130            }, function(){
    154 
     131               
    155132                $container.hide();
    156                 $img.unbind('load').attr('src', s.imgSrcHide).hide();
    157                 $container.width(s.minWidth);
     133                $img.unbind('load').attr('src','').hide();
    158134                s.onHide.call($container[0], this);
    159 
     135               
    160136            });
    161          
     137       
    162138        // Return full selection, not $collection!
    163139        return this;
    164 
     140       
    165141    };
    166 
     142   
    167143})(jQuery);
  • extensions/imgpreview/js/init.js

    r11086 r11947  
    11//$(document).ready(function(){
     2        /*
    23(function($) {
    34   previewBoxId = 'tooltip';
     
    1415 
    1516//});
    16 })(jQuery);
     17})(jQuery);*/
     18
     19$('.thumbnails a, #thumbnails a').imgPreview({
     20    containerID: 'tooltip',
     21                srcAttr: 'imgsrc',
     22                considerBorders:'true',
     23    // When container is shown:
     24    onShow: function(link){
     25        $('<span>' + $(link).children().attr("title") + '</span>').appendTo(this);
     26                                        // Animate link:
     27        $(link).stop().animate({opacity:0.4});
     28        // Reset image:
     29        $('img', this).stop().css({opacity:0});
     30
     31    },
     32    onLoad: function(){
     33        // Animate image
     34        $(this).animate({opacity:1}, 300);
     35    },
     36    // When container hides:
     37    onHide: function(link){
     38        $('span', this).remove();
     39        // Animate link:
     40        $(link).stop().animate({opacity:1});
     41
     42    }
     43});
Note: See TracChangeset for help on using the changeset viewer.