Foros del Web - Ver Mensaje Individual - podeis aclararme porque no me funciona este jquery?

00israel · #1 (**permalink**) 26/07/2013, 03:19

Lo primero comentaros que no tengo ni idea de javascript ni jquery.

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:

<!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>

Muchas gracias y un saludo