Librería jQuery para un sliders.



El     slideshow  que  se intenta conectar con esta practica es este .

Después de tener las imágenes que usaras en la carpeta images ,el html en tu index.html


<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











jQuery
snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
site: http://jquery.com/
versions: 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild.





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)



/*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 .


Como instalar en Adobe Fireworks CS6 el plugins 960 GridS.




Comentarios