Crea tu propia presentación de diapositivas HTML gratuita. Presentación de diapositivas con fondo de pantalla completa en CSS3

¡Al desactivar el uso de JavaScript, no podrás ver ejemplos interesantes de presentaciones de diapositivas!

Presentación de diapositivas para el sitio.

Todo webmaster debe poder crear y agregar una presentación de diapositivas a un sitio web. El uso de controles deslizantes es extremadamente popular y se pueden encontrar en casi cualquier recurso moderno.

¡Y esto no es una coincidencia!

**Nota. A diferencia de otras páginas de la sección jQuery, escribí los scripts necesarios directamente en el código HTML de esta página.
Además, lo cual es muy importante(!), me funcionan desde una versión de jQuery diferente, posterior a la que uso aquí.

Si uso la versión jquery v.1.10.1.min allí, entonces v.1.8.3.min aquí

Sin embargo, más sobre esto y todo lo demás, en orden, más adelante.

Preparando una presentación de diapositivas

El trabajo de creación e instalación de una presentación de diapositivas en un sitio web suele constar de 4 etapas principales.

Preparando imágenes para el control deslizante

1. Fotografías seleccionadas. Lo principal es que deben ser talla única. Debes medirlos con cuidado.
En este caso, tomé fotografías ya preparadas de los materiales adicionales adjuntos al curso de formación. ¿Cuál? Sobre esto aquí: "Enlaces" (se abre en una ventana nueva).

2. Dibujé una imagen gráfica de un control deslizante al estilo de "TELEVISOR". Puede que no sea original, pero es muy conveniente.
Lo principal es el tamaño del área de visualización que necesitas. un poquito más en ancho y alto que los dibujos preparados.

Crear un marco HTML+CSS para una presentación de diapositivas

Las imágenes están escritas en código HTML. exactamente a ese lugar, donde se mostrarán en el futuro. Luego, los guiones se pueden escribir en cualquier lugar conveniente. Normalmente les dejo un espacio justo debajo de las imágenes. La estructura es más lógica.

Coloqué las imágenes dentro de la etiqueta p, para lo cual configuré el ancho y el alto en los estilos CSS y especifiqué su clase="slideshow" . Y el párrafo en sí con ellos se colocó dentro de una etiqueta div común, en cuyo fondo colgué una imagen gráfica preparada del control deslizante ( TELEVISOR*). Le dieron class="slider_fon" .
Además, solo para el, para descargar la página, conecté una hoja de estilo externa e hice todo lo necesario para las imágenes. dentro del código HTML .

P.D.** El último paso NO es necesario en absoluto. Simplemente es más conveniente para mí. La estructura de la página de alguna manera parece más lógica.

En las reglas CSS especifiqué el tamaño de la ventana para las imágenes que luego aparecerán en el control deslizante. (ancho - alto). Naturalmente, todas las imágenes. debe ser del mismo tamaño.
Si lo desea, podría ampliar los parámetros CSS agregando, por ejemplo, marcos, fondo, relleno y otros elementos. Sin embargo, creo que esto sería innecesario.

Sin embargo, si desea hacer esto, indique las dimensiones GENERALES, es decir: imagen + TODAS las sangrías y bordes establecidos.

Conectando guiones

Recomiendo visitar la página de ayuda que creé mientras aprendía la tecnología jQuery. Realmente te ayudará a resolverlo.
Abrí el acceso público: "SELECCIÓN en jQuery" (se abre en una nueva ventana).

Como siempre, primero creé una carpeta js en el sitio. Luego descargué los scripts necesarios para la presentación de diapositivas (archivo) y los descomprimí en esta carpeta. Contenía dos archivos de script: jquery-1.8.3.min.js core y jquery.cycle.all.min.js plugin.

Por si acaso, también le agregué mi archivo de control myscripts11.js. Sin embargo, aquí no me resultó útil para iniciar y demostrar una presentación de diapositivas. A menos que haya verificado que la carpeta creada esté conectada correctamente.
Pero... ...déjalo así. Nunca se sabe lo que querré hacer en el futuro con los controles deslizantes colocados aquí. Hablando brevemente, "...nuestro tren blindado siempre está en una vía muerta".

Más. Dentro de la etiqueta... inserté líneas donde escribí las rutas a los scripts. Los tengo: , y al complemento: .
Comenté mi propio archivo de control ("de repuesto").

Y lo último -

