Pero el problema que tengo, es que dentro de una web quiero usar dos efectos, pero, aúnque por separados me funcionan los dos, cuando los meto en la web, en distintos divs, sólo me funciona uno.
Nosé, si me explicó, dentro de un documento html, en dos div separados, va un efecto javascrip con sus libreías. Os dejo el codigo para que veaís, es un ejemplo simplificado.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<!----efecto pasar hojas libro -->
<meta name="keywords" content="jquery, plugin, css3, flip, page, 3d, booklet, book, perspective" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="/libro/css/demo.css" />
<link rel="stylesheet" type="text/css" href="/libro/css/style.css" />
<link rel="stylesheet" type="text/css" href="/libro/css/custom.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="/libro/js/modernizr.custom.79639.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="/libro/css/noJS.css" /></noscript>
<!---------------------------------->
<!----------segundo efecto-------------->
<!----Aqui DEBERÍA DE IR ---->
<!-- <link rel="stylesheet" href="/slass/css/style.css" />
<link rel="stylesheet" href="/slass/css/slidorion.css" />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>
<script src="/jquery.min.js"></script>
<script src="/jquery.easing.js"></script>
<script src="/jquery.slidorion.min.js"></script>
<script>
$(document).ready(function() {
$('#slidorion').slidorion({
hoverPause: true,
interval: 2500,
speed: 500,
effect: 'fade'
});
$('#slidorion2').slidorion({
interval: 4000,
speed: 1000,
effect: 'slideRandom'
});
});
</script>--->
<!--------------------FIN SEGUNDO EFECTO------------------>
<link rel="stylesheet" type="text/css" href="actioncss.css" />
</head>
<body>
<div id="containerprincipal"> <!---CONTENEDOR PRINCIPAL DE LA WEB -->
<h1>Efecto pasar hojas de un libro</h1>
<div id ="primero"> <!-----DIV DONDE ESTA METIDO EL PRIMER EFECTO -->
<div class="container">
<section class="main">
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<a href="http://drbl.in/bKVq"><img src="/libro/imagenes/1.jpg" alt="image01"/></a>
</div>
<div class="bb-item">
<a href="http://drbl.in/ciTX"><img src="/libro/imagenes/2.jpg" alt="image02"/></a>
</div>
<div class="bb-item">
<a href="http://drbl.in/cLHx"><img src="/libro/imagenes/3.jpg" alt="image03"/></a>
</div>
<div class="bb-item">
<a href="http://drbl.in/bAfn"><img src="/libro/imagenes/4.jpg" alt="image04"/></a>
</div>
<div class="bb-item">
<a href="http://drbl.in/dcbE"><img src="/libro/imagenes/5.jpg" alt="image05"/></a>
</div>
</div>
<h3>Illustrations by <a href="http://dribbble.com/kevinhowdeshell">Kevin Howdeshell</a></h3>
<nav>
<a id="bb-nav-prev" href="#">Previous</a>
<a id="bb-nav-next" href="#">Next</a>
<a id="bb-nav-jump" href="#" title="Go to last item">Last page</a>
</nav>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="/libro/js/jquerypp.custom.js"></script>
<script type="text/javascript" src="/libro/js/jquery.bookblock.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navJump : $( '#bb-nav-jump' ),
bb : $( '#bb-bookblock' ).bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} )
},
init = function() {
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children(),
totalSlides = $slides.length;
// add navigation events
config.$navNext.on( 'click', function() {
config.bb.next();
return false;
} );
config.$navPrev.on( 'click', function() {
config.bb.prev();
return false;
} );
config.$navJump.on( 'click', function() {
config.bb.jump( totalSlides );
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.bb.next();
return false;
},
'swiperight' : function( event ) {
config.bb.prev();
return false;
}
} );
};
return { init : init };
})();
Page.init();
});
</script>
</div>
<div id="segundo"> <!--- DIV DONDE ESTA EL SEGUNDO EFECTO--->
<!-- SI LO PONGO AQUI SOLO FUNCIONA EL SEGUNDO EFECTO -->
<div id="header"><h1>SLIDORION - Multiple Demo</h1></div>
<link rel="stylesheet" href="/slass/css/style.css" />
<link rel="stylesheet" href="/slass/css/slidorion.css" />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>
<script src="/jquery.min.js"></script>
<script src="/jquery.easing.js"></script>
<script src="/jquery.slidorion.min.js"></script>
<script>
$(document).ready(function() {
$('#slidorion').slidorion({
hoverPause: true,
interval: 2500,
speed: 500,
effect: 'fade'
});
$('#slidorion2').slidorion({
interval: 4000,
speed: 1000,
effect: 'slideRandom'
});
});
</script>
<div id="slidorion">
<div id="slider">
<div id="slide1" class="slide">
<img src="/slass/img/spiderman.jpg" width="488" height="400" />
</div>
<div id="slide2" class="slide">
<img src="/slass/img/kick-ass.jpg" width="488" height="400" />
</div>
<div id="slide3" class="slide">
<img src="/slass/img/thor.jpg" width="488" height="400" />
</div>
</div>
<div id="accordion">
<div class="link-header">Spiderman</div>
<div class="link-content">
<p>Based on Marvel Comics' superhero character, this is a story of Peter Parker who is a nerdy high-schooler; bullied by jocks and can't confess his crush for his stunning neighborhood girl Mary Jane Watson.</p>
<p>To say his life is "miserable" is an understatement. But one day while on an excursion to a laboratory a runaway radioactive spider bites him...</p>
</div>
<div class="link-header">Kick Ass</div>
<div class="link-content">
<p>Dave Lizewski is an unnoticed high school student and comic book fan with a few friends and who lives alone with his father. His life is not very difficult and his personal trials not that overwhelming.</p>
<p>However, one day he makes the simple decision to become a super-hero even though he has no powers or training.</p>
</div>
Como digo, por separado funcionan los dos efectos. Pero sólo me funciona uno si los meto en el mismo documento html. ¿Como podría solucionar esto?
Gracias
