Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/07/2013, 03:19
Avatar de 00israel
00israel
 
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 1 mes
Puntos: 5
podeis aclararme porque no me funciona este jquery?

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