Convinar 2 efectos JQuery en una misma pagina Quiero combinar y efectos de jquery 1 contiene un slide(deslisante de fotos) y otro una window modal(como en el face book que tiene un fadeout) los tengo en archivos separados pero quiero que esten en una misma pagina, el problema es que al juntarlos uno desconfigura al otro y no se que hacer pues soy nueva en eso.
Por aca dejo el scrip plis plis ayudenme:
Scrip SLIDE
Cita:
SCRIP MODEWINDOW<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
<!--
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 4000,
pause: 2700,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
}
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="css/global.css">
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:87px;
top:202px;
width:1280px;
height:185px;
z-index:1;
}
-->
</style>
</head>
<body onLoad="MM_preloadImages('Imagenes/Facebooksobre.png','Imagenes/twittersobre.png','Imagenes/youtubesobre.png','Imagenes/bienvenida-sobre.png','Imagenes/tiendas-sobre.png','Imagenes/revistasobre.png','Imagenes/contacto-sobre.png','Imagenes/bolsa-de-trabajo-sobre.png')">
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
</body>
</html>
<div id="Layer13"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bolsa de trabajo','','Imagenes/bolsa-de-trabajo-sobre.png',1)"><img src="Imagenes/bolsa-de-trabajo-normal.png" name="bolsa de trabajo" width="248" height="176" border="0"></a></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
<!--
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 4000,
pause: 2700,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
}
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="css/global.css">
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:87px;
top:202px;
width:1280px;
height:185px;
z-index:1;
}
-->
</style>
</head>
<body onLoad="MM_preloadImages('Imagenes/Facebooksobre.png','Imagenes/twittersobre.png','Imagenes/youtubesobre.png','Imagenes/bienvenida-sobre.png','Imagenes/tiendas-sobre.png','Imagenes/revistasobre.png','Imagenes/contacto-sobre.png','Imagenes/bolsa-de-trabajo-sobre.png')">
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
</body>
</html>
<div id="Layer13"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bolsa de trabajo','','Imagenes/bolsa-de-trabajo-sobre.png',1)"><img src="Imagenes/bolsa-de-trabajo-normal.png" name="bolsa de trabajo" width="248" height="176" border="0"></a></div>
</body>
</html>
Cita:
----------------------------------------------<!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>
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHei ght});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//esto centra la imagen
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//esto hace que el boton funcione
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
body
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
</style>
</head>
<body>
<!-- esto busca el efecto en la libreria -->
<ul><li><a href="#dialog1" name="modal">Esta tiene imagen</a></li>
</ul>
<div id="boxes">
<!-- Esta es la intruccion que busca mi imagen -->
<div id="dialog1" class="window">
<div class="d-login"><input type="image" alt="Login" title="Bienvenidos" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->
<!-- Estohace que se difumine a negro -->
<div id="mask"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHei ght});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//esto centra la imagen
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//esto hace que el boton funcione
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
body
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
</style>
</head>
<body>
<!-- esto busca el efecto en la libreria -->
<ul><li><a href="#dialog1" name="modal">Esta tiene imagen</a></li>
</ul>
<div id="boxes">
<!-- Esta es la intruccion que busca mi imagen -->
<div id="dialog1" class="window">
<div class="d-login"><input type="image" alt="Login" title="Bienvenidos" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->
<!-- Estohace que se difumine a negro -->
<div id="mask"></div>
</div>
</body>
</html>
de nuevo mil gracias
