Estoy intentado hacer un menú de imágenes en acordeón horizontal. Sacado de aquí:
http://wordpressmetablog.com/2011/08...vertical-text/
He hecho una version adaptada a lo que necesito. Pero tengo ciertas dudas. El jquery puedo incluirlo en el head del propio html o tengoque ponerlo en un archivo aparte. Y si es así como lo llamo a ese archivo y si tengo que poner algo en el codigo de la pagina para vincularlo.
Este es mi HTML con el jquery metido entre el HEAD pero no me funicona y quisiera saber porque:
Código:
Muchas gracias y un saludo <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<script>
$(document).ready(function() {
$('.slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({left: "-=590px"});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({left: "+=590px"});
$(this).prev().trigger('close');
}
});
$('.slidebutton')
.click(function(){
$(this).parent().trigger('open');
$('#content-' + $(this).parent().attr('id')).trigger('show');
});
});
</script>
<style>
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
#accordion {
position: relative;
width: 880px;
height: 290px;
margin: 60px auto;
}
#slides {
list-style: none;
width: 880px;
overflow: hidden;
height:290px
}
#slides li.slide {
overflow: hidden;
clear: both;
width: 708px;
background: #00202f;
height: 290px;
}
#slides .slide-content {
width: 653px;
height: 290px;
color: #444;
margin-left: 50px;
padding: 5px 0;
}
#slide-1 { position: absolute; top: 0; left: 400px; z-index: 9; }
#slide-2 { position: absolute; top: 0; left: 350px; z-index: 8; }
#slide-3 { position: absolute; top: 0; left: 300px; z-index: 7; }
#slide-4 { position: absolute; top: 0; left: 250px; z-index: 6;}
#slide-5 { position: absolute; top: 0; left: 200px; z-index: 5; }
#slide-6 { position: absolute; top: 0; left: 150px; z-index: 4; }
#slide-7 { position: absolute; top: 0; left: 100px; z-index: 3; }
#slide-8 { position: absolute; top: 0; left: 50px; z-index: 2;}
#slide-9 { position: absolute; top: 0; left: 0px; z-index: 1;}
#slides a.slidebutton {
display: block;
width: 290px;
height: 55px;
position: absolute;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform-origin: 120px 120px;
-moz-transform-origin: 130px 130px;
top: 70px;
padding-top: 15px;
text-align: right;
color: #fff;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
text-shadow: 1px 2px #077691;
}
#slide-1 {
position: absolute;
top: 0;
left: 150px;
z-index: 4;
background: url(file:///Macintosh%20HD/Users/adaptart2/Desktop/images/spine1.jpg) no-repeat left;
}
#accordion {
position: relative;
width: 880px;
height: 290px;
margin: 60px auto;
background: url(file:///Macintosh%20HD/Users/adaptart2/Desktop/images/bg.jpg) no-repeat;
padding: 5px 0;
}
</style>
</head>
<body>
<div id="accordion">
<ul id="slides">
<li class="slide open active" id="slide-1">
<a class="slidebutton" href="javascript:void(0);">Oferta Educativa</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image1.jpg" alt="image1" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 1 -->
<li class="slide open" id="slide-2">
<a class="slidebutton" href="javascript:void(0);">Guitarra</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image2.jpg" alt="image2" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 2 -->
<li class="slide open" id="slide-3">
<a class="slidebutton" href="javascript:void(0);">Bajo</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image3.jpg" alt="image3" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 3 -->
<li class="slide open" id="slide-4">
<a class="slidebutton" href="javascript:void(0);">Coros</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image4.jpg" alt="image4" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 4 -->
<li class="slide open" id="slide-5">
<a class="slidebutton" href="javascript:void(0);">Combos y Ensembles</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image5.jpg" alt="image5" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 5 -->
<li class="slide open" id="slide-6">
<a class="slidebutton" href="javascript:void(0);">Lenguaje Musical</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image6.jpg" alt="image6" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 6 -->
<li class="slide open" id="slide-7">
<a class="slidebutton" href="javascript:void(0);">Educación Auditiva</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image7.jpg" alt="image7" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 7 -->
<li class="slide open" id="slide-8">
<a class="slidebutton" href="javascript:void(0);">Armonía</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image8.jpg" alt="image8" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 8 -->
<li class="slide open" id="slide-9">
<a class="slidebutton" href="javascript:void(0);">Composición y Arreglos</a>
<div class="slide-content">
<img src="file:///Macintosh HD/Users/adaptart2/Desktop/images/image9.jpg" alt="image9" width="653" height="354" />
</div><!-- slide content -->
</li><!-- slide 9 -->
</ul>
</div><!-- accordion -->
</body>
</html>
