Hola! me estoy volviendo un poco loco con una pagina responsiva..
a ver si alguien me puede ayudar por favor
es una pag. muy sencilla, un menú lateral con 3 elementos y en el centro 1 foto que va cambiando cada 5 segundos
quiero que al pinchar en el tercer elemento se quiten esas fotos y salga otra diferente especial, y si pulsas de nuevo en el menú en cualquier elemento o en ese mismo vuelva a salir la foto de antes que va cambiando cada 5 segundos
casi lo he conseguido pero lo que hace es EMPUJAR la foto hacia abajo, que en web no se ve y parece que desaparece, pero en el movil si sale y se ve que no ha desaparecido sino que se ha desplazado hacia abajo, y cuando pinchas en el menú para que salgan la foto que va cambiando se arrastra hacia arriba, se ve claramente y queda feisimo, por eso quiero que desaparezca y aparezca una por otra, no que se arrastren y desplacen..
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmST sz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/slides.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="box-shadow-menu" id="menu_btn"> </div>
<ul class="menu">
<li data-show="contacto">CONTACTO</li>
<li data-show="horario">HORARIO</li>
<li data-show="disenadores">ALUMNOS</li>
</ul>
</div>
<div class="col-md-8">
<!-- <h1 class="pull-right">ESCUELA</h1> -->
<img class="pull-right" src="images/logo.png" />
</div>
</div>
<div class="row">
<div class="col-md-2 info">
<section id="contacto">
<b>CONTACTO</b>
</br>
<p>Calle Mayor 20</p>
<p>28003 Madrid</p>
<p>TEL. +34 912252310</p>
</section>
<section id="horario">
<b>HORARIO</b>
<p></br>AM: M-S 10:00 - 13:30H</p>
<p>PM: L -S 17:00 - 20:30H</p>
</section>
</div>
<div class="rslides2" >
<section id="alumnos">
<b>ALUMNOS</b>
</br></br><img src="images/3.jpg" alt="Imagen 3">
</section>
</section>
<ul class="rslides" id="foto">
<li>
<img src="images/1.jpg" alt="Imagen 1">
</li>
<li>
<img src="images/2.jpg" alt="Imagen 2">
</li>
</ul>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/scripts.js"></script>
</body>
El archivo javascript scripts.js sería este:
$(function() {
$('.rslides').responsiveSlides();
$('.nombres').responsiveSlides();
$contacto = $('#contacto');
$horario = $('#horario');
$disenadores = $('#alumnos');
$foto = $('#foto');
$('ul.menu li').on('click', showInfo);
$('#menu_btn').on('click', showMenu);
});
var $contacto, $horario, $alumnos;
function showMenu() {
$('ul.menu').slideDown();
$('#menu_btn').hide();
}
function showInfo() {
var sectionId = $(this).data('show');
var $newTarget = $('#'+sectionId);
if ($newTarget.is($contacto)) {
$horario.hide();
$alumnos.hide();
$contacto.slideToggle();
} else if ($newTarget.is($horario)) {
$contacto.hide();
$alumnos.hide();
$horario.slideToggle();
} else { // alumnos
$contacto.hide();
$horario.hide();
$alumnos.slideToggle();
$foto.toggle();
}
}
Gracias!