Aquellos que visiten mi sitio con el intérprete de JavaScript desactivado en su navegador, por supuesto, no podrán ver la presentación de diapositivas.
Verán las imágenes tal como están escritas en el código HTML, es decir. en una columna, uno tras otro.
Les hice una línea de advertencia y la inserté en la etiqueta... .

¡Aquí tienes! La presentación de diapositivas ha sido creada. Sólo queda configurar sus parámetros: la velocidad de cambio de imágenes, formas de visualizarlas, etc.

Configuración de opciones de presentación de diapositivas

Como escribí arriba (en la nota**), escribí los scripts necesarios directamente en el código HTML de esta página.
En la presentación de diapositivas creada en mi sitio web, apliqué la configuración "por defecto".

En general, es fácil establecer tipos diferentes e interesantes de transiciones entre imágenes cambiando el javascript ubicado en el cuerpo de la página.
Por ejemplo, al cambiar la línea sync: false a sync: true en el script, puede eliminar el espacio al cambiar las imágenes.

¡Nota importante!
Las diferentes versiones de jQuery pueden entrar en conflicto entre sí si están en la misma página.
¡Asegúrese (!) de verificar que los complementos funcionen con la versión instalada de jQuery, ya que no todas las versiones son compatibles.

Ejemplo**
Otras páginas de la sección jQuery que utilizan la biblioteca tienen instalado jquery v.1.10.1.min. Entonces, es más moderno que la v.1.8.3.min, de la cual adecuadamente(!) Los controles deslizantes de presentación de diapositivas funcionan aquí.

Complemente jquery.cycle.all.min.js con él ¡¡¡NO FUNCIONA!!!
(verificado)

Sin embargo, no te enfades. ¡Todo está en tus manos!
En la sección "Útil" de mi sitio web (se abre en una nueva ventana) encontrará probado (!) un conjunto completo de scripts necesarios para crear una presentación de diapositivas en su sitio web. (¡GRATIS, por supuesto!)

Otros tipos de presentaciones de diapositivas

En esta subsección no describiré con tanto detalle todos los pasos para crear una presentación de diapositivas. Básicamente, son absolutamente iguales.
Aún más sencillo. No es necesario dibujar una imagen de fondo del control deslizante en Photoshop. Incluso separado No necesitarás una hoja de estilos CSS.

