!Buenos días a todos!

Hacía tiempo que no me pasaba por aquí, y lo cierto es que he tenido muchas oportunidades de contaros nuevas hazañas a las que me he tenido que enfrentar en mi día a día y relacionadas con el campo de la Informática, más concretamente a tema servidores y programación web sobre todo.

El caso es que el otro día me encontré con un problema bastante frecuente entre los desarrolladores web, y es el de utilizar distintas versiones de jQuery en una misma web. Es muy común encontrar plugins, galerías y distintos códigos ya “hechos” que nos pueden ayudar en la creación de un proyecto web. Normalmente estos plugins suelen hacer uso de distintas librerías jQuery y el problema surge cuando queremos utilizar dos plugins que dependen de dos librerías distintas de jQuery, por ejemplo, uno de ellos utiliza la versión 1.9.1 y otro la 1.10.2, pues bien, hay una forma de hacer funcionar ambos sin que haya conflicto.

Lo que se debe hacer es lo siguiente, en la cabecera, implementar la versión de jQuery 1.9.1, a continuación crear un objeto para hacer uso de jQuery 1.9.1  y tras esto, llamar a jQuery 1.10.2 y crear otro objeto, de la siguiente manera:

<!-- load jQuery 1.9.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true);
</script>

<!-- load jQuery 1.10.2 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>

 

Una vez tenemos esto, podemos comprobar que tenemos ambos objetos bien creados con el siguiente código:

<script>
      $(document).ready(function(){
       console.log($jQuery_1_9_1().jquery); // Esto imprime v1.9.1
       console.log($jQuery_1_10_2().jquery); // Esto imprime v1.10.2
      });
</script>

Y así de simple podemos tener ambas versiones funcionando sin conflicto… cuando queramos hacer uso de alguna de ellas, usaremos los objetos $jQuery_1_9_1 o $jQuery_1_10_2 respectivamente. Por ejemplo, lightslider es una galería que usa la 1.9.1, pues el código sería así:

 

<script>
	
	var $jQuery_1_9_1 = jQuery.noConflict();
    	 $jQuery_1_9_1(document).ready(function() {
	      $jQuery_1_9_1("#colaboradoresslider").lightSlider({
                
                keyPress:true,
		item:4,
            });
            
	});
    </script>

Espero que os haya gustado este artículo :), se agradece su divulgación.