Galería de la cartera de Jquery. Galería como portafolio

Durante mucho tiempo elegí un tema para el tema de hoy. Como resultado, noté que aún no hemos hecho selecciones con galerías de imágenes... En mi opinión gran tema, porque galerías están presentes en muchos sitios. Para ser honesto, no todos son muy atractivos. Considerando las tendencias de desarrollo actuales jquery, html5 y así sucesivamente, pensé que las soluciones ya deberían ser mucho más atractivas que las que he encontrado antes. Entonces. Después de pasar un día, logré encontrar una gran cantidad de guiones. De toda esta montaña, decidí seleccionar solo, porque me encanta, como ya habrás notado en publicaciones anteriores.
Galería de imágenes aplicable no solo en el caso con álbumes de fotos... El guión se puede utilizar, creo que será incluso más correcto, ya que portafolio para fotógrafos, diseñadores etc. Efectos de jquery ayudará a captar la atención de los visitantes y simplemente agregará elegancia a su sitio web.
Entonces. Para tu colección de atención complemento jquery de galerías de imágenes para el sitio.
No olvides comentar y recordar, para no perder esta colección, puedes agregarla a tus favoritos haciendo clic en la estrella al pie del artículo.

FOTOBOX

Galería de imágenes gratuita, liviana y receptiva, en el que todos los efectos, las transiciones se realizan utilizando css3. Ideal para crear un sitio web de fotografía.

Galería S

Atractivo Complemento de galería de imágenes de jquery... La animación funciona con css3.

DIAMONDS.JS

Original complemento para crear una galería de imágenes... Las miniaturas tienen la forma de diamante, que en este momento muy popular. Este formulario se realiza utilizando css3. El único inconveniente de esta galería es la ausencia de una caja de luz, que abriría una foto en tamaño completo. Es decir, debes atornillar el complemento de caja de luz con cangrejos. Este script genera una cuadrícula de imágenes adaptativa en forma de diamante.

Superbox

Galería de imágenes moderna usando Jquery, css3 y html5... Todos estamos acostumbrados al hecho de que cuando hace clic en la vista previa, la imagen completa se abre en una caja de luz (ventana emergente). Los desarrolladores de este complemento decidieron que la caja de luz ya estaba desactualizada. Las imágenes de esta galería se abren debajo de la vista previa. Vea la demostración y compruebe que esta solución parece mucho más moderna.
|

Galería de atenuación diagonal suave

Una moderna galería de imágenes en la que las vistas previas se distribuyen en todo el espacio de la pantalla... El script puede escanear una carpeta con una foto en el servidor, es decir, no es necesario que inserte cada imagen por separado. Basta con cargar imágenes en una carpeta del servidor y especificar la ruta al directorio en la configuración. Entonces el guión hará todo por sí mismo.

Galería Gamma

Una galería de imágenes elegante, liviana y receptiva con una cuadrícula de estilo Pinterest que ahora es muy popular. El script funciona bien para ambos computadoras estacionarias y en dispositivos móviles Oh con cualquier resolución de pantalla. Una gran solución para crear una cartera de diseñadores web.

CUADRÍCULA EN MINIATURA CON VISTA PREVIA EXPANDIBLE

El complemento es cuadrícula de imagen sensible... Al hacer clic a continuación, se muestra una foto más grande y una descripción. Bueno para crear un portafolio.

jGallery

jGallery es pantalla completa, galería de imágenes receptiva... Los efectos, las transiciones e incluso el estilo se pueden personalizar fácilmente.

Glisse.js

Complemento de galería de imágenes simple pero muy efectivo. Esta es exactamente la solución cuando necesita crear un álbum de fotos. El complemento es compatible con álbumes y tiene un efecto de volteo muy bueno.

Flujo de mosaico

Simple, receptivo galería de imágenes con una cuadrícula al estilo de Pinterest.

Galereya

Otra galería elegante con una cuadrícula estilo Pinterest filtrada por categoría. Funciona en navegadores: Chrome, Safari, Firefox, Opera, IE7 +, navegador Android, móvil Chrome, móvil Firefox.

