Galeria en jquery para portafolio. Una base de datos constantemente actualizada de complementos jQuery para galerías de fotos, videos y medios. Herramientas para crear bellas imágenes usando filtros CSS. Complemento Mootools "CwComplete"

Hoy vamos a ver el complemento Flipping Gallery jQuery, que le permite crear galerías de imágenes geniales con transiciones muy creativas. En el ejemplo, hay 5 tipos de transiciones usando este complemento. El complemento es realmente muy fácil de usar, por lo que cualquiera puede trabajar completamente con él.

Un ejemplo se puede ver aquí:

Descargar

Veremos más de cerca cómo crear el menú desde la demostración 2 cuando el menú aparezca en la parte superior izquierda.

parte HTML

Primero debe incluir la biblioteca jQuery, que puede descargar y el complemento Flipping Gallery, entre las etiquetas :

1 2 3 4 5 6

<cabeza > ... <"http://code.jquery.com/jquery-1.9.1.js"> <tipo de script="texto/javascript" src= "http://code.jquery.com/jquery.flipping_gallery.js"> ... </cabeza>

Luego ordenamos las imágenes. Puedes añadir tantas imágenes como quieras:

1 2 3 4 5 6 7 8

<clase div="gallery"> <href="#"> <href="#"> <href="#"> <href="#"> <href="#"> ... </div>

Y para agregar una descripción para las imágenes (como en la demostración 4 y 5) necesita usar el atributo título de datos:

1 2 3 4 5 6 7 8

<clase div="gallery"> <a href = "#" título de datos = "Muy" > <a href = "#" título de datos = "genial" > <a href = "#" data-caption= "galería" > <a href = "#" título de datos = "usando" > <a href="#" título de datos="Volteando"> ... </div>

js parte

1 2 3 4 5 6 7 8 9

$(".gallery" ) .flipping_gallery (( dirección: "adelante", selector: "> a", espaciado: 10, showMaximum: 15, enableScroll: true, flipDirection: "bottom", reproducción automática: 500 ) );

Veamos qué significa cada método:

• dirección- un método responsable de cómo aparecerán las imágenes. Si "hacia adelante", la imagen del principio se colocará al final, si está "hacia atrás", viceversa. El valor predeterminado es "adelante".
• selector- el selector por el que seleccionamos imágenes, se puede cambiar a voluntad.
• espaciado— establece la sangría entre las imágenes en perspectiva.
• Mostrar Máximo- establece el número de imágenes que son visibles para el usuario. Puede usar al menos 100 imágenes, pero solo se mostrarán las primeras 15, lo cual es muy conveniente y no carga el navegador.
• Habilitar Desplazamiento- Puede ver imágenes usando la rueda del mouse.
• flipDirection- determina dónde se deslizará la imagen: "izquierda" - a la izquierda, "derecha" - a la derecha, "arriba" - arriba y "abajo" - abajo. Por defecto, se desliza hacia abajo.
• auto-reproducción- Galería de ejecución automática. Especificado en milisegundos, es decir ¿Cuánto tardarán en cambiar las imágenes?

Conclusión

Ahora tiene una gran galería para usar al publicar sus fotos.

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. jQuery: Arenas movedizas 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.

FUENTES

marcado HTML

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.

• Categorías:


• Todos


• Categoría 1


• Categoría 2


• Categoría 3


• Categoría 4

nombre de la imagen

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.

estilos CSS

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.

Categoría de cartera ( margen inferior: 30px; )
.cartera-categoría li(
pantalla: en línea;
margen derecho: 10px;
}
.imagen-bloque(
bloqueo de pantalla;
posición: relativa;
}
.imagen-bloque img(
borde: 1px sólido #d5d5d5;
borde-radio: 4px 4px 4px 4px;
fondo:#FFFFFF;
relleno: 10px;
}
.image-block img: hover (
borde: 1px sólido #A9CF54;
caja-sombra:0 0 5px #A9CF54;
}
.cartera-área li (
flotador izquierdo;
margen: 0 12px 20px 0;
desbordamiento: oculto;
ancho: 245px
relleno: 5px;
}
.home-portfolio-text ( margen superior: 10px; )
li.active a (decoración de texto: subrayado;)

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 .

jQuery

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.

// Selecciona todos los elementos secundarios del área de cartera y escribe en una variable
var $datos = $(".portfolio-area").clone();

$(".cartera-categoría li").click(función(e) (
$(".filtro li").removeClass("activo");

Var filterClass=$(this).attr("clase").split(" ").slice(-1);

Si (clasefiltro == "todos") (
var $filteredData = $data.find(".portfolio-item2");
) más (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").arenas movedizas($filteredData, (
duración: 600
ajustar altura: "auto"
), función() (

Foto de caja de luz();
});
$(esto).addClass("activo");
falso retorno;
});

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í.

jQuery("a").foto bonita((
animationSpeed: "rápido",
presentación de diapositivas: 5000
tema: "facebook",
mostrar_título: falso
overlay_gallery: falso
});

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.

