modificare script lente di ingrandimento (retina)

[uffissimo]

Ciao ragazzi, premetto che non conosco quasi affatto il javascript, sono più orientato verso php ecc... ma certe cose sono possibili solo con javascript, ad esempio l'effetto che ho ottenuto con questo script: Effetto Retina Apple

il mio problema nasce con la necessità di inserire all'interno dell'immagine con tale effetto, un piccolo div con del testo ed un link...

riesco ad inserirlo, ma non posso cliccare sul link in quanto mi succede una cosa del genere:


quando entro nel div la lente non se ne va e non mi appare il mouse, quindi non poso cliccare sul link, avete qualche idea???

ecco lo script:

;(function($){
    /**
     * @author Ti ($.fn.retina)                [url]http://3apaxi.com/[/url]      [email]ti.bugmenot@gmail.com[/email]
     * @author Martin Angelov (idea, example)  [url]http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/[/url]
     * @version 0.1 (07.10.2010)
     */
    $.fn.retina = function(options) {
        options = $.extend(true, {
            // default options:
            enable: true,         // false to deattach retina
            css: {},              // custom css
            appendTo: 'body',     // 
            src: null,              // src of large iamge (else use rel, src or href attrs)
            radius: null,          // css radius (null - auto)
            ie: {
                css3pie: 'PIE.htc',  // URI of css3pie (for IE)
                cursor: 'blank.cur' // URI of blank.cur (for IE)
            },
            preload: false           // preload large image?
        }, options)
        
        // attach
        if (options.enable) {
            this.each(function() {
                if (this.retina) this.retina.deattach() // reattach retina
                this.retina = new Retina(this, options.src || $(this).attr('rel') || $(this).attr('src') || $(this).attr('href'), options)
            })
        }
        // deattach
        else {
            this.each(function() {
                if (this.retina) {
                    this.retina.deattach()
                    delete this.retina
                }
            })
        }
        return this
    }

    var Retina = function(element, largeImage, options) {
        var _this = this
        var node = $(element)
        var glass
        var oldIe

        var init = function() {
            oldIe = $.browser.msie && /^[5-8]\./.test($.browser.version)

            var getCursor = function() {
                if (oldIe && options.ie.cursor) return 'url('+options.ie.cursor+'),crosshair'
                if ($.browser.mozilla || $.browser.opera) return 'none'
                var blankCur = 'AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w=='
                if ($.browser.webkit) blankCur = blankCur.slice(0, 829)+'P'+blankCur.slice(830,1016)+'f'+blankCur.slice(1017)
                return 'url(data:text/plain;base64,'+blankCur+'),none'
            }

            glass = $('<div></div>')
            glass.css($.extend(true, {
                display: 'none',
                
                background: 'no-repeat center center white url('+largeImage+')',
                border: '2px solid white',
                
                /* Positioned absolutely, so we can move it around */
                position: 'absolute',
                top: 0,
                left: 0,
                height: 180,
                width: 180,

                /* CSS3 Box Shadow */
                boxShadow: '0 0 5px #777, 0 0 10px #aaa inset',
                '-webkit-box-shadow': '0 0 5px #777',
                '-moz-box-shadow': '0 0 5px #777, 0 0 10px #aaa inset',

                cursor: getCursor()
            }, options.css))
            glass.appendTo(options.appendTo)
    
            var radius = options.radius || Math.min(glass.width(),glass.height())/2 +'px'
            glass.css({
                /* CSS3 rounded corners */
                borderRadius: radius,
                '-webkit-border-radius': radius,
                '-moz-border-radius': radius
            })

            if (oldIe && options.ie.css3pie) glass.css('behavior', 'url('+options.ie.css3pie+')')

            $(document).bind('mousemove', _this.move)

            // on load image - recalculate size
            node.find('img').add(node).load(_this.loadSize)
            $(window).resize(_this.loadSize)

            init = $.noop
        }

        var offset, width, height, glassWidth, glassHeight
        _this.loadSize = function() {
            offset = node.offset()
            width = node.width()
            height = node.height()
            glassWidth = glass.width()
            glassHeight = glass.height()
        }

        _this.show = function(e) {
            init()
            _this.loadSize()
            if (oldIe && options.ie.css3pie) glass.show()
            else glass.stop(true, true).fadeIn('fast')
            _this.move(e)
        }
        
        _this.hide = function() {
            if (oldIe && options.ie.css3pie) glass.hide()
            else glass.stop(true, true).fadeOut('fast')
        }
        

        _this.move = function(e) {
            // mouse out

            if (e.pageX < offset.left || e.pageY < offset.top) return _this.hide()
            if (offset.left + width < e.pageX) return _this.hide()
            if (offset.top + height < e.pageY) return _this.hide()

            glass.css({
                // moving the retina div with the mouse
                marginLeft: e.pageX - glassWidth/2, // left and top css not work in ie with css3pie!
                marginTop: e.pageY - glassHeight/2,

                // scrolling the background
                backgroundPosition: ( (100/width) * (e.pageX - offset.left) )+'% '+( (100/height) * (e.pageY - offset.top) )+'%'
            })
        }
        
        _this.deattach = function() {
            node.unbind('mouseenter', _this.show)
            if (glass) {
                glass.remove()
                $(document).unbind('mousemove', _this.move)
                node.find('img').add(node).unbind('load', _this.loadSize)
                $(window).unbind('resize', _this.loadSize)
            }
        }

        node.bind('mouseenter', _this.show)

        // preload
        if (options.preload) $(new Image).attr('src', largeImage)
    }
})(jQuery); 

[Xinod]

finche' il tuo div si trova (nel codice) fuori dal div id="webpage" dovrebbe disattivare l' effetto al passaggio
ciao

[uffissimo]

non ho capito bene... devo creare un div id="webpage" al cui interno mettere l'immagine, e poi il div con il link devo metterlo al difuori di questo???

aspetta che provo

[uffissimo]

non funziona... io una pseudo-soluzione l'ho trovata... ho sparato al div un z-index:1000 ora è cliccabile, ma un pò "antiestetico"
male che va lo tengo così... ma una soluzione alternativa è apprezzata

[Xinod]

io facevo riferimento allo script originale
http://tutorialzine.com/2010/06/appl...ect-jquery-css

[uffissimo]

ora scarico quello originale e provo grazie

[uffissimo]

funziona perfetto grazie grazie