jQuery + Lightbox

[rodromoptero]

Hola, estoy haciendo un portafolio fotográfico bastante simple, un menú con algo de javascript (mootools), un header, y abajo un footer con contacto y arriba un div con un listado (la galería)
he probado con varios lightboxes y si no es por que no lo se aplicar, tengo problemas entre scripts o simplemente no pasa nada.

Estos son mis scripts.
Tengo una página con la aplicación del script lightbox funcionando perfectamente bien
y mi archivo al que solo cambie nombres y puse estilos no jala

Código HTML:

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" /> 
 
<script type="text/javascript" src="lightbox/js/jquery.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" media="screen" />
 
<script language="javascript" type="text/javascript" src="mootools/mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="mootools/mootools-1.2-more.js"></script>
<script type="text/javascript" src="javascript.js"></script>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 

Este es mi archivo javascript

Código Javascript:

$(function() {
        $('#galeria_lista a').lightBox();
    });
 

Este mi listado al que le quiero aplicar las propiedades....

Código HTML:

<div id="galeria_lista">
    
                <ul>
                    <li><a href="imagen/apple_orange_01.jpg" title=""><img src="imagen/chiquito/thumbnails-01.png" width="20" height="20" alt="apple_orange_01"/></a></li>
                    <li><a href="imagen/apple_orange_02.jpg" title=""><img src="imagen/chiquito/thumbnails-02.png" width="20" height="20" alt="apple_orange_02"/></a></li>
                </ul>
        </div>
 

y por ultimo los estilos

Código CSS:

#galeria_lista {
    width:100%;
    height:40px;
    position:fixed;
    bottom:30px;
    background-color:#F30;
}
#galeria_links li {
    list-style:none;
    float:left;
    margin:5px;
}
 

espero puedan ayudarme estoy frustrado ya jajaja me volveré loco

[Adermall]

Creo que tienes conflictos entre Jquery y Mootools. No es recomendable tener mas de 1 framework javascript al mismo tiempo en tu página. Si es NECESARIO que tengas mootools y un plugin de jquery funcionando, utiliza la propiedad de jquery jQuery.noConflict(), para que no tengas problemas entre librerias.

Yo te recomiendo mejor dejar a un lado mootools y quedarte 100% con Jquery, ya te habras dado cuenta que hay muchos mas plugins para Jquery que para cualquier otro framework javascript.

[rodromoptero]

gracias adermall, un amigo me ha dicho lo mismo acerca de los frameworks, era algo que desconocía, tengo otra duda, de aplicar la propiedad que dices, me podrías explicar de que forma lo hago, ya que no tengo ni idea ja :P

[Adermall]

El problema ocurre cuando varios frameworks javascript utilizan el selector de $() para sus metodos y funciones.

Jquery tiene una propiedad que es la jQuery.noConflict, que lo que hace es que puedas asignarle un "alias" al selector de $() que funcionara SOLO PARA ARCHIVOS DE JQUERY.

Para aplicarlo, en tu archivo de javascript donde ejecutas tus funciones jquery y las llamadas a los plugins, pon hasta mero arriba, antes del document.ready lo siguiente:

var $j = jQuery.noConflict();

Con eso le estas diciendo que en ves de utilizar $() para elementos y funciones de Jquery, vas a utliziar $j(). Ahora solo modifica tu código y sustituye los $() por $j() y listo, ya tienes tu Jquery corriendo con otros frameworks sin problemas de compatibilidad.

El cambio de variable solo lo haces en tus archivos, no en los plugins.