Introducción
Uno de los principales beneficios de usar una biblioteca de scripts Java popular, como jQuery, es la increíble cantidad de complementos disponibles que impulsarán cualquier proyecto de desarrollo.
Hoy vamos a crear una galería personalizada que escanea una carpeta de imágenes y genera una galería elegante, utilizando PHP, CSS, jQuery y el complemento jQuery Lightbox.
No es necesario descargar el complemento; lo he incluido en los archivos de demostración, así que consígalos y ponte a leer.
El XHTML
Comenzamos con nuestro front-end XHTML.
demo.php
<div id="container"> <div id="heading"> <!-- the heading --> <h1>A cool jQuery gallery</h1> </div> <div id="gallery"> <!-- this is the containing div for the images --> <?php //our php code goes here ?> <div class="clear"></div> <!-- using clearfix --> </div> <div id="footer"> <!-- some tutorial info --> </div> </div> <!-- closing the container div -->
Y eso es básicamente todo lo que hay que hacer. Tenga en cuenta el área resaltada:aquí es donde colocamos nuestro código PHP, que generará las imágenes de la galería. Ahora veamos cómo se hace esto.
El PHP
La idea es simple:nuestro back-end de PHP escaneará una carpeta que hemos configurado con las imágenes de nuestra galería y la convertirá en una elegante galería de CSS y jQuery. Lo mejor de esta estrategia es que es increíblemente fácil configurar una galería, y agregar imágenes a una existente es un encanto:simplemente colóquelas en el directorio de la galería a través de FTP y estará listo para funcionar.
demo.php
$directory = 'gallery'; //where the gallery images are located
$allowed_types=array('jpg','jpeg','gif','png'); //allowed image types
$file_parts=array();
$ext='';
$title='';
$i=0;
//try to open the directory
$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
while ($file = readdir($dir_handle)) //traverse through the files
{
if($file=='.' || $file == '..') continue; //skip links to the current and parent directories
$file_parts = explode('.',$file); //split the file name and put each part in an array
$ext = strtolower(array_pop($file_parts)); //the last element is the extension
$title = implode('.',$file_parts); //once the extension has been popped out, all that is left is the file name
$title = htmlspecialchars($title); //make the filename html-safe to prevent potential security issues
$nomargin='';
if(in_array($ext,$allowed_types)) //if the extension is an allowable type
{
if(($i+1)%4==0) $nomargin='nomargin'; //the last image on the row is assigned the CSS class "nomargin"
echo '
<div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">
<a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>
</div>';
$i++; //increment the image counter
}
}
closedir($dir_handle); //close the directory Al recorrer los archivos en el directorio y omitir los archivos que no son de imagen, generamos un código XHTML para cada imagen. Este código (líneas 28-39) consta de un contenedor div, con una clase CSS pic (y en algunos casos un sin margen , más sobre eso más adelante), y establecemos su fondo al archivo de imagen a través del estilo atributo. Posicionamos la imagen en el centro del fondo especificando que su posición sea 50% 50% . Esto lo centra tanto horizontal como verticalmente y, por lo tanto, muestra solo la parte central, que se ajusta al tamaño del contenedor div. Esto crea una bonita miniatura, sin necesidad de cambiar el tamaño de la imagen.
Esto funciona mejor con imágenes con resoluciones más pequeñas, por lo que debería considerar cambiar el tamaño de esas fotos de 10 megapíxeles antes de subirlas.
El div contiene un hipervínculo que está vinculado a la imagen y tiene un título del nombre de archivo de la imagen. Ambos atributos son utilizados por lightBox complemento para generar la galería de lightbox. Entonces, al cambiar el nombre del archivo, puede cambiar el título que se muestra debajo.
Quizás se pregunte cuál es el sentido de ese sin margen ¿clase? Cada imagen en la galería tiene un margen derecho e inferior. Pero esto significa que no es posible que el último elemento de cada fila se alinee con la parte derecha del div del encabezado y parece un aficionado. Así que asignamos esta clase especial, que borra el margen derecho del último elemento de cada fila y nos da una alineación adecuada.
El CSS
Todo está configurado, pero todavía tenemos que darle ese aspecto genial.
demostración.css
/* first reset some of the elements for browser compatibility */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}
body{ /* style the body */
margin-top:20px;
color:white;
font-size:13px;
background-color:#222222;
}
.clear{ /* the clearfix class */
clear:both;
}
a, a:visited { /* a:visited is needed so it works properly in IE6 */
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{ /* the hover effect */
text-decoration:underline;
}
#container{ /* the main container div */
width:890px;
margin:20px auto;
}
#heading,#footer{ /* the header and the footer share some of their style rules */
background-color:#2A2A2A;
border:1px solid #444444;
height:20px;
padding:6px 0 25px 15px;
margin-bottom:30px;
overflow:hidden;
}
#footer{ /* ..but not all */
height:10px;
margin:20px 0 20px 0;
padding:6px 0 11px 15px;
}
div.nomargin{ /* our special nomargin class */
margin-right:0px;
}
.pic{ /* divs that hold all the pictures in the gallery */
float:left;
margin:0 15px 15px 0;
border:5px solid white;
width:200px;
height:250px;
}
.pic a{ /* in every .pic container there is a hyperlink exactly the size of the container */
width:200px;
height:250px;
text-indent:-99999px;
display:block; /* don't forget that widths and heights of hyperlinks are useless without display:block */
}
h1{ /* style the heading */
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2{ /* the footer text */
font-weight:normal;
font-size:14px;
color:white;
} JQuery
Para que todo funcione, debemos incluir jQuery biblioteca de scripts java en nuestra página, y agregue el lightBox enchufar. El siguiente código fue tomado de la sección principal de demo.php :
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css"> <link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script> <script type="text/javascript" src="script.js"></script>
En la línea 1 incluimos el lightbox archivo CSS del plugin, que da estilo a la caja de luz que muestra las imágenes. En la línea 2 incluimos nuestro propio archivo CSS.
La línea 4 es donde incluimos la biblioteca jQuery del CDN de Google. Más tarde vendrá el propio complemento lightbox y nuestro propio script.js archivo.
Ahora estamos listos para dar el toque final.
secuencia de comandos.js
// after the page has finished loading
$(document).ready(function(){
$('.pic a').lightBox({
// we call the lightbox method, and convert all the hyperlinks in the .pic container into a lightbox gallery
imageLoading: 'lightbox/images/loading.gif',
imageBtnClose: 'lightbox/images/close.gif',
imageBtnPrev: 'lightbox/images/prev.gif',
imageBtnNext: 'lightbox/images/next.gif'
});
}); La caja de luz() El método toma un objeto como un parámetro opcional. La única razón por la que proporcionamos parámetros es que cambié la ubicación predeterminada del complemento, colocándolo en una subcarpeta /lightbox que ayuda a una estructura de archivos más limpia. Lamentablemente, las imágenes que utiliza el complemento se vuelven inaccesibles y deben proporcionarse manualmente.
Con esto nuestra galería está completa.
Conclusión
En este tutorial, aprendió cómo crear una galería de imágenes con estilo con la ayuda del complemento jQuery lightBox. Puede usar el código de ejemplo en sus proyectos y es libre de modificarlo de la manera que considere apropiada. También puede usarlo tal como está y agregar una galería a su sitio con modificaciones mínimas necesarias.