Posted by admin in scriptsabr 21st, 2009 | no responses
ImageFlow es otra bonita galería basada en JavaScript y la cual por su aspecto sin duda quedaría bien en cualquier proyecto online que tengamos en mente. ImageFlow es muy similar en varios aspectos con MooFlow aunque cuenta con algunas diferencias o algunos agregados. ImageFlow nos permite navegar entre las imágenes utilizando el scroll de nuestro ratón o bien utilizando un sistema de navegación integrado a la galería y el cual moveremos esta vez, de forma manual con nuestro ratón. Esto permite al usuario desplazarse bien entre cada una de las imágenes, yendo de un lado a otro. También se han hecho muchas mejoras con respecto al div contenedor de la galería, lo que garantiza que el desplazamiento producido por nuestro ratón, solo se produzca al estar sobre el div que contiene a la misma. Su utilización es sumamente fácil y los efectos que hacen a la galería muy agradables. ImageFlow y MooFlow son dos galerías que tranquilamente podríamos comparar por su similitud, y ver así, cual de las dos se asemeja mas, a lo que deseamos conseguir para nuestro proyecto online.
Ver demo – Descarga demo
Instalacion:
Descargamos el script ImageFlow
y como es costumbre, lo primero que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >
JavaScript:
<script type=“text/javascript” src=“js/imageflow.js”></script>
agregamos un poco de estilo
CSS:
<style type=“text/css”>
img {
position:absolute;
top:0px;
border:none;
}
h1 {
text-align:center;
}
a{
color:#fff;
}
.none{
visibility:hidden;
}
.none div{
display:none;
}
.clear{
clear:both;
}
#images{
visibility:hidden;
}
#loading{
margin-top:50px;
text-align:center;
width:100%;
}
#loading img{
margin-top:10px;
position:relative;
}
#captions{
position:relative;
text-align:center;
z-index:10000;
}
#scrollbar{
visibility:hidden;
position:relative;
border-bottom:1px solid #b3b3b3;
z-index:10001;
}
#scrollbar_slider{
position:absolute;
margin-top:-7px;
margin-left:-7px;
z-index:10002;
background-image:url(slider.png);
background-repeat:no-repeat;
width:14px;
height:14px;
}
#imageflow{
background-color:#000;
margin-left:350px;
text-align:left;
color: #fff;
}
</style>
Por ultimo la estructura de nuestra galeria
HTML:
<div id=”imageflow”>
<div id=”loading”>
<b>Loading images</b><br/>
<img src=”loading.gif” width=”208? height=”13? alt=”loading” />
</div>
<div id=”images”>
<img src=”img/img001.png” alt=”Image 1? />
<img src=”img/img002.png” alt=”Image 2? />
<img src=”img/img003.png” alt=”Image 3? />
<img src=”img/img002.png” alt=”Image 4? />
<img src=”img/img003.png” alt=”Image 5? />
<img src=”img/img001.png” alt=”Image 6? />
<img src=”img/img002.png” alt=”Image 7? />
<img src=”img/img003.png” alt=”Image 8? />
<img src=”img/img002.png” alt=”Image 9? />
<img src=”img/img001.png” alt=”Image 10? />
</div>
<div id=”captions”></div>
<div id=”scrollbar”>
<div id=”slider”></div>
</div>
</div>
<div class=”clear”></div>
Copy the code below to your web site.
Link to this page
