Video Light

Curso de Ofimática T – Equipo de profesores
GALERIA DE IMÁGENES CON LIGHTBOX
1. Escribir el código en la zona del Head
<link href="css/lightbox.css" rel="stylesheet" />

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
2. Crear capas para cada imagen
Definir un estilo para cada objeto de imagen en la hoja estilos, como figura en el siguiente ejemplo:
#img1{
margin-top:20px;
margin-left:25px;
margin-right:25px;
margin-bottom:15px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}
#img2{
margin-top:20px;
margin-right:25px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}
#img3{
margin-top:20px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}
3. En la zona donde se insertarán las imágenes (capa del cuerpo) escribir el siguiente código:
<div id="cuerpo">
<h2>Galería de Imágenes</h2>
<div id="img1">
<a href="images/examples/portada1_grande.jpg" rel="lightbox[libros]" title="Leng. de programación">
<img src="images/examples/portada1_pequeño.jpg"></a>
<h3 class="centrar">Precio: S/.55.80</h3>
</div>
<div id="img2">
<a href="images/examples/portada2_grande.jpg" rel="lightbox[libros]" title="HTML 5"><img
src="images/examples/portada2_pequeño.jpg"></a>
</div>
<div id="img3">
<a href="images/examples/portada3_grande.jpg" rel="lightbox[libros]" title="Java">
<img src="images/examples/portada3_pequeño.jpg"></a>
1

</div>
</div>
Uso del Light box2 (Efectos para galería de fotos)

1. Copie las carpetas a su sitio web: css, images y js
2. Las imágenes que desea con el efecto (imagen pequeña y grande) debe copiarlas a la subcarpeta images\ examples
3. Repita el paso 2 para cada imagen que se desee con el efecto de zoom.
4. Copie el siguiente código entre las etiquetas <HEAD> y </HEAD>
<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
5. Inserte la imagen pequeña en el lugar deseado de la página.
6. Coloque un hipervínculo en la imagen pequeña para que se
enlace con la imagen grande.
7. Edite el código del hipervínculo de la siguiente manera:
<a href="images/examples/imagen_grande1.jpg"
rel="lightbox">
8. Agrega una descripción para cada foto, utilizando la propiedad “title”.
<a href="images/examples/imagen_grande1.jpg" rel="lightbox" title=”Descripción”>
Solo debe escribir el código subrayado y luego puede observar el efecto que se produce en la imagen cuando se hace el
hipervínculo.
Para mayor información y descarga de archivos visite la siguiente dirección:
http://lokeshdhakar.com/projects/lightbox2/
2
GALERIA DE MÚSICA1
1. Definir un estilo para cada objeto de sonido en la hoja estilos, como figura en el siguiente ejemplo:
#audio1{
width:940px;
height:auto;
text-align:center;
}
#audio2{
width:940px;
height:auto;
text-align:center;
}
#audio3{
width:940px;
height:auto;
text-align:center;
}
2. Crear capas para cada objeto de sonido en la página de galería.

<div id="cuerpo">
<h2>Galería de música</h2><br />

<div id="audio1">
<audio controls="controls">
<source src="audio/mp3/es_mentiroso_olga_tañon.mp3" type="audio/mpeg">
<source src="audio/ogg/es_mentiroso_olga_tañon.ogg" type="audio/ogg">
</audio>
<h3>Es Mentiroso - Olga Tañon</h3>
</div>
<div id="audio2">
<audio controls="controls" autoplay="autoplay">
<source src="audio/mp3/sentirme_vivo_Gian_Marco.mp3" type="audio/mpeg">
<source src="audio/ogg/sentirme_vivo_Gian_Marco.ogg" type="audio/ogg">
</audio>
<h3>Sentirme vivo - Gian Marco</h3>
</div>
<div id="audio3">
<audio controls="controls">
<source src="audio/mp3/vivir_sin_aire_mana.mp3" type="audio/mpeg">
<source src="audio/ogg/vivir_sin_aire_mana.ogg" type="audio/ogg">
</audio>
<h3>Vivir sin aire - Maná</h3>
</div>
</div>
1
Incluya el sonido con los formatos .ogg y .mpeg para que puede estar disponible por diferentes browsers.
3
GALERIA DE VIDEOS
1. Ingrese al programa VideoLightBox 2.1.
2. En la ficha 1. Add video, haga clic en el botón siguiente:
3. Haga clic en la opción Add video from file.
4. Seleccione los archivos de video y luego haga clic en el botón Abrir.
4
5. Inmediatamente observará a los videos elegidos.
6. Haga clic en la ficha 2. Customize thumbails y cambie el modelo o Template, la resolución (Thumbail
resolution) y elija un botón de Play. Observe el siguiente modelo como referencia.
5
7. En la ficha 3. Customize video, seleccione el modelo o Template.
8. Elija la ficha 4. Publish y luego, haga clic en el botón Open Html Page. Ahora, seleccione la página de video y
haga clic en Abrir.
9. Elija la capa de destino del video, normalmente es la capa del cuerpo de la página, luego haga clic en el botón
Insert Afer.
6
10. Inmediatamente observará una vista preliminar de los videos incorporados. Ahora, haga clic en el botón
Publish.
11. Observe la página generada en el browser predeterminado de su computadora.
7
Nota
Si desea puede guardar el proyecto generado en el programa VideoLightbox.
Importante
Ahora en el programa Coffee Cup abra el archivo de la página de video y observe que se ha generado un código.
Deberá guardar la página.

Video Light

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Video Light

Cargado por

Copyright:

Formatos disponibles

Curso de Ofimática T – Equipo de profesores

GALERIA DE IMÁGENES CON LIGHTBOX

1. Escribir el código en la zona del Head

<link href="css/lightbox.css" rel="stylesheet" />

2. Crear capas para cada imagen

<h3 class="centrar">Precio: S/.63.00</h3>

Uso del Light box2 (Efectos para galería de fotos)

8. Agrega una descripción para cada foto, utilizando la propiedad “title”.

<a href="images/examples/imagen_grande1.jpg" rel="lightbox" title=”Descripción”>

2. Crear capas para cada objeto de sonido en la página de galería.

<h2>Galería de música</h2><br />

1. Ingrese al programa VideoLightBox 2.1.

2. En la ficha 1. Add video, haga clic en el botón siguiente:

3. Haga clic en la opción Add video from file.

4. Seleccione los archivos de video y luego haga clic en el botón Abrir.

5. Inmediatamente observará a los videos elegidos.

7. En la ficha 3. Customize video, seleccione el modelo o Template.

11. Observe la página generada en el browser predeterminado de su computadora.

También podría gustarte