Implementar 2 jquery diferentes

viher · #1 (**permalink**) 23/05/2012, 08:33

Hola, resulta que en la misma página necesito implementar un archivo "jquery-1.7.1.js" y a la vez otro "jquery.min.js".

El problema es que si incluyo este último, me dejan de funcionar los scripts que usan "jquery-1.7.1.js", y necesito los dos ya que cada uno sirve para distintos scripts.

Estuve mirando varios tutoriales y esto es lo más cercano que llegué a hacer, pero aun así no funciona.

slider.js

Código:

	 $(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 18,
			max: 65,
			values: [ 18, 25 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
			}
		});
		$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
			" - " + $( "#slider-range" ).slider( "values", 1 ) );
		})(jQuery);
		jQuery.noConflict();
	 $(function() {
		$( "#tarifa" ).slider({
			range: true,
			min: 20,
			max: 600,
			values: [ 20, 80 ],
			slide: function( event, ui ) {
				$( "#cantidad" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] + " € " );
			}
		});
		$( "#cantidad" ).val($( "#tarifa" ).slider( "values", 0 ) +
			" - " + $( "#tarifa").slider("values", 1 ) + " € ");
	})(jQuery);
	jQuery.noConflict();

index.html

Código:

<!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>Untitled Document</title>
   

<link rel="stylesheet" href="inc/jquery.ui.all.css">
	<script src="./inc/jquery-1.7.1.js"></script>
    <script>jQuery.noConflict();</script>
	<script src="./inc/jquery.ui.core.js"></script>
	<script src="./inc/jquery.ui.widget.js"></script>
	<script src="./inc/jquery.ui.mouse.js"></script>
	<script src="./inc/jquery.ui.slider.js"></script>
    <script src="./inc/slider_form.js"></script>
<!-- lightbox -->
<script type="text/javascript" src="./inc/lightbox/javascript/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<link rel="stylesheet" type="text/css" href="./inc/lightbox/javascript/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="./inc/lightbox/javascript/lightbox/jquery.lightbox.min.js"></script>
<!-- fin -->
</head>

<body><a href="contacto.php?lightbox[iframe]=true&lightbox[width]=700&lightbox[height]=700" class="lightbox">ABRIR</a>

<div class="demo"><!-- SLIDER EDAD -->
<p>
	<label for="amount">Edad:</label>
    <input type="text" name="edad" id="amount" style="border:0; color:#f6931f; font-weight:bold; " />
</p>

<div id="slider-range" style="width:150px;margin-left:10px;"></div>


<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>
</body>
</html>

¿Alguién sabe como puedo arreglarlo?

Un saludo y gracias.