Long eligió el tema para el tema de hoy. Como resultado, noté que aún no hemos hecho selecciones con galerías de imágenes. Creo que es un gran tema porque galerias presentes en muchos sitios. Francamente, ninguno de ellos es muy atractivo. Teniendo en cuenta las tendencias de desarrollo actuales jquery, html5 etc. Pensé, porque ya debería haber soluciones mucho más atractivas que las que conocí antes. Asi que. Después de pasar un día, logramos encontrar una gran cantidad de guiones. De toda esta montaña, decidí seleccionar solo, porque me encanta, como ya habrán notado en publicaciones anteriores.
Galería de imágenes se aplica no solo a con álbumes de fotos. Se puede usar el script, creo que será aún más correcto, como portafolio para fotógrafos, diseñadores etc. efectos jquery ayudará a atraer la atención de los visitantes y simplemente agregará elegancia a su sitio.
Asi que. Colección para su atención Complementos de la galería de imágenes jquery para el sitio web.
No olvides comentar y recuerda, para no perderte esta colección, puedes agregarla a tus favoritos haciendo clic en la estrella al final del artículo.

CAJA DE FOTOS

gratis, fácil, galería adaptativa imágenes, en el que todos los efectos, las transiciones se realizan mediante css3. Ideal para crear un sitio web de cartera para un fotógrafo.

Galería S

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

DIAMANTES.JS

Original Complemento de galería de imágenes. Las miniaturas tienen forma rombo que es muy popular en este momento. Este formulario está hecho con css3. Lo único negativo de esta galería es la falta de una caja de luz que abriera la foto en tamaño completo. Es decir, debe sujetar el complemento de la caja de luz con cangrejos de río. Este script genera una cuadrícula de imagen en forma de diamante adaptable.

supercaja

Galería de imágenes modernas usando jquery, css3 y html5. Todos estamos acostumbrados al hecho de que cuando haces 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 ha dejado de ser útil. Las imágenes de esta galería se abren debajo de la vista previa. Mire la demostración y vea cómo esta solución se ve mucho más moderna.
|

Galería de fundidos diagonales suaves

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

Galería Gama

Galería de imágenes elegante, liviana y receptiva con una cuadrícula al estilo de Pinterest que ahora es muy popular. El script funciona bien como computadoras estacionarias, pronto dispositivos móviles con cualquier resolución de pantalla. Una gran solución para crear un portafolio de diseñador web.

CUADRICULA DE MINIATURAS CON VISTA PREVIA EXPANDIBLE

el complemento es cuadrícula de imagen adaptativa. Al hacer clic a continuación se mostrará una foto más grande y una descripción. Bueno para la creación de cartera.

jGalería

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

Glisse.js

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

Flujo de mosaico

Sencillo, adaptable galería de imágenes con cuadrícula estilo Pinterest.

Galería

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

menos.js

Excelente galería de imágenes gratis utilizando JQUERY, 5 y CSS3. ella tiene un muy atractivo apariencia y seguramente captará la atención de sus visitantes.

FlipLightBox

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

Galería de blueimp

Galería flexible. Capaz de mostrar en la ventana modal no solo imágenes, sino también video. Funciona muy bien en dispositivos táctiles. Fácilmente personalizable y es posible ampliar la funcionalidad con complementos adicionales (Ver siguiente complemento).

¡Hola a todos! Hoy vamos a hablar sobre posiblemente la mejor galería de fotos, video y control deslizante de fotos gratis, hablemos de "marco de fotos". A pesar de que el guión no ha sido compatible durante 2 años y el autor cambió a proyecto similar funciona muy bien y sigue agradando a la vista.

Principales ventajas (+)

1. Sencillez instalación, configuración y uso. Además de jQuery, necesitarás incluir solo 2 archivos, y para mostrar la galería, debe especificar solo enlaces a imágenes allí.
2. Afecta ligeramente velocidad carga del sitio.
3. adaptabilidad. Su galería se ve bien en su teléfono, computadora portátil e incluso en la pantalla de su televisor.
4. Abundancia de ajustes y funciones, conectado por separado, a través de los atributos de las etiquetas HTML.
5. Soporte para dispositivos táctiles.
6. Apoyo video.
7. Posibilidad carga lenta fotos.
8. Y muchas, muchas otras cosas que atraerán al usuario sofisticado.

Menos (-)

1. Falta de soporte al usuario. La probabilidad de que su problema sea considerado o corregido es casi cero. Sí, es malo, pero no fatal.

La primera opción para conectar Fotorama

Esta opción de conexión es la más fácil, pero no la mejor, debe usarse solo si necesita mostrar la galería en la mayoría de las páginas del sitio. La ventaja de esta opción es el uso de un CDN.

1. Comprobación de jQuery. Vaya al código fuente del sitio (atajo Ctrl + U) → intente encontrar algo como esta línea: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

   Para facilitar la búsqueda, use Ctrl + F . Si no hay una línea apreciada, deberá incluir jQuery. En WordPress, esto se puede hacer pegando el siguiente código en el archivo de funciones del tema (functions.php). De hecho, este script se usa en caso de conflictos entre diferentes versiones de jQuery y funciona de acuerdo con el siguiente esquema: elimina el jQuery registrado anteriormente, registra uno nuevo y genera el script. Las versiones actuales de la biblioteca jQuery se pueden encontrar aquí.

   Simplemente puede insertar esta línea entre y :

   <secuencia de comandos src= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> guion >
2. Incluimos fotorama.css y fotorama.js. Pegue el siguiente código entre las etiquetas y, en WordPress esto se hace en el archivo de encabezado del tema (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="hoja de estilo">
3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
2. Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; ) add_shortcode("foto","sd");
4. Ahora, al escribir un artículo, ingrese el código abreviado al final

Creación directa de la galería.

La galería se representa en código HTML usando envase