Si desea colocar diferentes opciones de presentación de diapositivas en uno página del sitio, como lo hice aquí ( vea abajo), especifique diferentes clases para cada opción en la línea de script $(" .presentación de diapositivas").ciclo((

P.D.* No olvides incluirlo en CSS Tamaños de ventana para cada clase., sin embargo, si utiliza una hoja de estilo. No lo necesitaba.

Mire primero los dibujos fijos, que, de manera similar, tomé del curso de capacitación (¿Cuál? Repito el enlace: “Enlaces”) y los publiqué aquí para comparar.

Aquí están. ¡Futuros participantes de la séptima presentación de diapositivas!
Mira su actuación a continuación.

Le mostraré varios tipos populares de controles deslizantes. Los inserté en la tabla general para facilitar su visualización.
A la izquierda está el nombre del efecto y una breve explicación, si es necesario. A la derecha hay un ejemplo.

1. Disolución ("desvanecimiento"): Similar al ejemplo principal con motocicletas.
2. Mezclar:
3. Zoom:
4. Gire a lo largo de los ejes ("cortinaX" o Y): Instalé "curtainX" aquí.
5. Contraer verticalmente (“girar hacia abajo”): Aquí se colapsa, pero puedes configurar otros tipos de transiciones: girar hacia arriba, izquierda, derecha.
6. Desplazamiento (“desplazarse hacia abajo”): Inclinación. Aquí lo instalé, pero además de esto puedes establecer: desplazamiento hacia arriba, izquierda, derecha.

La presentación de diapositivas de fotos HTML agregará fácilmente brillo a su página y atraerá la atención tanto de los visitantes como de los motores de búsqueda. Cincopa te ofrece algunas máscaras sorprendentes y rápidamente personalizables que te permitirán mostrar numerosas fotos o vídeos en un espacio relativamente pequeño y sin utilizar una cuota de servidor, gracias al alojamiento y la entrega gratuitos (cuyo paquete se puede actualizar pagando una tarifa). Todo el procedimiento de creación e inserción de una presentación de diapositivas HTML lleva unos minutos y es muy fácil de completar, incluso si no tienes conocimientos de programación.

El control deslizante de fotografías HTML de Cincopa es increíblemente eficiente, confiable y atractivo. Los requisitos técnicos son manejados automáticamente por el creador de presentaciones de diapositivas, y todo lo que realmente necesita hacer para crear una presentación de diapositivas HTML es simplemente cargar archivos multimedia de alta calidad. Estos archivos los podrás descargar desde cualquiera de tus dispositivos o desde redes sociales como Facebook o Instagram.

PRESENTACIÓN DE DIAPOSITIVAS HTML DE SKINS de Cincopa Cómo funciona

1 Elige una de nuestras increíbles máscaras

2 Sube tus archivos a la nube” Cincopa

3 Consigue un código simple y pégalo en tu sitio web

ELIJA UNA PRESENTACIÓN DE DIAPOSITIVAS HTML DE SKIN

Elija entre una presentación de diapositivas de máscaras compatibles con HTML y personalice configuraciones como el panel de control de ubicación, control de ubicación, vista Cooliris, reproducción aleatoria, reproducción automática, etc.; luego, vea la máscara en una ventana separada. Asegúrese de probar varias máscaras antes de tomar una decisión.

CARGAR ARCHIVOS MULTIMEDIA

Puedes descargar tantos archivos como quieras desde tu escritorio, dispositivos portátiles o directamente desde tu cámara web, así como desde cualquier fuente web externa. Organiza tus archivos en la nube” Cincopa; Cincopa se encarga de convertir tus fotos, cambiar el tamaño y otras adaptaciones. El diseño de la presentación de diapositivas HTML se puede cambiar más adelante desde cualquier dispositivo que posea.

INSERTAR EL CÓDIGO GENERADO

La sencilla interfaz paso a paso de Cincopa le pedirá que elija un método; Esto significa que si está ejecutando un sitio basado en HTML, debe seleccionar la opción "Presentación de diapositivas HTML". Copie la línea de código generada por la aplicación y péguela en cualquier lugar de su sitio.

¿Por qué utilizar el creador de presentaciones de diapositivas HTML de Cincopa?

Cincopa le ofrece paquetes de servicios y productos exclusivos y ricos en medios que han sido diseñados para responder a cualquier posible requisito que pueda tener desde un control deslizante de sitio web HTML. El creador de presentaciones de diapositivas tiene una interfaz sencilla paso a paso que lo guía a través del proceso de creación y administración, a través de software de alta gama y servidores dedicados que brindan un rendimiento confiable, fluido y rápido y un sistema de seguridad avanzado para garantizar que sus archivos estén completamente protegido.

Cincopa te permite tomar decisiones creativas, pero te libera de todos los problemas técnicos. Puede cargar una cantidad ilimitada de archivos desde prácticamente cualquier fuente y mostrar presentaciones de diapositivas HTML en cualquier cantidad de sitios y canales sociales.

PRINCIPALES CARACTERÍSTICAS DE LA PRESENTACIÓN DE DIAPOSITIVAS HTML:

Compatible con todos los principales navegadores

Escalabilidad total

Acceso remoto

Especies de Cooliris

sistema CDN

Agregue una cantidad ilimitada de archivos, ilimitados según la cuota de su servidor

muchas pieles

Conversiones automáticas de fotografías y cambio de tamaño

Permitir o denegar la descarga de sus archivos

Copias de seguridad e informes automáticos

SEO optimizado

Muchas opciones de personalización (tamaño, posición, reproducción aleatoria, rotación automática, etc.)

Fácil gestión mediante un sencillo asistente

Alojamiento y entrega gratuitos (hasta 400 MB de memoria y 200 MB de tráfico por mes)

En esta lección veremos un programa para crear presentaciones de diapositivas automáticamente utilizando tecnología HTML5.

Incluso si sus conocimientos de javascript, css y html no le permiten crear presentaciones de diapositivas usted mismo, puede hacerlo utilizando el programa Hislider. Puede descargarlo desde el enlace: Hislider.com. El sitio tiene disponible una versión gratuita y una de pago. Mostraré todas las acciones en la versión gratuita. Si te gusta el programa, puedes comprar su versión paga. Creé una presentación de diapositivas de prueba. Puedes verlo usando el enlace:

DescargarCómo crear tu primera presentación de diapositivas usando Hislider

Cuando instale y ejecute el programa, aparecerá una ventana del programa frente a usted, pidiéndole que comience a crear una presentación de diapositivas. Haga clic en el botón "Crear nuevo":

Especifique el ancho (ancho) y el alto (alto) requeridos de la presentación de diapositivas:

Entonces necesitas agregar imágenes. Esto se puede hacer haciendo clic en el enlace en el centro de la ventana o en el botón en la barra de botones:

Una vez que se agreguen las imágenes, el panel Transiciones se activará. Vaya a la pestaña "Transmisiones":

Y agrega las transiciones que te gusten:

Haga clic en "Aceptar" y accederá al editor de presentación de diapositivas. Hacemos los cambios necesarios. Hay tres botones en la parte superior:

El primer botón "ACTUALIZAR" es necesario para actualizar la presentación de diapositivas después de realizar cambios para poder ver estos cambios.

El segundo botón “VISTA PREVIA” es necesario para obtener una vista previa de la presentación de diapositivas en el navegador.

Y el último botón "PUBLICAR" se utiliza para crear una presentación de diapositivas.

Un programa bastante interesante. Especialmente si no tienes el tiempo o las habilidades, este programa reducirá el tiempo que lleva desarrollar un programa atractivo para tu sitio web. O puede crear un menú, luego editar el código que necesite y listo, su presentación de diapositivas está lista.

Hoy le mostraremos cómo crear una presentación de diapositivas a pantalla completa con un fondo usando solo código CSS. Usaremos varios efectos para las transiciones entre imágenes, y también haremos que aparezca el título mediante animación implementada en CSS.

Las imágenes fueron amablemente aportadas por Mark Sebastian () y se distribuyen bajo el Acuerdo de licencia genérica Creative Commons Attribution-ShareAlike 2.0.

Tenga en cuenta que este efecto sólo funcionará en navegadores equipados con .

Disposición

Aquí usaremos una lista desordenada para la presentación de diapositivas y también agregaremos un intervalo para cada imagen y una sección con un título:

• 
  Imagen 01
  
  relajación
  
  

Los intervalos serán elementos con una imagen de fondo configurada en la presentación de diapositivas.

código CSS

Comencemos con una lista desordenada. Se arreglará y lo extenderemos por toda la ventana gráfica. También usamos el pseudoelemento :after para colocar la textura en la parte superior de la imagen:

presentación de diapositivas cb,
.cb-presentación de diapositivas: después (
posición: fija;
ancho: 100%;
altura: 100%;
arriba: 0px;
izquierda: 0px;
índice z: 0;
}
.cb-presentación de diapositivas: después (
contenido: "";
fondo: URL transparente (../images/pattern.png) repetir arriba a la izquierda;
}
Usaremos una textura de puntos repetitivos, pero también puedes usar una gradación ligeramente transparente, por ejemplo, implementada usando CSS.

El Span que contiene la imagen de la presentación de diapositivas tendrá un posicionamiento absoluto y sus parámetros de ancho y alto se establecerán en 100%. Como tenemos algo de texto adicional dentro, haremos que su color sea un poco transparente ya que no necesitamos prestarle atención. El parámetro de tamaño de fondo se establecerá en cubrir; esto nos permitirá estar seguros de que la imagen de fondo cubra toda el área del elemento y, por lo tanto, la ventana gráfica. El nivel de densidad se establece en 0. A continuación cambiaremos este parámetro mediante animación:

Cb-presentación de diapositivas li span (
ancho: 100%;
altura: 100%;
posición: absoluta;
arriba: 0px;
izquierda: 0px;
color: transparente;
tamaño de fondo: portada;
posición de fondo: 50% 50%;
repetición de fondo: ninguna;
opacidad: 0;
índice z: 0;
animación: imageAnimation 36s lineal infinito 0s;
}
La animación de cada tramo durará 36 segundos y se ejecutará un número infinito de veces. Pero veamos los detalles un poco más adelante, pero por ahora diseñemos la sección con un encabezado:

Presentación de diapositivas cb li div (
índice z: 1000;
posición: absoluta;
abajo: 30px;
izquierda: 0px;
ancho: 100%;
alineación de texto: centro;
opacidad: 0;
color: #fff;
animación: titleAnimation 36s lineal infinito 0s;
}
.cb-presentación de diapositivas li div h3 (
familia de fuentes: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;
tamaño de fuente: 240px;
relleno: 0;
altura de línea: 200 px;
}
La animación de la sección del título también durará 36 segundos.

Ahora definiremos imágenes de fondo para todos los intervalos, así como un retraso en la animación para que cada imagen y título de la presentación aparezca 6 segundos después del punto anterior:

Cb-presentación de diapositivas li:nth-child(1) span (
imagen de fondo: URL(../images/1.jpg)
}
.cb-presentación de diapositivas li:nth-child(2) span (
imagen de fondo: url(../images/2.jpg);
retardo de animación: 6s;
}
.cb-presentación de diapositivas li:nth-child(3) span (
imagen de fondo: url(../images/3.jpg);
retardo de animación: 12 s;
}
.cb-presentación de diapositivas li:nth-child(4) span (
imagen de fondo: url(../images/4.jpg);
retardo de animación: 18 s;
}
.cb-presentación de diapositivas li:nth-child(5) span (
imagen de fondo: url(../images/5.jpg);
retardo de animación: 24 s;
}
.cb-presentación de diapositivas li:nth-child(6) span (
imagen de fondo: url(../images/6.jpg);
retardo de animación: 30 s;
}

Presentación de diapositivas cb li:nth-child(2) div (
retardo de animación: 6s;
}
.cb-presentación de diapositivas li:nth-child(3) div (
retardo de animación: 12 s;
}
.cb-presentación de diapositivas li:nth-child(4) div (
retardo de animación: 18 s;
}
.cb-presentación de diapositivas li:nth-child(5) div (
retardo de animación: 24 s;
}
.cb-presentación de diapositivas li:nth-child(6) div (
retardo de animación: 30 s;
}
Ahora pasemos a la animación de la presentación de diapositivas. Cada tramo tendrá una animación que tendrá una duración de 36 segundos. Durante estos 36 segundos cambiaremos el nivel de densidad de 0 a 1 (esto sucederá aproximadamente al 8% del progreso de la animación). Y luego este valor del nivel de densidad durará hasta el 17% del progreso. Al alcanzar el 25% de progreso, el nivel de densidad debería volver a bajar a 0 y permanecer así hasta el final.

¿Por qué exactamente estos valores? Solo queremos que cada imagen sea visible durante 6 segundos y sabemos que al final del bucle queremos que se muestre nuevamente la primera imagen. Sólo tenemos 6 imágenes, por lo que necesitaremos 36 segundos para todo el bucle. Ahora necesitamos distribuir los niveles de densidad en consecuencia. Sabiendo que nuestra segunda imagen comenzará a cambiar a los 6 segundos, necesitamos saber el porcentaje que tomará esta animación en el caso de la primera imagen. Dividimos 6 entre 36 y obtenemos 0,166... ​​lo que significa que nuestro umbral de fotogramas será del 16%. Ahora, como no queremos que la imagen desaparezca todo el tiempo, definimos el siguiente umbral, el intermedio, que será la mitad de lo que calculamos, es decir, el 8%. Este es el período en el que necesitamos mostrar una imagen completa, y debería comenzar a desvanecerse al 17% y la desaparición completa debería ocurrir al 25%.

@keyframes animación de imagen (
0% (opacidad: 0; función de sincronización de animación: fácil entrada;)
8% (opacidad: 1; función de sincronización de animación: salida gradual;)
17% (opacidad: 1)
25% (opacidad: 0)
100% (opacidad: 0)
}
Lo mismo hay que hacer con el título, sólo que hay que hacerlo desaparecer un poco más rápido. Por lo tanto, el nivel de densidad debería llegar a 0 ya con un 19% de progreso:

@keyframes títuloAnimación (
0% (opacidad: 0)
8% (opacidad: 1)
17% (opacidad: 1)
19% (opacidad: 0)
100% (opacidad: 0)
}
En cuanto a los navegadores sin soporte de animación, en este caso simplemente mostramos la última imagen de la presentación de diapositivas estableciendo el nivel de densidad de extensión en 1:

No-cssanimations .cb-slideshow li span(
opacidad: 1;
}
La clase no-cssanimations se agrega usando Modernizr.

Ahora también cuidemos el tamaño de fuente de los encabezados para aquellos momentos en los que el tamaño de la ventana gráfica será más pequeño. Usamos consultas de medios para hacer la fuente más pequeña a un ancho determinado:

@media pantalla y (ancho máximo: 1140px) (
.cb-slideshow li div h3 (tamaño de fuente: 140px)
}
@pantalla multimedia y (ancho máximo: 600 px) (
.cb-slideshow li div h3 (tamaño de fuente: 80px)
}
¡Y eso es todo con el desarrollo de una versión simplificada de la presentación de diapositivas! Ahora veamos cómo podemos mejorar las transiciones.

Ejemplo de animación alternativa

Ahora podemos jugar con algunas animaciones para mostrar la imagen y los títulos.

La siguiente animación implica ampliar la imagen y luego girarla ligeramente:

@keyframes animación de imagen (
0% {
opacidad: 0;
función de sincronización de animación: entrada fácil;
}
8% {
opacidad: 1;
transformar: escala (1,05);
función de sincronización de animación: relajación;
}
17% {
opacidad: 1;
}
25% {
opacidad: 0;
transformar: escala (1.1) rotar (3 grados);
}
100% (opacidad: 0)
}
El encabezado se moverá hacia la derecha (tendremos que cambiar la alineación del texto del encabezado hacia la derecha) y luego desaparecerá, moviéndose hacia la izquierda:

@keyframes títuloAnimación (
0% {
opacidad: 0;
transformar: traducirX(200px);
}
8% {
opacidad: 1;
transformar: traducirX(0px);
}
17% {
opacidad: 1;
transformar: traducirX(0px);
}
19% {
opacidad: 0;
transformar: traducirX(-400px);
}
25% (opacidad: 0)
100% (opacidad: 0)
}
¡No olvides que puede haber muchas opciones, lo principal es no tener miedo de experimentar!

Manifestación

Aquí puedes ver varias opciones para usar la animación.

Complemento para crear hermosos controles deslizantes: iView. Muchas configuraciones, navegación, temporizador, API, soporte para dispositivos táctiles, inserción de video y adaptabilidad.

04.03.2013 1 692

Complemento para crear una micro galería en un sitio web. Visualización automática, la posibilidad de agregar una descripción para cada imagen y un modo de desplazamiento circular, es decir. bucle.

01.02.2013 1 153

El complemento jQuery.popeye es una solución elegante y hermosa para mostrar una galería de imágenes sin salir de la página. Solo se muestra una foto en la página; cuando pasa el cursor, puede desplazarse o ampliar todas las imágenes de este conjunto. El complemento es fácil de instalar y configurar y fue desarrollado como una alternativa a los comúnmente utilizados lightbox2, fancybox o colorbox, que usan ventanas modales.

23.11.2012 7 286

Un excelente control deslizante jQuery adaptable: FlexSlider. Incluye la capacidad de navegar con viñetas (puntos), le permite usar miniaturas junto con la navegación, la capacidad de insertar un video como diapositiva, una opción de carrusel y el complemento también tiene una pequeña API.

12.09.2012 4 667

Mobilyslider es un complemento jQuery simple que pesa solo 5 KB, pero tiene un aspecto minimalista y elegante. Hay varias opciones adicionales, que incluyen habilitar/deshabilitar la navegación, flecha hacia adelante/atrás, presentación de diapositivas automática, seleccionar el tipo de transición, etc.

07.06.2012 1 403

Creemos una presentación de diapositivas a pantalla completa, cuya idea principal es cortar la diapositiva actualmente abierta al navegar a la siguiente o anterior. Usando jQuery y animación CSS, podemos lograr transiciones únicas entre diapositivas.

09.05.2012 778

Presentación de diapositivas en jQuery con música utilizando la biblioteca jPlayer multiplataforma. Las diapositivas cambian a intervalos específicos en la composición musical.

04.05.2012 892

Rhinoslider es un complemento de presentación de diapositivas jQuery bastante flexible. No sólo hay una variedad de efectos disponibles, sino que también puedes agregar tus propios estilos, efectos y funciones al control deslizante. En la página oficial del complemento hay un generador de efectos conveniente: un generador; una vez que haya hecho su elección, puede descargar inmediatamente el ejemplo de trabajo generado.

03.05.2012 2 061

Complemento de presentación de diapositivas basado en jQuery y complemento de aceleración. Se agregó la capacidad de desplazarse por las diapositivas usando la rueda del mouse. Las páginas de demostración muestran varias opciones para utilizar la navegación por diapositivas.

12.04.2012 1 387

Usando jmpress, crearemos un complemento jquery para crear una presentación de diapositivas con interesantes efectos 3D para diapositivas.