Foros del Web » Programando para Internet » Jquery »

Convinar 2 efectos JQuery en una misma pagina

Estas en el tema de Convinar 2 efectos JQuery en una misma pagina en el foro de Jquery en Foros del Web. Hola a todos antes que nada gracias por leer mi problema y espero que puedan ayudarme: Quiero combinar y efectos de jquery 1 contiene un ...
  #1 (permalink)  
Antiguo 10/03/2011, 02:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 1
Antigüedad: 13 años
Puntos: 0
Mensaje Convinar 2 efectos JQuery en una misma pagina

Hola a todos antes que nada gracias por leer mi problema y espero que puedan ayudarme:
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:
<!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>
SCRIP MODEWINDOW
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>
----------------------------------------------

de nuevo mil gracias

Etiquetas: convinar, efectos, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:47.