menos.js

Excelente galería gratis imagenes usando JQUERY, 5 y CSS3. Ella tiene un muy atractivo apariencia y seguramente llamará la atención de sus visitantes.

flipLightBox

Una sencilla galería de imágenes. Al hacer clic en la vista previa, la imagen completa se abre en la caja de luz.

galería blueimp

Galería flexible. Capaz de mostrar en ventana modal no solo imágenes sino también video... Funciona muy bien en dispositivos táctiles. Es fácil de personalizar y es posible ampliar la funcionalidad con complementos adicionales (consulte el siguiente complemento).

Compilado de manera competente y diseñado visualmente, en nuestro caso, es página separada, es un elemento importante del sitio o blog personal, de cualquier especialista que haya alcanzado un cierto nivel de competencia en sus actividades profesionales.
Una página de portafolio es una especie de informe, o un resumen visual, con la ayuda del cual puede demostrar visualmente a los lectores y visitantes del sitio / blog un conjunto de los trabajos terminados más exitosos, ya sean fotografías, artículos, publicaciones, elementos de diseño, etc.
No tengo una página de este tipo y, por mi parte, esta es una omisión molesta que debe corregirse lo antes posible, en la que estoy trabajando en este momento.
En las vastas extensiones red global, puede ser encontrado gran cantidad plantillas listas para usar páginas para organizar su portafolio, y la variedad de dichas páginas es realmente impresionante. Por lo tanto, aquellos que están en apuros para profundizar en todas las complejidades del diseño y desarrollo web siempre podrán encontrar una opción adecuada para ellos. Bueno, para aquellos que están sufriendo conocimientos en la construcción de sitios, les propongo analizar un ejemplo. diseño adaptable, una página de portafolio simple, con filtrado de obra terminada por categoría, terminada, diluida con un atractivo efecto de transición, con elementos de animación.

El diseño de la página, javascript ejecutable y algunos elementos de diseño, fueron dados por el maravilloso diseñador y desarrollador web Kevin Liew (queness.com). Al elegir la solución óptima, fue importante para mí que la simplicidad de ejecución, la funcionalidad del complemento jQuery, el funcionamiento correcto en todos los navegadores modernos y, dada la creciente popularidad del uso de varios dispositivos móviles para navegar por Internet, la adaptabilidad del diseño de la página futura. Sin lujos, campanas y silbidos de diseñador o complementos pesados.

El diseño básico tiene dos elementos principales. interfaz de usuario lo que tenemos que construir es la navegación a través de las pestañas para filtrar las categorías de las obras presentadas, y la propia cuadrícula de miniaturas con el efecto de una leyenda emergente al pasar el mouse.
Para empezar, para que todo funcione al final, necesitará jQuery al menos la versión 1.7.0. Si aún no lo ha conectado, agregue línea siguiente antes de la etiqueta :

Ejecute el complemento MixItUp, pegue este código después de los archivos anteriores:

