En JQuery lightbox que es una libreria JQuery para presentaciones de imágenes se puede realizar un set de estas, un set es un conjunto de imagenes supuestamente de misma tématica en la cual puedes navegar entre ellas mediante los cursores. Para eso simplemente en el campo data-lightbox deben de tener el mismo nombre todas las fotos que pertenezcan a ese set. He aquí un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summer Vacation</title>
<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span>— My Trip to —</span>
<h1>The Golden State</h1>
</header>
<!-- Thumbnail Images -->
<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
<img src="assets/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="assets/images/image2.jpg" data-lightbox="roadtrip" data-title="Lifeguard Stand">
<img src="assets/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="assets/images/image3.jpg" data-lightbox="roadtrip" data-title="Hot Air Balloon">
<img src="assets/thumbnails/thumb3.jpg" alt="Hot Air Balloon"/>
</a>
<a href="assets/images/image4.jpg" data-lightbox="roadtrip" data-title="Field Freedom">
<img src="assets/thumbnails/thumb4.jpg" alt="Field Freedom"/>
</a>
<a href="assets/images/image5.jpg" data-lightbox="roadtrip" data-title="Golden Gate Bridge">
<img src="assets/thumbnails/thumb5.jpg" alt="Golden Gate Bridge"/>
</a>
<a href="assets/images/image6.jpg" data-lightbox="roadtrip" data-title="Pacific Ocean Sunset">
<img src="assets/thumbnails/thumb6.jpg" alt="Pacific Ocean Sunset"/>
</a>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'positionFromTop': 100,
})
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario