jQuery: Convivencia entre FancyBox y jQuery scrollable tool

[pzin]

Buenas,

estoy usando FancyBox y Scrollable (de flowplayer) en ésta página.

Funciona todo bien, exceptuando un pequeño detalle de gran importancia.

Al hacer click en un thumbnail, Scrollable centra esa imagen dentro de la galería (a menos que se seleccionen las primeras). Si desactivo FancyBox, todo funciona correctamente, pero, al activarlo (quiero decir al eliminar o no las referencias hacia los archivos javascript de FancyBox), en vez de centrar las imágenes de la galería, todas las imágenes (siempre hablo de los thumbnails) desaparecen, sospecho que se ruedan todas hacia la izquierda saliendo de la capa, la que tiene overflow:hidden, de ahí lo de que desaparecen.

No sé si le habrá pasado a alguien, pero no encuentro forma de solucionarlo.

Gracias y saludos.

[mayid]

Hay que ver el css de ambos plugins. Postealos, y chequeamos.

[pzin]

El código css completo de scrollable es este:

Código css:

*/
.scrollable {
    position:relative;
    overflow:hidden;
    width: 700px;
    height:120px;
    border:1px solid #ccc;
    background:url(http://www.lanzaroterock.com/v3/imagenes/articulos/h300.png) 
    repeat-x;
    margin-top: 20px;
    }
 
.scrollable .items {
    width:20000em;
    position:absolute;
    clear:both;
}
 
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
 
.scrollable .active {
    border:2px solid #000;
    z-index:9;
    position:relative;
}
 

Y el de FancyBox, pongo el link porque es bastante extenso.
Código css FancyBox

Está todo tal cual que en los scripts originales. Lo único que cambié fue añadir un vínculo a las imágenes de scrollable. Tal vez ahí existe algún problema.

[mayid]

Los css se aplican solo a los divs comprometidos. Por ejemplo: #fancy_wrap .

Eso esta ok. Hay algun div que compartan ambos scripts? O son dos cosas aparte?

Lo único que cambié fue añadir un vínculo a las imágenes de scrollable. Tal vez ahí existe algún problema.

Si, esto es posible. Habrìa que ver los scripts. Cuando un selector busca una img jerarquicamente, y encuentra en cambio una <a> , entonces no puede generar cambios sobre el img. Pero si los selectores son puntuales, y no jerarquicos, entonces no esta aqui el problema.

[mayid]

A ver. QUe contenido tienen tus scrolls?

Si no cambiastes estos links, estamos bien:

<ul class="tabs">
<li><a href="#first">First item</a></li>
<li><a href="#second">Second item</a></li>
<li><a href="#third">Third item</a></li>
</ul>

Las fotos van dentro de los links estos, junto con otro html, no? Y vos agregas otros links. Entonces eso esta ok.

[pzin]

Tal como yo lo veo, al menos en el css, no son jerárquicos los selectores. O pseudo-jerárquicos (.scrollable img se refiere a img dentro de .scrollable, claro).

Tal vez sea lo que dices, pero ya en la parte de javascript. Voy a ver si veo algo. Comento algo cuando tenga algo claro.

[mayid]

Mira:

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Como haces para unir esto de FancyBox con los links de Scrollable? Mostranos.

<ul class="tabs">
<li><a href="#first">First item</a></li>
<li><a href="#second">Second item</a></li>
<li><a href="#third">Third item</a></li>
</ul>

[pzin]

Iniciado por mayid

A ver. QUe contenido tienen tus scrolls?

Si no cambiastes estos links, estamos bien:



Las fotos van dentro de los links estos, junto con otro html, no? Y vos agregas otros links. Entonces eso esta ok.

No no, nada que ver. Eso es otro plugin me parece (por lo de tabs). Hay un ejemplo standalone.

Perdona la confusión. :P

[pzin]

Lo que tengo (HTML) es esto:

Código html:

<!-- "previous page" action --> 
            <a class="prevPage browse left"></a> 
             
            <!-- root element for scrollable --> 
            <div class="scrollable">     
                 
                <!-- root element for the items --> 
                <div class="items"> 
                 
                    <!-- 1-5 --> 
                    <a title="" rel="articulos" class="articulo_imagenes" href="http://www.lanzaroterock.com/v3/imagenes/galeria/51/pc03.jpg">
                    <img src="http://www.lanzaroterock.com/v3/imagenes/galeria/51/mini.pc03.jpg" />
                    </a>           
                </div> 
                 
            </div> 
             
            <!-- "next page" action --> 
            <a class="nextPage browse right"></a>
 

[mayid]

Proba quitandole ancho a este width:

.scrollable .items {
width:20000em;
position:absolute;
clear:both;
}

Proba con 2000px o 3000px

[pzin]

Aparentemente no ocurre nada. Incluso aumentándolo mas de lo que indicas sigue pasando lo mismo.

[pzin]

He encontrado una media solución.

Simplemente mostrar los enlaces como bloques:

Código css:

.scrollable a { 
  display:block; 
}
 

Digo media, porque aunque ahora no desaparecen las imágenes, no centra la foto a la cual se hace click.
¿Puede ser que FancyBox "egoistamente" se quede con la acción del click sobre el elemento IMG? Realmente, FancyBox funciona con el enlace (A) no con la imagen, y scrollable funciona haciendo click sobre la imagen.
No sé si con un click se puede acceder a dos elementos diferentes.

[mayid]

No sé si con un click se puede acceder a dos elementos diferentes.

No se.

Lo que te dije hace un rato era mas bien disminuir el ancho del contenedor de miniaturas.

Me di cuenta de que al correrse todas queda una orejita a la izq, arriba, que es como un thumbnail de 5x5px . Lo viste? Se lo puede clickear. Poniendo un width de unos 800px quizas puedas ver mejor el problemita.

[mayid]

Estoy pasando tu pagina por debuggers, y tenes un par de bugs. En IE8 me aparece:

jQuery is not defined in:

<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/jquery.markitup.js"></script>

Me fije en el codigo fuente, y sencillamente no tenes incluida la libreria jQuery. Como es posible que todo funcione?

[pzin]

Iniciado por mayid

Estoy pasando tu pagina por debuggers, y tenes un par de bugs. En IE8 me aparece:

jQuery is not defined in:



Me fije en el codigo fuente, y sencillamente no tenes incluida la libreria jQuery. Como es posible que todo funcione?

Me di cuenta de que Scrollable incluye jQuery, así que quité el link hacia el archivo jQuery original. También fue por probar si el error venía de incluir jQuery dos veces, aunque el efecto es el mismo aparentemente.

[mayid]

Todo bien si jQuery Tools incluye jquery, pero vos tenes esa libreria muy abajo, y antes hay otras llamadas a jQuery que no tienen en donde apoyarse. Si el caso es que tenes la libreria incluida, tenes que ponerla primero de todo:

<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/jquery.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/jquery.markitup.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/jquery.markitup.bbcode.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/pixastic.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/Myriad_Pro_400-Myriad_Pro_900-Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://www.lanzaroterock.com/v3/js/jquery.fancybox.js"></script>

Te digo esto porque a mi el IE8 me dabe errores con la libreria: jquery.markitup.js .

Por experiencia, te digo que si hay un error, este acarrea otros. Asi que mejor chequea el orden de las librerias para ver si no estaba todo el problema ahi.

[pzin]

Gracias por la recomendación mayid.

El caso es que solo quité el LINK de jquery.js para probar si hubiera sido el error porque se incluía dos veces las mismas funciones (no me di cuenta de que Scrollable venía con jQuery). Y claro, estaba como primera llamada, de hecho en el código que pones está ahí (que lo volví a cambiar anoche).

No encuentro manera alguna de dar con la solución. Tal vez se pueda crear un evento onclick (click) con jQuery que realice la misma función que scrollable (jquery.tools.min.js).
¿Hay alguna forma de descomprir ese archivo? Quiero decir poner el código en las lineas que sean e identarlo.

Que tiempos aquellos en los que solo se ponía un archivo javascript.