< script type= "text/javascript" >$ (function () (var filterList = (init: function () ($ ("# portfoliolist"). mixitup ((targetSelector: ".portfolio", filterSelector: ".filter", efectos: ["fade"], suavizado : "snap", // llama al efecto de desplazamiento enMixEnd: filterList. hoverEffect ()));), hoverEffect: function () ($ ("# portfoliolist .portfolio"). hover (function () ($ (this). find (". label"). stop (). animate ((bottom: 0), 200, "easyOutQuad"); $ (this). find ("img"). stop (). animate ((top: - 30 ), 500, "easyOutQuad");), function () ($ (this). Find (". Label"). Stop (). Animate ((abajo: - 40), 200, "easyInQuad"); $ ( this). find ("img"). stop (). animate ((arriba: 0), 300, "easyOutQuad");));)); filterList. init ();));

Considere por separado todas las opciones de complementos, no tiene sentido, el valor predeterminado es bonito la mejor opción... Bueno, si realmente inserta a alguien para que experimente con parámetros, por favor, todo está en su poder.

Para formar el diseño de la página y la apariencia de los elementos, conecte un par de archivos al documento . , uno para los estilos base, llamémoslo por ejemplo: layout.css y otro pequeño archivo CSS normalize.css, para una mejor coherencia entre los navegadores en el diseño estándar de elementos:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Ahora, solucionemos todo en orden, si es posible sin agua innecesaria, de una manera accesible y comprensible, en nuestro idioma nativo y sufrido.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Todo < li>< span class = "filter" data- filter= "app" >Aplicaciones < li>< span class = "filter" data- filter= "card" >Cartas de negocios < li>< span class = "filter" data- filter= "icon" >Iconos < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >diseño web

• Todo
• Aplicaciones
• Cartas de negocios
• Iconos
• Logo
• diseño web

En la barra de navegación, colocamos la lista completa de trabajos, dividida en categorías. Necesitamos asociar cada categoría de cartera a través del atributo data-cat con uno u otro elemento en la barra de navegación de acuerdo con el valor en el atributo data-filter. Al hacer coincidir los valores de data-filter con data-cat, los elementos de la cartera se filtrarán por categoría.
Además, agregaremos a la miniatura, oculta por el momento, un pequeño panel con el nombre de la obra y el título de la categoría, que aparece solo cuando pasas el cursor sobre la imagen. Y para que sea más fácil dar forma a la apariencia de toda esta estructura en CSS, escribiremos las clases correspondientes a los elementos:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Hospedaje por Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Tenga en cuenta que puede agregar enlaces a la imagen o directamente a la firma para que el usuario pueda contemplar en su totalidad todas sus obras.

CSS

Ahora, tranquilamente, pasemos a lo más interesante, a la formación en CSS de los estilos generales de la interfaz de usuario de nuestra página de portafolio y su versión adaptativa. En el artículo indicaré solo los valores básicos (predeterminados), es decir, sin imágenes de fondo y fuentes conectadas, todo esto, quién lo necesita, se puede ver en la demostración o encontrar en el archivo con las fuentes.

.contenedor (posición: relativa; ancho: 960px; margen: 0 automático; / * Podrá ver la cadena de transiciones cuando se cambie el tamaño de la ventana del navegador * /-webkit-transición: facilidad de todos los 1; -moz-transición: todos los 1 se facilitan; -o-transición: facilidad de todos los 1; transición: todos los unos se facilitan; ) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color : # 666; / * agrega algo de sombra para el texto * / sombra de texto: 1px 1px #FFFFFF; cursor: puntero; ) / * cambiar el fondo de la categoría al pasar el mouse * /#filtros li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * fondo del elemento de categoría activo * /#filtros li span.active (fondo: rgb (62, 151, 221); texto-sombra: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; ancho: 23%; margen: 1%; display: none; float: left; overflow: hidden;) .portfolio-wrapper ( desbordamiento: oculto; posición: relativo! importante; fondo: # 666; cursor: puntero;) .portfolio img (ancho máximo: 100%; posición: relativo;) / * las firmas están ocultas por defecto * /.portfolio .label (posición: absoluta; ancho: 100%; alto: 40px; parte inferior: -40px;) .portfolio .label-bg (fondo: rgb (62, 151, 221); ancho: 100%; alto: 100 %; posición: absoluta; arriba: 0; izquierda: 0;) .portfolio .label-text (color: #fff; posición: relativa; z-index: 500; padding: 5px 8px;) .portfolio .text-category ( pantalla: bloque; tamaño de fuente: 9px;)

Contenedor (posición: relativa; ancho: 960px; margen: 0 automático; / * Podrá ver la cadena de transiciones cuando se cambie el tamaño de la ventana del navegador * / -webkit-transición: todos los 1s facilidad; -moz-transición: todos 1s facilidad; -o- transición: todos 1s facilidad; transición: todos los 1s facilidad;) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color: # 666; / * agregar algo de sombra para el texto * / text-shadow: 1px 1px #FFFFFF; cursor: puntero;) / * cambiar el fondo de categoría al pasar el mouse * / #filtros li span: hover (fondo: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * fondo del elemento de categoría activo * / #filters li span.active (fondo: rgb (62, 151, 221); texto-sombra: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing : border-box; -o-box- sizing: border-box; ancho: 23%; margen: 1%; display: none; float: left; overflow: hidden;) .po rtfolio-wrapper (desbordamiento: oculto; posición: relativa! importante; fondo: # 666; cursor: puntero; ) .portfolio img (ancho máximo: 100%; posición: relativa;) / * los subtítulos están ocultos por defecto * / .portfolio .label (posición: absoluta; ancho: 100%; alto: 40px; inferior: -40px;) .portfolio .label-bg (fondo: rgb (62, 151, 221); ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0;) .portfolio .label-text (color: # fff; posición: relativa; índice z: 500; relleno: 5px 8px;) .portfolio .text-category (display: block; font-size: 9px;)

En la segunda parte, justo en la misma hoja de estilo, utilizando algunas consultas de medios, crearemos las secciones CSS alternativas. Para que el diseño de nuestra página aparezca correctamente en las pantallas de varios dispositivos móviles, agreguemos reglas CSS alternativas para diferentes pantallas en estas secciones. Por lo tanto, podemos anular fácilmente cualquier regla establecida anteriormente en nuestra tabla CSS para navegadores comunes y lograr la adaptabilidad deseada.

/ * Tableta * / @media solo pantalla y (ancho mínimo: 768px) y (ancho máximo: 959px) (.container (ancho: 768px;)) / * Móvil - Nota: Diseño para 320px de ancho * /@media solo pantalla y (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Móvil - Nota: Diseño para 480px de ancho * /@media solo pantalla y (ancho mínimo: 480 px) y (ancho máximo: 767 px) (.container (ancho: 70%;))

/ * Tablet * / @media solo pantalla y (min-width: 768px) y (max-width: 959px) (.container (width: 768px;)) / * Mobile - Nota: Diseño para 320px de ancho * / @media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * / @media solo pantalla y (ancho mínimo: 480px) y (ancho máximo: 767px) (.container (ancho: 70%;))

Eso es todo. Nuestra maravillosa página bajo el amplio título "Portafolio" está lista, solo queda llenarla con nuestras obras no menos maravillosas y sobresalientes, y mostrarla al mundo entero. Aún puedes estar orgulloso de ti mismo de una manera tranquila y modesta. Lo principal es no exagerar en este asunto.
Mire nuevamente el ejemplo y, si es necesario, tome el código fuente, en su tiempo libre, en un ambiente hogareño tranquilo, puede llevar este trabajo a la perfección.

Al crear la lección, se utilizó el siguiente material :. El original, impecablemente limpio, recién sacado de la pluma del autor, la página del portafolio está en el mismo lugar.

¡Mucha suerte a todos y con beneficios para el organismo, para pasar el resto del corto verano!

En este tutorial escribiremos un hermoso portafolio, con usando jQuery, CSS3 y el complemento Timeline. Timeline es un complemento de jquery que se especializa en mostrar la línea de tiempo de los eventos. En esta cartera, puede insertar diferentes tipos datos de medios: tweets, videos, mapas, imágenes, registros, y luego organícelos de acuerdo con la fecha. Si trabajas en el diseño, obtienes un hermoso portafolio que reflejará tus intereses y trabajo.

HTML

De forma predeterminada, el complemento Timeline contiene una combinación de colores claros. Es muy conveniente y necesario en la mayoría de los casos. Aunque, para nuestro portafolio, los diseños oscuros son más elegantes. Por tanto, lo optimizaremos de la forma que nos guste.

Primero, echemos un vistazo al marcado HTML básico de la página:

índice.html

En la sección principal, tenemos los estilos de complementos: timeline.css y styles.css, que contendrán nuestras decisiones de diseño. Al final de la página, incluimos la biblioteca jQuery, el complemento de línea de tiempo y scripts.js que inicializarán el complemento.

Cuando llamamos al complemento, encuentra un bloque DIV con ID = línea de tiempo. Monta el marcado html dentro del bloque, después de lo cual la página se convierte en lo siguiente: