MENU

Seguramente alguna vez hayas añadido en tu proyecto Web código jQuery de terceros para insertar algún slider, lightbox o cualquier otra librería de jQuery para crear las impresionantes animaciones que nos ofrece este.

Cuando unes varios códigos de terceros te pueden surgir problemas de compatibilidad entre ellos, pero afortunadamente jQuery ha creado una función para solucionar este problema y es tan fácil como agregar a tu código jQuery.noConflict();

Supongamos que tenemos un slider y un lightbox y quieres hacer funcionar los dos, tendrías un código como el siguiente:

<!--SLIDER-->   
<script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" src="/js/Slider.js"></script>
<script type="text/javascript">
   $(document).ready(function(){   
      $("#slider").Slider();
   });   
</script>

<!--LIGHTBOX-->
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("a[rel='Ejemplo1']").colorbox();
      $("a[rel='Ejemplo2’]").colorbox();
      $("a[rel='Ejemplo2']").colorbox();
   });
</script>

 

Tendríamos un conflicto entre las dos librerías y una de ellas dejaría de funcionar, para evitarlo, en cualquiera de ellos añadiríamos jQuery.noConflict(); y sustituiríamos todos los $ por la palabra jQuery.

<!--LIGHTBOX-->
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function(){
      jQuery("a[rel='Ejemplo1']").colorbox();
      jQuery("a[rel='Ejemplo2’]").colorbox();
      jQuery("a[rel='Ejemplo2']").colorbox();
   });
</script>

 

¿Sencillo verdad? Pero alguien se puede preguntar, ¿y si tengo tres librerías?, bien pues solamente deberíamos asignar una variable a jQuery.noConflict y utilizarla de la misma forma:

<!--LIGHTBOX-->
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
   var j = jQuery.noConflict();
   j(document).ready(function(){
      j("a[rel='Ejemplo1']").colorbox();
      j("a[rel='Ejemplo2’]").colorbox();
      j("a[rel='Ejemplo2']").colorbox();
   });
</script>

 

También funciona para conflictos entre Prototype y Scriptaculous. Recuerda, usa jQuery.noConflict con cabeza y no abuses si no es necesario o convertirás tu código en un jolgorio.

Comentarios  

0 #8 Mil gracias!Jose 03-02-2016 18:38
Me has salvado la vida! Soy un auténtico novato en javascript y jquery, llevo días dándole vueltas a por qué cuando juntaba dos plugins, se pisaban mutuamente y por lo tanto no funcionaban, gracias a ti puedo continuar mi proyecto!! :lol:
Citar
0 #7 RE: Evitar conflictos de jQueryadrian 30-03-2015 08:52
Cito a claudia:
Hola: Estoy buscando un código que por medio de ingresar la edad y verificar que es mayor de edad pueda ingresar. a una web. Algo así como lo colocan en las páginas para adultos.

Ejemplo: Día______ Mes______Año______

Gracias.


Hola Claudia, normalmente ese tipo de validaciones están programadas directamente.

No he encontrado nada que haga todo ese proceso entero, lo que si he encontrado es un plugin para seleccionar directamente una fecha, su nombre es jQuery Datepicker.

A partir de ahí, tendrás que buscar alguna función para restar fechas y así comprobar que sea mayor de 18 años.

Un saludo ;-)
Citar
0 #6 Páginaclaudia 30-03-2015 03:41
Hola: Estoy buscando un código que por medio de ingresar la edad y verificar que es mayor de edad pueda ingresar. a una web. Algo así como lo colocan en las páginas para adultos.

Ejemplo: Día______ Mes______Año______

Gracias.
Citar
0 #5 RE: Evitar conflictos de jQueryadrian 18-03-2015 12:33
Cito a claudia:
Hola: Tengo un codigo java para abrir ymagenes en una ventana emergente. La cuestión es que no puedo avanzar entre una imagen y otra, adicionalmente, tiene un tamaño muy pequeño, no me lo abre en el tamaño original. Como soluciono esto? Gracias;

---este es el código:


$('#nav').dropotron();



$('.gallery').poptrox({
overlayColor: '#333333',
overlayOpacity: 0.76,
overflow: 'auto',
popupCloserText: 'Cerrrar',
usePopupCaption: true,
usePopupDefaultStyling: false
});


Hola Claudia, eso no creo que sea un error de conflicto ya que el código funciona, no te da los resultados que quieres pero por lo que has dicho si te abre las imágenes.

Tendrás que mirar la documentación del plugin que estés utilizando, que parece que es "Poptrox" y buscar como crear álbumes de poder avanzar y retroceder entre las imágenes.

Un saludo ;-)
Citar
0 #4 Codigoclaudia 17-03-2015 19:03
Hola: Tengo un codigo java para abrir ymagenes en una ventana emergente. La cuestión es que no puedo avanzar entre una imagen y otra, adicionalmente, tiene un tamaño muy pequeño, no me lo abre en el tamaño original. Como soluciono esto? Gracias;

---este es el código:


$('#nav').dropotron();



$('.gallery').poptrox({
overlayColor: '#333333',
overlayOpacity: 0.76,
overflow: 'auto',
popupCloserText: 'Cerrrar',
usePopupCaption: true,
usePopupDefaultStyling: false
});
Citar
0 #3 ConflictoClaudia 22-02-2015 23:35
Solucionado el problema. El código del banner debe ir primero que el del lightbox y el ightbox debeir con la variable noConfilct() Gracias;
Citar
0 #2 RE: Evitar conflictos de jQueryadrian 20-02-2015 08:59
Hola Claudia,

Si ambos códigos están en el mismo fichero, ponlos dentro de la misma funcion de inicialización:

$(window).load( function() {
$('#slider').ni voSlider();
$('#gallery a').lightBox();
});

Si no funciona, pon en marcha el noConfilct() que te enseñamos arriba en el tutorial.

También, te recomiendo que descargues la extensión FireBug para Mozilla Firefox, y eches un vistazo a la consola para ver los errores que te devuelve.

Un saludo ;-)

Cito a Claudia:
Tego el un codigo de lightbox que me hace habrir las imagenes más grandes en la misma página, el codigo que tengo es el siguiente:

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

A su vez tengo un código jquery para un banner en movimiento en la cabecera superior de la página. Este el el codigo pa cuatro imágenes.

$(window).load(function() {
$('#slider').nivoSlider();
});

Resulta que cuando coloco este código en la página de galerías, el lightbox deja de funcionar y me abre las fotos en una página diferente. ¿que Pasa? ¿Como lo Resuelvo?

Esta es la forma como coloco las imágenes depués del código jquery:

Gracias.
Citar
0 #1 Coflicto jqueryClaudia 20-02-2015 05:05
Tego el un codigo de lightbox que me hace habrir las imagenes más grandes en la misma página, el codigo que tengo es el siguiente:

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

A su vez tengo un código jquery para un banner en movimiento en la cabecera superior de la página. Este el el codigo pa cuatro imágenes.

$(window).load( function() {
$('#slider').ni voSlider();
});

Resulta que cuando coloco este código en la página de galerías, el lightbox deja de funcionar y me abre las fotos en una página diferente. ¿que Pasa? ¿Como lo Resuelvo?

Esta es la forma como coloco las imágenes depués del código jquery:

Gracias.
Citar

Escribir un comentario


Código de seguridad
Refescar

Utilizamos cookies propias, al continuar navengando por el sitio aceptas nuestra política de cookies.

Aceptar