Problema de anulacion al usar dos jquery

godilo · #1 (**permalink**) 15/04/2010, 15:11

Buenas,

Estoy probando una web que tiene una precarga con javascrpit al iniciar, tambien en esa misma web uso script para que al agrandar y achicar la ventana del navegador la imagen haga un efecto "resize". El problema es que los dos scripts juntos no funcionan, pero separados si. Mi pregunta es, como puedo hacer para que funcionen los dos scripts juntos?. Estuve investigando pero no encontre una solucion que me ayudara.

Aqui les dejo el codigo html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="javascripts/prototype.js"></script>

<script type='text/javascript' src='javascripts/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='javascripts/queryLoader.js'></script>

<link href="css/bgimage.css" rel="stylesheet" type="text/css" />
<link href="javascripts/application.js" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="coal_homepage_slideshow" class="coal_slideshow">

<img alt="Studio" id="coal_slideshow_0" src="img/studio/1.jpg" /></div>
<script type="text/javascript" src="javascripts/application.js"></script>
<script type="text/javascript"> Layout = {
// setup
ih: 0,
iw: 0,
iar: 1,
war: 1,
img: '',
GetWindowSize: function(w) {
w = w ? w : window;
var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
return [width, height];
},
// initialize
init: function(e) {
// image height, width and aspect ratio
Layout.img = $('coal_slideshow_0');
Layout.holder = $('coal_homepage_slideshow');
Layout.ih = Layout.img.getHeight();
Layout.iw = Layout.img.getWidth();
Layout.iar = Layout.iw / Layout.ih;
Layout.resize(e);
Layout.number_of_images = images_json.length;
},
resize: function(e) {
// window width, height and aspect ratio
ws = Layout.GetWindowSize(window);
window_width = ws[0];
window_height = ws[1];
window_ratio = window_width / window_height;

image_width = Layout.iw;
image_height = Layout.ih;
image_ratio = Layout.iar;

new_image_width = window_width;
new_image_height = ( new_image_width / image_width ) * image_height;
width_diff = 0;
height_diff = -( new_image_height - window_height ) / 2;

if( new_image_height < window_height ) {
new_image_height = window_height;
new_image_width = ( new_image_height / image_height ) * image_width;
height_diff = 0;
width_diff = -( new_image_width - window_width ) / 2;
}

niw = Math.ceil(new_image_width);
nih = Math.ceil(new_image_height);

slideshow_images = Layout.holder.select('img');
slideshow_images.each( function(simage, index) {
simage.setStyle( { width: niw+"px", height: nih+"px", top: height_diff+'px', left: width_diff+'px' } );
});

}
}

images_json = ["img/studio/1.jpg"];
Event.observe(window, 'resize', function() { Layout.resize(); } );
Event.observe(window, 'load', function() {
// images, container class_name, transition_time, interval
slideshow = new EKSlideShow( images_json, 'coal_slideshow', 1, 7 );
pe = new PeriodicalExecuter(function(pe) {
Layout.init();
pe.stop();
pee = new PeriodicalExecuter( function(pee) {
Layout.resize();
}, 3);
}, 0.02);
});// JavaScript Document
</script>

<script type='text/javascript'>
QueryLoader.init();
</script>
</body>
</html>

saludos y gracias de antemano

caricatos · #2 (**permalink**) 15/04/2010, 15:47

Tema movido desde javascript

mayid · #3 (**permalink**) 15/04/2010, 18:35

Tu problema es que estas usando dos librerias diferentes:

<script type="text/javascript" src="javascripts/prototype.js"></script>

<script type='text/javascript' src='javascripts/jquery.min.js'></script>

Si fueran dos script de la misma libreria no habría problemas. Pero en esta caso, las dos son diferentes y necesitan del simbolo $.

Para resolver el tema, busca el metodo noConflict de jquery.

godilo · #4 (**permalink**) 16/04/2010, 09:22

Estuve invetigando y lo que entendi es que hay que cambiar el simbolo $ por jQuery y poner jQuery.noConflict(). por ejemplo:

Código

$(document).ready();

Ahora será:

Código

jQuery.noConflict().

jQuery(document).ready();

el tema es que no se en que archivos cambiar ese simbolo ni donde insertar jQuery.noConflict(). ya cambie estas cosas en un archivos queryLoader.js y tambien en el codigo que muestra el html mas arriba.

agradeceria un poco mas de ayuda estoy medio perdido

saludos y gracias

gonzalo

mayid · #5 (**permalink**) 16/04/2010, 11:04

El tema es hacerlo en cabecera. No creo que sea necesario meterse con cada script por separado. Sería algo así:

Cita:

Por cierto, tenes un llamado completamente descolgado, el el body:
<script type="text/javascript" src="javascripts/application.js"></script>

Ese debería ir en el header.

Ademas, todo el codigo que tenes en body puede ir tranquilamente en header, en tanto aprendas a usar document.ready correctamente. ( o sea, que lo entiendas ).

godilo · #6 (**permalink**) 19/04/2010, 08:11

No entendi cuando decis "// aca pones los llamados a tus script jquery." te referis a
"<script type='text/javascript' src='javascripts/jquery.min.js'></script>" o hay que poner otra cosa? tampoco entendi "// aca pones lo que necesites de jquery" perdon mi ignorancia en el tema jeje.

saludos

mayid · #7 (**permalink**) 19/04/2010, 08:16

Para entendernos podemos llamar las cosas así:

- librerias (o frameworks también).
- plugins
- scripts

La librería es jquery (existen otras, por ejemplo Mootools). Y se incluye así:
<script type='text/javascript' src='javascripts/jquery.min.js'></script>

Los plugins se incluyen de igual manera, y sirven para cosas determinadas. Por si mismo rara vez hacen algo. Para que hagan algo hay que "llamarlos" o "inicializarlos", y esas llamadas las hacen los scripts.

Los scripts, si son cortos, suelen dejarse en la pagina principal. No en archivos aparte. Lo que hacen es, entre otras cosas, poner a funcionar los plugins.

vjchino · #8 (**permalink**) 17/04/2013, 21:56

porfavor nesesito ayuda estoy haciendo una pagina y estoy usando una galeria jquery nivo slider y un fancybox pero se me anula solo puedo ver uno hace conflicto porfavor recien experimento con javascrip espero me puedan ayudar aqui dejo el codigo que me mata

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link href="fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(e) {
$(".figura").fancybox();
});
</script>