Introducción
Cuando se habla de diseño, hay una empresa de la que es imposible prescindir. Apple valora el diseño, ya sea un producto nuevo, un catálogo elegante o su sitio web, siempre hay algo que admirar.
Esta semana, estamos creando una galería de diapositivas similar a la de Apple , similar al que utilizan en su sitio web para mostrar sus productos. Estará totalmente basado en front-end, no se requieren PHP ni bases de datos.
Así que continúe, descargue el código fuente de ejemplo y continúe con el primer paso.
Paso 1 - XHTML
No hay necesidad de una base de datos ni de un back-end de PHP para esta galería. Esto significa que es realmente fácil de incorporar a un sitio existente:solo tiene que cambiar unas pocas líneas de código html.
Echemos un vistazo más de cerca al marcado XHTML:
demostración.html
<div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div> </div> <div id="menu"> <ul> <li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li> </ul> </div> </div> </div>
La idea es simple:hay dos DIV de contenedor principal:el que tiene id="menu" contiene las miniaturas y el otro - "diapositivas" sostiene las diapositivas.
Para agregar una nueva diapositiva, solo tendrá que agregar nuevos elementos a ambos contenedores. Las diapositivas son JPG s, y las miniaturas son PNG transparentes s, pero puede usar cualquier tipo de imagen que desee.
Incluso puedes poner cualquier tipo de HTML también. Por ejemplo, podría convertir una determinada diapositiva en un hipervínculo simplemente colocando la imagen dentro de una etiqueta de anclaje.
Dicho esto, es importante tener el ancho y altura configuración de atributos de las imágenes de diapositivas:jQuery lo utiliza para determinar el ancho del área de deslizamiento, como verá en un momento.
Observe también que la miniatura LI elementos. Al primero se le asigna un nombre de clase de fbar , solía mostrar solo una barra divisoria vertical, y a los demás se les asigna un menuItem clase:se utilizan como botones de control de presentación de diapositivas.
Ahora continuemos con el siguiente paso.
Paso 2:CSS
Veamos qué hay oculto en nuestra hoja de estilo. Solo he incluido los estilos que usa directamente la galería. Puede ver el resto de los estilos, utilizados para mostrar la demostración, en demo.css .
demostración.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Page reset */
margin:0px;
padding:0px;
}
body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}
/* Gallery styles */
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:920px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:400px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:none;
} Hemos utilizado varias propiedades específicas de CSS3 en esta galería de diapositivas:
- caja-sombra , lo que hace que la galería proyecte una ligera sombra alrededor de sus bordes. Para usarlo, debe proporcionar compensaciones por X e Y (0 0 aquí), el desenfoque (3px en este ejemplo) y el color de la sombra;
- borde-radio , que redondea las esquinas inferiores de la galería.
Desafortunadamente, estas propiedades solo son compatibles con Safari, Chrome y Firefox por ahora. Sin embargo en el resto de navegadores sigues teniendo una galería completamente funcional.
Ahora es el momento de un poco de magia jQuery.
Paso 3:jQuery
Como ya mencioné, esta galería no utiliza ningún código del lado del servidor, por lo que todo depende de la interfaz para hacer que la presentación de diapositivas funcione.
secuencia de comandos.js
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
}); La idea principal detrás de este script es recorrer todas las diapositivas, sumar sus anchos y asignar la suma al contenedor de diapositivas:el DIV con el id="diapositivas ". Debido a que las diapositivas flotan hacia la izquierda y tienen suficiente espacio, se alinean una al lado de la otra.
Más tarde, cuando hace clic en una miniatura, la secuencia de comandos calcula qué diapositiva mostrar y desplaza las #slides div asignando un margen negativo mediante animar método.
¡Y con solo 40 líneas de código, la galería deslizante similar a Apple está terminada!
Conclusión
En tres sencillos pasos, creamos una hermosa galería de diapositivas al estilo de Apple. Se puede incluir fácilmente en cualquier sitio web con solo agregar unas pocas líneas de código.
Eres libre de modificar y construir sobre la galería para tus propios proyectos. También asegúrese de compartir lo que ha hecho con la comunidad a través de nuestros tutoriales combinados. (encima de la sección de comentarios).