En uno de los comentarios me preguntaron por el slideshow ó diapositiva de noticias que se pueden apreciar en la página inicial del blog (y directorio de categorias también). Pues se trata de Easy News Plus un plugin que implementa facilmente un slideshow de contenido HTML que funciona con jQuery.
Cuenta con las siguientes características:
- Cross browser (compatibilidad con la mayoría de navegadores web) .
- Botones Previo, Pause y Siguiente.
- No necesita de otros plugins.
- Acepta cuaquier contenido HTML, incluso Flash.
- Soporte efecto de transición muy suave.
- Velocidad de visualización ajustable.
- Diseño editable mediante su hoja de estilos.
HTML
Primero creamos el contenedor de todas las noticias ó HTML que queremos mostrar.
<div id="mynews" style="display:none">
<div class="news_style">Contenido HTML ...</div>
<div class="news_style">Contenido HTML .../div>
..........mas noticias.................
</div>
Creamos otro contendor para mostrar las noticias.
<div id=showhere></div>
Insertamos los botones Prev, Siguiente y Pause (por defecto usar los siguientes nombres de archivo: prev0.gif, next0.gif, pause0.gif).
<div class=buttondiv id=news_button>
<img src=prev.gif align="absmiddle" id=news_prev>
<img src=pause.gif align="absmiddle" id=news_pause>
<img src=next.gif align="absmiddle" id=news_next>
</div>
Opcionalmente creamos un contendor para mostrar el título de las noticias:
<div id=news_display ></div>
JavaScript
Descargamos jQuery y el plugin de esta herramienta. Antes del </head> incluir este código JavaScript.
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.easynews.plus.js"></script>
<script>
$(document).ready(function(){
var newsoption = {
firstname: "mynews",
secondname: "showhere",
thirdname:"news_display",
fourthname:"news_button" ,
playingtitle:"Now Playing:",
nexttitle:"Next News:",
prevtitle:"prev News:",
newsspeed:'8000',
isauto:'1',
newscountname:"test",
imagedir:'/dir/easynewsplus/',
disablenewscount:false
}
$.init_plus(newsoption);
});
</script>
Expliquemos algunos parámetros:
- firstname, id de contenedor de todas las noticias.
- secondname, id del contenedor donde se mostrarán las noticias.
- thirdname, id del contenedor del título de las noticias.
- fourthname, id del contendor de los botones de desplazamiento.
- newsspeed, tiempo de desplazamiento 1000=1 segundo.
- isauto, 1 = auto play.
- imagedir, directorio donde están alojadas las imágenes.
Si todo esto te parecio confuso un demo de esta herramienta te puede ayudar.
Sitio web : EZjQuery