Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
Ver Demo -Interface Slideshow
Uso:
Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…
<script src="interface.js" type="text/javascript"></script>
Un poco de CSS
{
width: 300px;
height: 280px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}
#slideShow2
{
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}
.pagelinks a
{
font-weight: bold;
color: #666;
}
.slideCaption
{
background-color: #FFFFCC;
padding: 4px;
text-align: center;
font-weight: bold;
}
.pagelinks a.activeSlide
{
color: #f90;
}
/* this is for IE so the prev/next links can be hovered*/
.nextSlide,.prevSlide
{
background-image: url(images/spacer.gif);
}
.nextSlide:hover
{
background-image: url(images/nextslide.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.prevSlide:hover
{
background-image: url(images/prevslide.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
.inputsTooltip
{
border: 1px solid #ccc;
background-color: #eee;
padding: 4px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}
#tooltipURL
{
display: none;
}
Estructura de ambos ejemplos
<div class="slideshowLoader"></div>
<div class="slideshowHolder"></div>
<div class="slideshowLinks pagelinks"></div>
<div class="slideshowCaption slideCaption"></div>
</div>
<div id="slideShow2"><div class="slideshowLoader"></div>
<div class="slideshowHolder"></div>
<div class="slideshowLinks pagelinks"></div>
<div class="slideshowCaption slideCaption"></div>
</div>
$(document).ready(
function()
{
$.slideshow(
{
container : 'slideShow1',
loader: 'slideshow_files/slideshow_loader.gif',
linksPosition: 'top',
linksClass: 'pagelinks',
linksSeparator : ' | ',
fadeDuration : 400,
activeLinkClass: 'activeSlide',
nextslideClass: 'nextSlide',
prevslideClass: 'prevSlide',
captionPosition: 'bottom',
captionClass: 'slideCaption',
autoplay: 5,
random: true,
images : [
{
src: 'slideshow_files/Dynamic.jpg',
caption: 'Panda Dynamic'
},
{
src: 'slideshow_files/Active.jpg',
caption: 'Panda Actual'
},
{
src: 'slideshow_files/Dynamic.jpg',
caption: 'Fiat Panda'
},
{
src: 'slideshow_files/Active.jpg',
caption: 'Panda Active'
}
]
}
)
$.slideshow(
{
container : 'slideShow2',
loader: 'images/slideshow_loader.gif',
linksPosition: 'top',
linksClass: 'pagelinks',
linksSeparator : ' | ',
fadeDuration : 400,
activeLinkClass: 'activeSlide',
nextslideClass: 'nextSlide',
prevslideClass: 'prevSlide',
captionPosition: 'bottom',
captionClass: 'slideCaption',
autoplay: 5,
images : [
{
src: 'slideshow_files/Dynamic.jpg',
caption: 'Fiat Panda'
},
{
src: 'slideshow_files/Dynamic.jpg',
caption: 'Panda Active'
},
{
src: 'slideshow_files/Dynamic.jpg',
caption: 'Panda Actual'
},
{
src: 'slideshow_files/Dynamic.jpgg',
caption: 'Panda Dynamic'
}
]
}
)
$('a').ToolTip(
{
className: 'inputsTooltip',
position: 'mouse'
}
);
}
);
</script>
Ver Demo -Mas info Interface Slideshow
Loading ...
Nebel
31-08-2008
Permalink
En verdad, Nikko, no se que haria sin tu blog
... JaJaJa... Como siempre, tus post son perfectos, excelentes y espectaculares 
... Ahorita probare mas esta funcion...
Saludos
spike
31-08-2008
Permalink
Lo probaste? de veras funciona? yo lo probe y no me funciono, copie el codigo del ejemplo de eyecon canviando los paths y nada.
spike
31-08-2008
Permalink
vale, ahora ya si me funciona. Me he descargado directamente el jquery.js y el interface.js que usan ellos y pita fino:
http://interface.eyecon.ro/jquery/jquery.js
http://interface.eyecon.ro/interface/interface.js
saludos
Bookmarks about Diapositivas
31-08-2008
Permalink
[...] - bookmarked by 4 members originally found by king00185 on 2008-10-02 Interface Slideshow http://xyberneticos.com/index.php/2008/08/31/interface-slideshow/ - bookmarked by 6 members [...]