por Dmitri Semenov
es una galería de imágenes jQuery y un complemento de control deslizante de contenido. Es completamente receptivo, fácil de tocar y tiene una arquitectura modular que le permite incluir solo las funciones que necesita para optimizar el tamaño y el rendimiento del archivo.
por Andy
Un complemento de galería/exhibición altamente personalizable para jQuery.
por Trento
Galleriffic es un complemento de jQuery que proporciona una rica experiencia gratuita de devolución optimizada para manejar grandes volúmenes de fotos y conservar el ancho de banda.
por Aino
Galleria es un marco de galería de imágenes de JavaScript construido sobre la biblioteca jQuery. El objetivo es simplificar el proceso de creación de galerías de imágenes profesionales para la web y dispositivos móviles.
por CatchMyFame
El otro día busqué una forma simple de usar jQuery para desvanecerme entre un conjunto de imágenes en una página. Entonces, siendo programador, me propuse crear mi propio complemento.
por Thomas Khan
Smooth Div Scroll es un complemento de jQuery que desplaza el contenido horizontalmente hacia la izquierda o hacia la derecha. Además de muchos de los otros complementos de desplazamiento que se han escrito para jQuery, Smooth Div Scroll no limita el desplazamiento a pasos distintos.
por Víctor Zambrano – frwrd.net
Minishowcase es una pequeña y simple galería de fotos en línea de php/javascript, con tecnología AJAX que le permite mostrar fácilmente sus imágenes en línea, sin bases de datos complejas ni codificación, lo que le permite tener una galería en funcionamiento en unos minutos.
por Caspar David Friedrich
EOGallery es una galería de presentación de diapositivas animada web hecha con jQuery. Solo utiliza funciones básicas de jQuery y Thickbox de Cody Lindley para mostrar imágenes más grandes.
por Arnault Pachot
Un carrusel multiformato para jQuery, portafolio no obstructivo y accesible que admite múltiples medios: fotos, video (flv), audio (mp3). Este complemento para jQuery detectará automáticamente la extensión de cada medio y aplicará el reproductor adaptado.
por Stefan Peter
Otro complemento de galería de imágenes con efecto de espacio, complemento muy ligero y simple.
por Moreno Di Domenico
jmFullWall es un complemento jQuery para la creación de una cartera impresionante.
por Fabricio Calderan
Mosaiqy es un complemento de jQuery para ver y hacer zoom en fotos que funcionan en Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome e IE7+. Las fotos se recuperan de una estructura de datos JSON/JSONP y se mueven aleatoriamente dentro de la cuadrícula. La GPU se hace cargo de todas las animaciones costosas en los navegadores recientes que usan transiciones CSS3, lo que minimiza la sobrecarga de la CPU.
por Cody
El siguiente complemento de jQuery transforma un conjunto de imágenes en una pequeña galería con varias opciones. La galería de microimágenes permite cambiar entre una vista de cuadrícula que muestra una vista previa de las imágenes como miniaturas y una vista única que muestra una sola imagen.
por Malihu
Una galería de imágenes de pantalla completa simple pero elegante creada con el marco jQuery y algo de CSS simple.
Las miniaturas del proyecto se desplazan cambiando la posición del cursor del mouse en la columna izquierda. El área de contenido muestra una imagen ampliada con el nombre de los proyectos, una descripción y una lista de tecnologías utilizadas. A medida que se desplaza entre las miniaturas, la información del proyecto cambia de una a otra con un sorprendente efecto animado. Al hacer clic en una imagen en la página de descripción, también se amplía utilizando la animación jQuery. También quiero señalar el impresionante y elegante apariencia toda la página del portafolio. Ver demostración.
Una excelente implementación del sitio de la cartera de un fotógrafo. Cuando hace clic en un elemento del menú, se recopila un área con contenido de una altura y un ancho fijos de los cuadrados dispersos por la pantalla. Para incluir más información en un área fija, se proporciona desplazamiento de contenido. La implementación de mostrar obras del portafolio se implementa de una manera inusual: al hacer clic en una miniatura, se muestra una foto como imagen de fondo, que se escala automáticamente cuando se cambia el tamaño de la ventana del navegador.
La solución original para crear una cartera en línea. Los bloques del proyecto (miniaturas y una breve descripción con un enlace) se muestran varios en una fila; cuando cambia la ventana del navegador, los bloques se redistribuyen uniformemente en la página con un efecto animado. Cada proyecto puede tener varias imágenes en miniatura, cuya transición se realiza mediante flechas. Al hacer clic en el enlace, se abre una página con una descripción completa, donde el texto se coloca en un bloque semitransparente de altura fija con desplazamiento. La imagen escalable del proyecto se utiliza como fondo de la página. Se ve bien, vea la demostración.
Implementación de scroll vertical y horizontal.
Una cuadrícula arrastrable que consta de bloques de contenido e imágenes. La cuadrícula se puede arrastrar con el mouse (presione cualquier botón del mouse y arrastre en la dirección deseada). Cuando hace clic en una miniatura, la imagen principal se expande a todo el ancho de la pantalla. Cuando hace clic en un bloque oscuro con texto, se revela un área con una descripción más detallada.
Sitio de una sola página con cambio de contenido animado. En la página de demostración, navegue por las pestañas del menú para ver el efecto.
Con la ayuda de este Complemento jQuery y "Cambiar opciones de visualización" puede implementar un interruptor en la página, con el cual el visitante cambiará de una visualización tabular de información a una vista completa con una descripción de los bloques. Perfecto para una cartera.
Una solución jQuery original creada para un sitio web de cafetería. La plantilla tiene una interesante galería de jQuery para mostrar los platos del menú. Las imágenes de la galería están escaladas según el tamaño de la ventana del navegador. Primero, la galería muestra imágenes en miniatura con el nombre y una breve descripción de los platos, mientras que la foto de tamaño completo se muestra oscurecida en el fondo. La navegación entre las fotos disponibles se realiza mediante las flechas o la rueda del ratón. Al hacer clic con el mouse en el modo de galería, se eliminarán las miniaturas con descripciones y podrá ver las imágenes grandes originales extendidas a todo el ancho de la ventana. Para volver al menú del sitio desde la galería, debe hacer clic en el enlace en la esquina superior derecha. Además de la elegante galería jQuery, un mapa de Google está integrado de manera muy efectiva en la plantilla.
Para crear una especie de "muros" de fotos o bloques HTML que se pueden arrastrar con el ratón por la pantalla dentro de un área fija.
Visualización en la página de varios elementos a lo largo de un círculo de un diámetro dado.
La página implementa la capacidad de enviar una dirección de correo electrónico, que se registra en la base de datos y a la que será posible enviar una notificación sobre la apertura del sitio. La página también está decorada con una pequeña presentación de diapositivas, implementada sobre la base del complemento jQuery Nivo Slider v. 2.3.
Con él, puede hacer un efecto interesante de una tarjeta de presentación giratoria cuando hace clic en un enlace.
La idea es rastrear los clics de los usuarios. Para ver el complemento en acción en la página de demostración, haga clic y luego haga clic en el botón "Analizar". Y sobre un fondo traslúcido, se mostrarán los puntos donde hiciste clic con el mouse.
Implementación de un bonito teclado en pantalla. Nunca se sabe, para algo te vendrá bien.
Realización de folletos con notas. El texto se puede editar y las notas mismas se pueden eliminar o mover por la pantalla. Para ver un ejemplo, vaya a la página de demostración a la pestaña "Demostración".
Interesante diseño de enlaces: cuando pasas el cursor sobre un enlace, su ancla cambia. Se ve bien.
Implementación de captcha para el formulario de registro. El complemento es un conjunto de números que debe configurar en orden ascendente arrastrando y soltando. Una forma bastante interesante de confirmar que el registro es una persona real, no un robot.
Los botones se muestran en la parte inferior de la pantalla que se pueden usar para desplazarse suavemente hacia arriba o hacia abajo en la página.
El complemento utiliza la API de idioma de Google y puede traducir texto a cualquier idioma proporcionado por Google. Para traducir, debe hacer clic en el icono junto al párrafo y seleccionar el idioma al que desea traducir de la lista desplegable.
Gran implementación de enlaces desplazables para paginación. Implementado usando jQuery.
Este complemento de jQuery le permitirá implementar notas "en papel" en su sitio.
Complemento para crear una cadena de navegación animada "Breadcrumbs"
Complemento jQuery para la implementación de la página del producto. Al hacer clic en la imagen de un producto, aparece su descripción.
Efecto de desplazamiento vertical jQuery. Perfecto para implementar sitios de una página y sitios de cartera. Para ver el efecto, haga clic en el elemento del menú en la página de demostración.
Efecto jQuery para implementar la evaluación de algo. El color de los círculos y el texto debajo de ellos cambian según sobre cuál esté el cursor del mouse.
Un complemento que implementa la navegación del sitio. En este caso, su sitio se presenta como una grilla de documentos, entre los cuales se realiza la transición con un interesante efecto jQuery.
Puede usar fácilmente este complemento para crear pequeños sitios web y aplicaciones web. Además, no se verá mal en los sitios de cartera.
Indicador de carga efectiva.
Al completar el campo, el complemento sugerirá posibles opciones para completar con Ajax, mientras que filtrará y mostrará solo aquellas opciones que satisfagan el texto ya ingresado en el campo.
Antes de iniciar la comunicación, el visitante debe ingresar su apodo y correo electrónico. La columna de la derecha muestra cuántas personas están conectadas al chat. Tecnologías utilizadas: PHP, MySQL, jQuery, CSS.
Los visitantes pueden agregar una nueva propuesta o votar por una existente. Una excelente solución para aquellos que quieren conocer la opinión de su audiencia sobre el sitio. Además, esta página se puede utilizar para recopilar nuevas ideas para el desarrollo posterior de su proyecto. Tecnologías utilizadas: PHP, MySQL, jQuery, CSS
Implementación precisa de encuestas en el sitio. Tecnologías utilizadas: jQuery, Ajax, PHP y MySQL.
Una solución muy interesante para la implementación de la votación en el sitio. Al arrastrar los bloques hacia arriba y hacia abajo, tomando las imágenes con el mouse, puede organizarlas en la página en cualquier orden. Cuanto más alto dejes el bloque, mejor fue calificado y, en consecuencia, si el bloque se coloca en la parte inferior, significa que te gustó menos. Después de organizar los bloques en la secuencia deseada, debe hacer clic en el botón "Enviar encuesta" para que se tenga en cuenta el voto. La página de resultados muestra los resultados de la votación y el número de visitantes que votaron. Tecnologías utilizadas: CSS, PHP, MySQL, jQuery.
Un sistema de comentarios Ajax simple con validación de la información ingresada. Los comentarios se almacenan en una base de datos. Implementado usando: PHP, MySQL, CSS, jQuery.
Tecnologías utilizadas: PHP, jQuery, CSS.
Cuando navega por los elementos del menú, el contenido se carga sin recargar la página. Tecnologías utilizadas: PHP, jQuery, CSS.
Implementación de la búsqueda en el sitio utilizando la API de búsqueda de Google AJAX. Podrá brindar al visitante la oportunidad de buscar tanto en su sitio como en Internet. Al mismo tiempo, la búsqueda se puede realizar no solo en las páginas del sitio, sino también en imágenes y archivos multimedia.
Efecto muy interesante, se puede utilizar en la ejecución de la cartera. Cuando hace clic en una imagen, se oscurece con un fondo translúcido y aparece un título con una descripción de lo que debe prestar atención.
Implementación jQuery de la página de preguntas frecuentes en el sitio. En la parte superior de la página se muestra una lista de preguntas. Cuando hace clic en una pregunta, la página se desplaza suavemente hasta la que seleccionó y la pregunta activa con la respuesta se resalta en un color diferente. También aparece un enlace para volver a la lista de preguntas en el campo de respuesta activa.
El color cambia cuando pasas el ratón por encima. Puedes hacer que el color cambie aleatoriamente.
Con este interesante complemento, puede presentar al visitante las funciones principales de su sitio si lo visita por primera vez. Cuando se carga la página, aparece un bloque en la esquina superior derecha con una sugerencia para realizar un recorrido por el sitio. Si un visitante visita su sitio por primera vez, puede usar una pequeña guía para conocer las características principales. En este caso, la página se oscurece y los bloques necesarios en cada paso se marcan con una marca. Si el visitante ya ha visitado su sitio antes, simplemente puede cerrar la ventana ofreciendo un recorrido por el sitio.
Con este complemento, puede presentar al visitante la funcionalidad principal de la página. Esto se hace en forma de una descripción emergente secuencial de los elementos. El visitante puede ver todas las sugerencias haciendo clic en el botón Siguiente, o cerrar el recorrido en línea (si ya ha aterrizado en esta página por primera vez) usando la cruz.
Es una galería moderna de estilo lightbox para mostrar imágenes y videos de YouTube en su sitio. La interfaz de la galería es totalmente receptiva y funciona a la perfección en todos los dispositivos, grandes o pequeños.
Demostración y descarga
FABA es un complemento de jquery de galería de fotos y álbumes de Facebook receptivo que cargará todos los álbumes y fotos de la página de Facebook seleccionada.
Hay alrededor de 90 opciones que puede editar y puede personalizar casi todo: animaciones, efectos de desplazamiento, cada parte de las animaciones de desplazamiento, texto, comportamientos y mucho más. Puede integrar hermosos álbumes en su proyecto o página web.
xGallerify es un complemento de galería ligero y receptivo que le permite crear hermosas galerías de imágenes para sus sitios web. Este complemento es liviano (3kb de tamaño de archivo), fácil de usar y viene con varias opciones y estilos personalizables.
Demostración y descarga
Instagram Element es un complemento premium de Instagram para blogueros, fotógrafos, modelos y cualquiera que busque aumentar su presencia en Instagram.
Este complemento es totalmente receptivo y le permite administrar fácilmente más de 50 opciones y le permite mostrar sus fotos de manera hermosa en cualquier dispositivo.
SnapGallery es un complemento de jQuery simple que convierte una lista fea de imágenes de diferentes tamaños en una hermosa galería personalizable con una línea de JavaScript.
Es completamente receptivo, personalizable y le permite seleccionar el espacio entre imágenes, el ancho mínimo permitido antes de apilar y el número máximo de columnas, ¡con más opciones en camino!
Demostración y descarga
Eagle Gallery esta es una galería moderna con funcionalidad de zoom de imagen. Para administrar la galería puedes usar gestos o botones de control. Esta es una galería totalmente receptiva que tiene soporte para pantalla táctil y fue creada para dispositivos móviles, computadoras portátiles y de escritorio.
Con esta galería, puede crear fácilmente una galería de productos en su tienda de Internet para obtener una vista detallada y personalizarla con la ayuda de opciones.
Unite Gallery es una galería de JavaScript multipropósito basada en la biblioteca jQuery. Está construido con una técnica modular con mucho acento de facilidad de uso y personalización. Es muy fácil personalizar la galería, cambiar su apariencia a través de css e incluso escribir su propio tema. Sin embargo, esta galería es muy poderosa, rápida y tiene la mayor parte de las características que debe tener hoy en día, como la capacidad de respuesta, la función táctil e incluso la función de zoom, es un efecto único.
Demostración y descarga
jQuery lightGallery es una galería ligera de jQuery lightbox para mostrar galerías de imágenes y videos.
Lightgallery admite la navegación táctil y deslizante en dispositivos con pantalla táctil, así como el arrastre del mouse para computadoras de escritorio. Esto permite a los usuarios navegar entre diapositivas deslizando o arrastrando el mouse.
Lightgallery viene con una gran cantidad de opciones, que le permiten personalizar el complemento muy fácilmente. Puede personalizar fácilmente la apariencia de la galería actualizando las variables SASS.
Demostración y descarga
Este es otro excelente complemento de galería de imágenes jQuery que le permite crear una galería de diseño de cuadrícula para sus imágenes y videos. Este complemento es totalmente receptivo y viene con una serie de características como compartir en redes sociales, desplazamiento infinito, animaciones css3, filtros y mucho más.
blueimp Gallery es una galería de imágenes y videos, carrusel y caja de luz habilitada para el tacto, receptiva y personalizable, optimizada para navegadores web móviles y de escritorio.
Cuenta con navegación por deslizamiento, mouse y teclado, efectos de transición, funcionalidad de presentación de diapositivas, soporte de pantalla completa y carga de contenido a pedido y se puede ampliar para mostrar tipos de contenido adicionales.
Demostración y descarga
nanoGALLERY es una galería de imágenes receptiva y habilitada para el tacto con un diseño justificado, en cascada y en cuadrícula. Es compatible con imágenes autohospedadas y la extracción de álbumes de fotos de Flickr, Picasa, Google+ y SmugMug.
Con navegación multinivel en álbumes, efectos de desplazamiento combinables en miniaturas, tamaños de miniaturas receptivos, diseños múltiples, presentación de diapositivas, pantalla completa, paginación, carga diferida de imágenes y mucho más.
Demostración y descarga
flipGallery es una galería de fotos gratuita con jQuery con elegantes transiciones entre miniaturas y ampliaciones de lightbox. Otras características incluyen transmisión dinámica de imágenes, paginación automática, recorte automático y superposición de imágenes transparentes.
Este complemento también tiene una versión premium que viene con algunas características ingeniosas y ciertamente incluye capacidad de respuesta.
Demostración y descarga
Fancy Gallery es un complemento de galería de imágenes jQuery receptivo que le permite mostrar sus imágenes y videos con un estilo elegante. Este complemento tiene muchas opciones de personalización y puede agregar álbumes, videos, imágenes y mucho más ilimitados.
El complemento viene con diferentes efectos de desplazamiento para las miniaturas y los títulos, que también se pueden ajustar. Puede elegir entre 7 temas de color predefinidos o simplemente crear fácilmente su propio tema de color.
Balanced Gallery es un complemento de jQuery que distribuye uniformemente las fotos en filas o columnas, aprovechando al máximo el espacio provisto. Las fotos se escalan en función del tamaño del elemento "contenedor" de forma predeterminada, lo que hace que Balanced Gallery sea una buena opción para sitios web receptivos.
Demostración y descarga
S Gallery utiliza la API de pantalla completa de HTML5 y se basa en gran medida en las bondades de las animaciones CSS3 y las transformaciones CSS3, por lo que solo funcionará en navegadores que admitan estas funciones.
Demostración y descarga
Este es un HTML | css | jQuery Grid con un cuadro de luz, puede especificar miniaturas para la cuadrícula y cuando hace clic en él para abrir el cuadro de luz, cargará la imagen normal, puede especificar el texto para los subtítulos y para el cuadro de luz. Además, no tiene que cargar todas las imágenes a la vez (por motivos de rendimiento), por lo que puede especificar la cantidad de imágenes que se cargarán cuando se cargue por primera vez y la cantidad de imágenes que se cargarán cuando haga clic en el botón "cargar más imágenes".
Responsive Thumbnail Gallery es un complemento de jQuery para crear galerías de imágenes que se escalan para adaptarse a su contenedor.
Demostración y descarga
SuperBox es un complemento de jQuery que lleva toda la 'imagen' y la 'caja de luz' un paso más allá, reduciendo la dependencia de carga de imágenes y JavaScript para hacer que la caja de luz sea cosa del pasado. Uso de atributos data-* de HTML5, diseños adaptables y jQuery.
SuperBox funciona de maravilla como una galería de imágenes estáticas, en la que puede hacer clic para revelar una versión completa de la imagen.
Demostración y descarga
La galería Ultimate Thumbnail es un complemento de galería de imágenes totalmente receptivo que viene en dos tipos de diseño (cuadrícula y línea, vertical y horizontal), con desplazamiento (jScrollPane) o botón de navegación. Los cuadros de miniaturas admiten cualquier elemento HTML dentro de ellos.
Las galerías de imágenes y los controles deslizantes son algunos de los formatos de jQuery más populares. Gracias a ellos, puede agregar la cantidad necesaria de contenido visual al sitio, mientras ahorra un espacio valioso.
Las galerías y los controles deslizantes hacen que la página esté menos concurrida, pero aun así le permiten agregar todas las imágenes que necesita para transmitir el mensaje. Serán especialmente útiles para las tiendas online.
En el artículo de hoy, reunimos las mejores galerías de imágenes y controles deslizantes de jQuery para usted.
Para instalarlos, simplemente agregue los complementos seleccionados a la sección principal de la página HTML junto con la biblioteca jQuery y configúrelos de acuerdo con la documentación (solo un par de líneas de código).
Elige cuál de estos elementos encajará perfectamente en tu proyecto.
Bootstrap Slider es un control deslizante de imágenes optimizado para dispositivos móviles gratuito con desplazamiento de tocar y deslizar. Se verá increíble en cualquier pantalla y en cualquier navegador. Puede cargar imágenes, videos, texto, miniaturas y botones a los controles deslizantes.
Product Preview Slider incorpora todo el potencial de jQuery, se adapta perfectamente a cualquier interfaz. También estará satisfecho con la calidad y la limpieza del código de este complemento.
Expandable Image Gallery es un complemento increíble que se convierte en una galería de pantalla completa con solo un clic. Se puede utilizar para la sección "Acerca de nosotros" o para ver la información del producto.
Fotorama es un complemento de galería jQuery receptivo que funciona tanto para navegadores de escritorio como móviles. Ofrece muchas opciones de navegación: miniaturas, desplazamiento, botones de avance y retroceso, presentaciones de diapositivas automáticas y marcadores.
Control deslizante inmersivo le permite crear una experiencia única de visualización de diapositivas similar al control deslizante de Google TV. Puede cambiar la imagen de fondo para que sea borrosa para mantener el enfoque en las fotos principales.
Leastjs es un complemento jQuery receptivo que lo ayudará a crear una galería increíble. Cuando pasas el cursor sobre la imagen, aparece el texto, cuando haces clic, la ventana se expande a pantalla completa.
Este plugin es perfecto para portafolios. Creará bloques de imágenes horizontales (verticales en pantallas pequeñas) a las que se anclará el contenido seleccionado.
Squeezebox Portfolio Template ofrece efectos de movimiento de cartera. Cuando pasa el cursor sobre la imagen principal (o bloque), aparecen elementos anclados.
Shuffle Images es un increíble complemento receptivo que te permite crear una galería con imágenes que cambian al pasar el mouse por encima.
El complemento Free jQuery Lightbox lo ayuda a mostrar una o más imágenes en una página. También se pueden ampliar y devolver a su tamaño original.
PgwSlider es un control deslizante de imagen minimalista. El código jQuery es pequeño, por lo que la velocidad de carga de este complemento lo sorprenderá gratamente.
La Galería de Polaroids Dispersas es un increíble control deslizante de diseño plano. Sus elementos se mueven aleatoriamente al cambiar de imagen, lo que se ve increíble.
Bouncy Content Filter es la solución perfecta para su cartera. Este complemento permite a los usuarios pasar rápidamente de una categoría a otra.
Simple jQuery Slider hace honor a su nombre. Este complemento combina elementos de JavaScript, HTML5 y CSS3. En la demostración, solo está disponible la carga de texto de manera predeterminada, pero con algunos cambios, también se puede agregar contenido visual.
Glide JS es un control deslizante jQuery simple, rápido y receptivo. Es fácil de configurar y el complemento no ocupará mucho espacio.
Este sorprendente control deslizante de carga de imágenes y texto de jQuery es perfecto para cualquier sitio web. Deleitará a los usuarios con un ligero efecto de paralaje y una apariencia de texto lento.
Hola queridos lectores a! En este tutorial te mostraré cómo crear un estilo minimalista, pero al mismo tiempo cómodo y funcional. galería de fotos jQuery, o una galería de imágenes, como quieras. La galería tiene la capacidad de crear categorías, seguido de filtrado. También es posible ejecutar una presentación de diapositivas. La galería funciona en todos los navegadores, por lo que no habrá problemas de adaptación.
Se utilizarán dos bibliotecas gratuitas para crear esta galería: arena movediza y Linda foto. Simplifican enormemente la creación de la galería. Como siempre, puede ver el resultado del trabajo en la página de demostración, así como descargar el archivo de la galería de trabajo y todos los archivos fuente. Lo único negativo, si se me permite decirlo, es la creación manual de miniaturas para imágenes grandes. Para todo lo demás, este galería digno de atención. Tanto como !
Primero, analicemos el panel con la lista de categorías, esta es una lista con viñetas ul . Además, cada elemento de la lista debe tener un nombre de clase único.
1 |
Como se mencionó anteriormente, los elementos de la lista son las imágenes de la galería. Cada elemento de la lista incluye componentes. Esta es la imagen en sí, o más bien su miniatura, así como una descripción. La miniatura es un enlace a la imagen principal. Se requiere el atributo rel para llamar al javascript y abrir la imagen principal.
No se olvide también de 2 cosas importantes, el elemento de la lista li debe tener un atributo de identificación de datos único. El atributo de tipo de datos contiene la clase de categoría, cuya lista describí anteriormente. Todo parece ser sobre el marcado.
No me centraré en los estilos, ya que usamos una biblioteca preparada Linda foto, que se encarga de aumentar la imagen, y hay mucho código css. Sin embargo, vale la pena señalar que hay 5 opciones de diseño para la imagen ampliada, aunque lo ideal es solo 3, ya que en dos opciones solo se elimina el redondeo.
Por lo tanto, mostraré solo estilos CSS para miniaturas y la lista de categorías.
1 | Cartera-categoría (margen inferior: 30px;) |
En principio, todo debe quedar claro con los estilos. Para que las categorías se alineen, la propiedad de visualización se establece en línea. Para darle a la imagen un efecto de trazo, se establece el color de fondo (blanco) y un relleno de 10 píxeles. Los tamaños de los elementos de la lista se establecen en .portfolio-area li .
Y finalmente, lo más importante, en aras de lo cual toda la lección. Este es el código jQuery. Comencemos por filtrar las imágenes por categoría.
1 | // Selecciona todos los elementos secundarios del área de cartera y escribe en una variable $(".portfolio-categli" ) .click (función (e) ( var filterClass= $(this ) .attr ("clase") .split (" " ) .slice (- 1 ) [ 0 ] ; if (clasefiltro == "todos" ) ( Foto de caja de luz (); |
Usando el método clone() y un selector, seleccionamos todos los elementos secundarios de .portfolio-area y los escribimos en la variable $data. A continuación, rastreamos un clic en una de las categorías, el elemento li de la lista con la clase .portfolio-categ. Hacemos que todas las categorías estén inactivas eliminando removeClass("active"), si esto no se hace, con el tiempo todas las categorías estarán activas y el filtrado se detendrá.
Dado que hacemos clic en el elemento de la lista, este selector contiene el elemento de la lista, es decir, li , tomamos el valor del atributo de clase y usamos el método de división para dividir el nombre de la clase en varias partes, el límite es un espacio (es decir, si la clase estaba "totalmente activa", luego de dividirla obtenemos una matriz de "todas" y "activas"). Y luego, utilizando el método de corte, seleccionamos el primer elemento de la matriz (en nuestro caso, "todos") y escribimos el resultado resultante en la variable filterClass. Si no había espacio, entonces el nombre de la clase no cambiará.
A continuación, comprobamos si la cadena en la variable filterClass todos, luego, utilizando el método .find, seleccionamos todos los elementos con la clase portfolio-item2 de la matriz $data, que consideramos anteriormente. Los elementos seleccionados (y estos son todos los elementos de la lista, es decir, todas las imágenes) se colocan en la variable filteredData.
De lo contrario, si filterClass no es igual a todos, luego pondremos en la variable filterData no todos los elementos de la lista, sino solo aquellos cuyo atributo de tipo de datos coincida con la clase de categoría. En definitiva, elementos de una sola categoría.
Y finalmente, pasamos la variable resultante a la librería jquery arenas movedizas, que realiza el filtrado de imágenes. Se trata de filtrar.
Ahora, con respecto al zoom de la imagen en la ventana emergente. Todo es mucho más simple aquí.
1 | jQuery("a") .foto bonita (( |
Realiza un seguimiento de un clic en un enlace cuyo atributo rel comienza con prettyPhoto . Entonces entra en juego la biblioteca. linda foto, y la imagen se agranda milagrosamente. Por cierto, también pasamos varios parámetros. Como la velocidad de la animación es rápida, el retraso en la presentación de diapositivas es de 5 segundos, el tema de Facebook (hay 5 en total, están en la carpeta de imágenes / prettyPhoto), y también prohibimos mostrar el nombre de la imagen y aumentar la imagen al pasar el mouse. Documentación completa para linda foto puede ser encontrado
Para mantenerse actualizado con los últimos artículos y lecciones, suscríbase a
