Menú Principal
Fotografía
Programación
odoFrontSlide es un slideshow programado desde 0 y exclusivamente para la portada de mi portfolio, que pongo en mano de todos bajo una licencia LGPL en forma de plugin de Jquery
Caracterisitcas:
- Tamaño variable, sí es posible definir un tamaño en porcentaje y que automáticamente se reescale al tamaño apropiado si se cambia el tamaño de la ventana del navegador; oviamente también es posible definir un tamaño fijo.
- Añade un borde, puedes definir un borde compuesto por imágenes, el scrip se encarga también de ajustar el tamaño de este: por ejemplo yo uso una tabla de 3x3 celdas con imagenes en todas, escepto la central.
- Precarga de imágenes, tódas las imágenes se cargaran y mantendrán cargadas (nunca tuve la intención de usar cientos de imágenes en el slideshow).
- Enlaces salientes, a cada imágen por separado se le puede definir un enlace a donde quieras.
- Comentarios, si además añades un comentario a la imágen, el script se encarga de que lo veas
Descargar
La Versión actual es la 0.4.1, si bien es perfectamente usable, puede llegar a dar algún problema
Instalación:
1) Como cualquier plug in de jquery, lo primero es incluír jquery en tu página:
<script src=" <?php echo get_bloginfo('template_url') ?>/js/jquery.js" type="text/javascript"></script>
2) Tendremos que incluir también el propio plugin y su correspondiente Css
<link rel="stylesheet" type="text/css" href="js/jquery.odofronslide.css" media="screen" />
<script src=" js/jquery.odofronslide-0.4.js" type="text/javascript"></script>
3) en el cuerpo situaremos el siguiente código para que script pueda generar el slideshow
- Un Div que va a contener el slideshow
<div class="oFSdemo1 " >
- Esta tabla, es la que uso para situar las imágenes que forman el borde
<table id="oFS_border_id">
<tbody>
<tr>
<td id="comments_border_tl"></td>
<td id="comments_border_t"></td>
<td id="comments_border_tr"></td>
</tr>
<tr>
<td id="comments_border_l"></td>
<td id="comments_border_c"></td>
<td id="comments_border_r"></td>
</tr>
<tr>
<td id="comments_border_bl"></td>
<td id="comments_border_b"></td>
<td id="comments_border_br"></td>
</tr>
</tbody>
</table>
- Luego viene un div, que contiene la lista de imágenes, nota: hago un display:none, para que no se vean si javascript está desactivado.
<div id="oFS_image_list" style="display: none;">
- La Lista de imágenes:
<img title="Esta imágen tiene un enlace" src="http://www.andresbott.suiadan.com/wp-content/gallery/galeria_retrato/010.jpg" alt="http://google.es" link="enlace"/><br />
<img title="esta solo tiene texto" src="http://www.andresbott.suiadan.com/wp-content/gallery/galeria_retrato/DSC_8247_03.jpg" alt="" /><br />
<img title="la siguiente solo tiene enlace" src="http://www.andresbott.suiadan.com/wp-content/gallery/galeria_retrato/DSC_8270_03.jpg" alt="" /><br />
<img title=" " src="http://www.andresbott.suiadan.com/wp-content/gallery/galeria_retrato/DSC_8002_02.jpg" alt="http://google.es" /><br />
<img title=" por lo que volvemos al principio " src="http://www.andresbott.suiadan.com/wp-content/gallery/galeria_retrato/DSC_8012_02.jpg" alt="http://google.es" />
- cerramos los divs que teníamos abiertos
</div>
</div>
Notas:
- En cada imágen, el atributo tittle, sera mostrado como comentario; c
- Para obtener la url del enlace sirven tanto los atributos alt como link pero, si como en este caso el código va a ser limpiado por una función, lo más probable es que quite el atributo link de cada imágen y por tanto tengo que usar alt Importante: esto hay que definirlo en la configuración (mas adelante explico cómo)
4) Preferiblemente en el <head> de nuestro documento, pero en el body también funciona, llamamos a la función con los parámetros adecuados
<script type="text/javascript">
$(document).ready(function() {
$(".oFSdemo1").odofrontslide({
'border_selector' :"#oFS_border_id",
// aquí irán más opciones
});
});
</script>
Configuración:
| Opción | Valor por defecto | Descripción |
| images | false | Un array para pasarle directamente toda la información al script sin añadir imagenes al body *(no testeado con los cambios realizados en la versión 0.3) |
| no_js_img | false | El selector de la imágen que se mostrará si Javascript está desactivado |
| selector_width | 100 | El ancho del slideshow. Si se le pasa un valor numerico del 1 al 100 lo interpretara como un porcentaje y sera de ancho variable. Si por lo contrario se le pasa el valor en modo de string como por ejemplo "300" lo interpretará como la cantidad de pixeles y será de ancho fijo. |
| selector_height | 50 | El altodel slideshow. Si se le pasa un valor numerico del 1 al 100 lo interpretara como un porcentaje y sera de altura variable. Si por lo contrario se le pasa el valor en modo de string como por ejemplo "300" lo interpretará como la cantidad de pixeles y será de altura fijo. |
| selector_min_width | false | Ancho minimo, valor en pixeles, y false para desactivarlo |
| selector_max_width | false | Ancho máximo, valor en pixeles, y false para desactivarlo |
| border_selector | false | Si se usa un borde como en el ejemplo, con esta opcion definimos el selector hacia el borde |
| border_fadein | true | Si hay un borde definido, hará un fadeIn del borde si ponemos el valor en True, en False veremos el borde desde el principio |
| useAltAsLink | false | En True usará el atributo alt para definir las urls salientes, en vez del atributo link |
| sleep | 5000 | tiempo en ms que se muestra cada imágen (5 segudnos por defecto) |
| fade_time | 500 | velociad de la animación de cambio de imágenes |
| comment_fade | 300 | velocidad de la animación de comentarios |
sé el primero en escribir un comentario.