Foros del Web » Creando para Internet » Diseño web »

jQuery + Lightbox

Estas en el tema de jQuery + Lightbox en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/06/2010, 12:49
 
Fecha de Ingreso: junio-2010
Mensajes: 5
Antigüedad: 7 años, 5 meses
Puntos: 0
Pregunta jQuery + Lightbox

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:
Ver original
  1. <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
  2.  
  3. <script type="text/javascript" src="lightbox/js/jquery.js"></script>
  4. <script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
  5. <script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>
  6. <link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" media="screen" />
  7.  
  8. <script language="javascript" type="text/javascript" src="mootools/mootools-1.2-core.js"></script>
  9. <script language="javascript" type="text/javascript" src="mootools/mootools-1.2-more.js"></script>
  10. <script type="text/javascript" src="javascript.js"></script>
  11.  
  12. <link href="style.css" rel="stylesheet" type="text/css" />


Este es mi archivo javascript
Código Javascript:
Ver original
  1. $(function() {
  2.         $('#galeria_lista a').lightBox();
  3.     });


Este mi listado al que le quiero aplicar las propiedades....
Código HTML:
Ver original
  1. <div id="galeria_lista">
  2.    
  3.                 <ul>
  4.                     <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>
  5.                     <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>
  6.                 </ul>
  7.         </div>

y por ultimo los estilos
Código CSS:
Ver original
  1. #galeria_lista {
  2.     width:100%;
  3.     height:40px;
  4.     position:fixed;
  5.     bottom:30px;
  6.     background-color:#F30;
  7. }
  8. #galeria_links li {
  9.     list-style:none;
  10.     float:left;
  11.     margin:5px;
  12. }


espero puedan ayudarme estoy frustrado ya jajaja me volveré loco
  #2 (permalink)  
Antiguo 16/06/2010, 12:54
 
Fecha de Ingreso: junio-2010
Mensajes: 92
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: jQuery + Lightbox

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.
  #3 (permalink)  
Antiguo 16/06/2010, 13:00
 
Fecha de Ingreso: junio-2010
Mensajes: 5
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: jQuery + Lightbox

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
  #4 (permalink)  
Antiguo 16/06/2010, 13:11
 
Fecha de Ingreso: junio-2010
Mensajes: 92
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: jQuery + Lightbox

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.

Etiquetas: css, fotografia, galeria, javascript, jquery, lightbox, listado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:34.