Fisheye Dock

El problema que me surgió fue que al incorporar el código html a mi web:

<!-- BEGIN DOCK ============================================================ -->
<div id="dock">
    <div class="dock-container">
        <a class="dock-item" href="#"><span>FACEBOOK</span><img src="socialbookmark/img/facebook_64x64.png" alt="FACEBOOK" /></a>
        <a class="dock-item" href="#"><span>TWITTER</span><img src="socialbookmark/img/twitter_64x64.png" alt="TWITTER" /></a>
        <a class="dock-item" href="#"><span>YOUTUBE</span><img src="socialbookmark/img/youtube_64x64.png" alt="YOUTUBE" /></a>
        <a class="dock-item" href="#"><span>TECHNORATI</span><img src="socialbookmark/img/technorati_64x64.png" alt="TECHNORATI" /></a>
        <a class="dock-item" href="#"><span>STUMBLEUPON</span><img src="socialbookmark/img/stumbleupon_64x64.png" alt="STUMBLEUPON" /></a>
        <a class="dock-item" href="#"><span>DIGG</span><img src="socialbookmark/img/digg_64x64.png" alt="DIGG" /></a>
        <a class="dock-item" href="#"><span>DELICIOUS</span><img src="socialbookmark/img/delicious_64x64.png" alt="DELICIOUS" /></a>
        <a class="dock-item" href="#"><span>RSS</span><img src="socialbookmark/img/rss_64x64.png" alt="RSS" /></a>
    </div><!-- end div .dock-container -->
</div><!-- end div .dock #dock -->
<!-- END DOCK ============================================================ -->

El identificador #dock no tiene propiedades css definidas, y al dárselas le puse posición relativa:

#dock {
    position:relative;
    float:left;
    left:8%;
    width: 46%;
    top:290px;
    display: none;
}

Si fuera absoluta no habría problemas ya que funcionaría bien, pero a mi no me valía porque lo que hago, como se puede ver en el css (display: none;), es ocultar desde el principio la capa y mostrarla en un orden determinado con el resto de elementos de la página y con distintos efectos.

Como en mi caso su posición original cambia, el foco del puntero (hover de las imágenes) sigue apuntando a la posición original, con lo que al hacer click sobre la imagen si lleva al enlace, pero el efecto zoom no funciona.

Solución:

- Editar el archivo fisheye-iutil.js.

- Buscar la función getPointer, en el mío está en la línea 324:

getPointer : function(event)
{
    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;
    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;
    return {x:x, y:y};
},

- La completamos con:

getPointer : function(event)
{
    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;
    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;
        //subtract, add scrollbar    
        y -= $(window).scrollTop();
    return {x:x, y:y};
},

« JavaScript | jQuery | Plugins

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License