Librería jQuery para un sliders.
El slideshow que se intenta conectar con esta practica es este .
<div id="galeria" class="grid_12"> <img src="photo/slide_10.jpg" alt="Primera" class="active"> <img src="photo/slide_11.jpg" alt="Primera"> <img src="photo/slide_12.jpg" alt="Primera"> <img src="photo/slide_13.jpg" alt="Primera"> </div> <div class="clear"></div>
Y esl css .
/*galeria*/
#galeria{
position: relative;
height: 335px;
}
#galeria img {
top: 0;
left: 0;
z-index: 8;
}
#galeria img.active{
z-index: 10;
}
#galeria img.last-active{
z-index: 9;
}
Entramos en la librería de google. ->jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Con copiado y pegado del código.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Lo llevamos hasta nuestro código donde estamos trabajando el sliders. y lo copiamos al final del html.
mas o menos a esta altura del código.
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/base.js"></script>
</body>
</html>
como se ve en la parte de arriba hay que conectar con este otro .
<script src="js/base.js"></script>
a una pagina externa para eso tenemos que crear este archivo con el nombre de base.js
copiar y pegar el script a continuación (Donde encontré el script)
copiar y pegar el script a continuación (Donde encontré el script)
/*jslint sloppy: true, vars: true, white: true, maxerr: 50, indent: 4 */
function slideSwitch()
{
/*
*
* Slideshow adaptado a partir del original de Jon Raasch
* http://jonraasch.com/blog/a-simple-jquery-slideshow
*
*/
var $active = $('#galeria img.active');
if ($active.length === 0) { $active = $('#galeria img:last'); }
var $next = $active.next().length ? $active.next() : $('#galeria img:first');
$active.addClass('last-active');
$next.css( {opacity: 0.0} )
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
function init ()
{
var intervaloGaleria = setInterval( slideSwitch, 4000 );
}
$(document).ready(function ()
{
init();
if(!Modernizr.input.placeholder)
{
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder'))
{
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
Con esto el slider tendrá que funcionar cualquier cosa puedes dejarme tu pregunta saludos.
Podrías estar interesado en .
Comentarios
Publicar un comentario