JMiur [E]

Book Flip Slideshow es un script de DyamicDrive que crea un slideshow de imágenes con un efecto similar a "dar vuelta una página".

El efecto puede ser definido como horizontal o vertical y cada imagen puede tener un enlace asociado. Para detener el slideshow basta colocar el puntero del ratón encima de una imagen.


<script type='text/javascript'>
// <![CDATA[

var Book_Image_Width = 250; // el ancho de las imágenes a utilizar
var Book_Image_Height = 350; // el alto de las imágenes a utilizar
var Book_Border = false; // si las imágenes tienen borde, ponemos true
var Book_Border_Color = "gray";  // es el color del borde
var Book_Speed = 15;  // la velocidad del efecto
var Book_NextPage_Delay = 1500; // 1 segundo=1000
var Book_Vertical_Turn = 0;  // si queremos que sea vertical, colocamos el valor de 1

// esta es la lista de las imágenes a ser mostradas (mínimo cuatro)
Book_Image_Sources=new Array(
// si no se quiere agregar un enlace, se deja en blanco ""
"URL_imagen1","URL_enlace1",
"URL_imagen2","",
"URL_imagen3","",
"URL_imagen4","URL_enlace4"
// la última imagen no debe terminar con una coma
);

var B_CrImg=Book_Image_Sources.length/2;

var B_LI, B_MI, B_RI, B_TI;
var B_Angle=0;
var B_MaxW;
var B_Direction=1;
var B_MSz;
var B_Stppd=false;
B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook() {
if(document.getElementById) {
for(i=0;i
B_Pre_Img[i]=new Image();
B_Pre_Img[i].src=Book_Image_Sources[i];
}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI); 
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI); 
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border) {
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color;
}

B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];

B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages();
}
}

function BookImages(){
if(!B_Stppd) {
if(Book_Vertical_Turn) {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"
} else {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction) {
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2
}
if(B_Angle>=Math.PI) {
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";   
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay);
} else setTimeout("BookImages()",50);
} else setTimeout("BookImages()",50);
}

function Book_Next_Delay() {
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50);
}

function B_LdLnk() {
if(this.lnk)window.location.href=this.lnk;
}

function B_Stp() {
B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default";
}

function B_Rstrt() {
B_Stppd=false;
}

// ]]>
</script>
Para insertar un slideshow, lo que necesitamos es una imagen auxiliar llamada placeholder.gif que podemos alojar en Blogger o donde nos guste.

El código HTML es muy sencillo, donde queremos mostrarlo, colocamos lo siguiente (todo en una línea si se trata de un post):
<div id="Book" style="position:relative;">
<img src="URL_placeholder.gif" width="elAncho" height="elAlto">
</div>
<script type="text/javascript">ImageBook();</script>
Para un slideshow horizontal:
elAncho es igual al doble del ancho de la imagen más cuatro
elAlto es igual al alto de la imagen más dos

Para un slideshow vertical:
elAncho es igual al alto de la imagen más dos
elAlto es igual al doble del alto de la imagen más cuatro

33 comentarios:

Gem@  

De todos los que vi es el más elegante diría yo...

Responder
Admin  

Da la impresión de ser mas liviano que los clásicos slides no? Slide Show y esos otros que tardan bastante en cargar, este parece que no, es por el script?

Se ve muy lindo y fino como dice gem@, pero claro, también las imagens que has puesto... son muy bonitas y delicadas.
Y son imagenes, que no se, a mi por lo menos me da que fueran mas livianas que las fotos, no se si tiene o no que ver...

Está muy lindo!

Responder
Emerald  

El slideshow está buenísimo, pero lo que me parecieron preciosas son las imágenes!!! :D

Responder
Emerald  

el script lo ponemos en la plantilla o podríamos ponerlo en la entrada donde vamos a usar el slideshow?

Responder
Anónimo  

JMIUR no estás trayendo herramientas bellísimas...preciosas las imágenes que has puesto, saludos!!!

Responder
Anónimo  

Pienso igual que los demás con respecto a las imágenes. Gracias por aportarnos tanto, eres un GRANDE!

Responder
Unknown  

hola JMIUR, existe un código que permita a las personas que hacen un comentario, subir un documento a la pagina

Responder
Unknown  

No solo nos traes una herramienta elegante y entretenida, también en la forma de presentarla se nota tu buen gusto y delicadeza porque las imágenes son preciosas realmente

besos ronroneados.

pd: una pregunta, se puede ocupar en vez de lightwindow en comentarios la ventana modal ibox, que es la que uso ya que en mi caso me resultó más liviana, además el nuevo formulario tuve que sacarlo porque habían comentarios que no se estaban publicando :(

Responder
Anahí  

Además de que coincido que las imgs. son bellas, me parece muy útil. Pero JMiur, una duda, ¿dónde se cargan las imágenes, en el script? Es decir, cada vez que quiero usarlo tengo que cargar las imágenes + el script de nuevo? Eso es lo que no entiendo.
Saludos.

Responder
JMiur  

Para quienes están interesados en las imágenes, se trata de obras de la ilustradora Fiona Wylie. Su portfolio ahora no está disponible online pero si buscan en Google verán muchas imágenes que le pertenecen.

Luz de Luna:
Sí, el script puede colocarse en un post. En este ejemplo, así lo hice, guardándolo en un archivo externo.

Solidaridad:
No, ese tipo de opción no existe ya que es un riesgo de seguridad muy grande. Muy pocos servicios lo admiten.

Pau:
El problema con ibox es que yo jamás he logrado cargar una pagina web externa. Si pudiera hacerse, no habría inconvenientes. Lo de los comentarios y el formulario es cierto aunque parece estar resolviéndose .. espero.

Anahí:
Sí, esa es la limitación. Funciona para un grupo de imágenes que deben colocarse en el script:
Book_Image_Sources=new Array(
...............
)

Responder
Admin  

Te equivocas con respecto a esto:"Lo de los comentarios y el formulario es cierto aunque parece estar resolviéndose .. espero." ya te salió duplicado :D

Responder
JMiur  

En este caso, el error fue mio :D

Responder
Admin  

Ja ja ja :D JMiur con errores... Oh my God!! :D

Responder
Admin  

Y que estamos aquí, a mi que fui la segunda en comentar en este post, no me contestaste... :(
No lo voy a repetir, leelo, estoy ofendida :'(

Responder
JMiur  

k_nelita:
Sorry. Pués sí, el script es liviano en si mismo, precarga las imágenes y eso hace que se ejecute rápido pero, también influye el tamaño de las imágenes a utilizar.

Responder
Admin  

Por el único lugar que se puede comentar es por el viejo editor, como era eso de que funcionaba mejor? juaa :D por no llorar...

Bueno entonces si yo pongo fotos, no imagenes, de 600 x 400 por ejemplo, tardaría mas? Y si las reduzco?

Ahh por cierto donde pones : "lo que necesitamos es una imagen auxiliar llamada placeholder.gif", el enlace dice que la página tiene error o algo así, desde ayer, no se puede ver la imagen en cuestión.

Gracias por contestar ;) (mas vale tarde que nunca no?)

Responder
x  

Amgio JMiur integre de nuevo el codigo de LightWindow en mi pagina: www.tvecuador.blogspot.com para tratar de emular el efecto "Apagar Luces" como le habia mencionado. Ahora ud. podra observar que cuando hace click en ese vinculo es como si se abriera una ventana pequeña, entonces quisiera saber como deshacerme de ella para que no aparezca.

Responder
Anahí  

JMiur, entonces ahí va mi segunda pregunta: yo cargo el script en geocities, digamos con el nombre bookflip, ¿puedo cargar varios scripts con otro nombre (bookflip2, etc.) con diferentes imagenes y postearlo directamente?
(espero se entienda la pregunta)
Salu2

Responder
JMiur  

k_nelita:
La imagen placeholder la podés descargar desde aquí

x:
O no lo leí o no recuerdo la idea de ese efecto. Lo que veo en ese enlace es lo que hace LightWindow, crea, en este caso, una ventana de 0 pixeles de tamaño. Recuérdame un poco la idea.

Anahí:
No es tan sencillo como eso. HAbría que modificar muchas más cosas, cambiar las variables (darles otro nombre) y las funciones para que no estén repetidas y funcionen. No paraece que el script esté pensado para eso, para ser repetido pero, puede usarse en varios posts siempre que no se muestren juntos, por ejemplo.

Responder
Nicar  

Hola JMiur. No me pude aguantar y ya coloque el slide en blog.Con las 11 fotos que quería meter no me funcionaba,pero con 10 va estupendo. Muchas gracias por todo.

Responder
JMiur  

NKR:
Acabo de verlo y ha quedado muy bien :)

Responder
Emerald  

:(( :(( no me sale!! ya le dí todas las vueltas posibles!

Responder
JMiur  

Luz: Colócalo en un lugar aunque no funciona y me dices donde lo puedo ver.

Responder
Nicar  

Gracias JMiur. Si se que ibas a visitar mi blog hubiera puesto unos buenos "gintonis" para celebrarlo.

Responder
JMiur  

Jajajaja, bueno, yo curioseo siempre así que, déjalos allí a la mano :D

Responder
Emerald  

JMiur, por fin me salió!!!
perdón, te estoy usando la imagen placeholder, creí que era hasta esta imagen la razón porque no me salía! si supieras todo lo que probé! bue, al final lo tengo :D
te quiero dar las gracias porque es hermoso este slideshow!!
Un abrazo

Responder
JMiur  

Perfecto, Luz. acabo de ver las cartas del tarot :D

Responder
Pau  

Hola!!
JMiur, muchas gracias por el ejemplo. Lo armé con avisos publicitarios y quedó muy bueno. Tengo un problema para configurar los links. Como está configurado en el codigo el link abre en la misma pagina, me podrías decir que parte tengo que modificar para agregarle el _blank?
Muchas gracias

Responder
JMiur  

Pau:
Realmente no sé. Lo estuve viendo y no se me ocurre cómo hacerlo.

Responder
Anónimo  

Hola JMiur
Muy bueno este slideshow!!
Lo quiero implementar pero tú dices que hay que tener la imagen auxiliar llamada placeholder.gif, ¿no? Es ahí donde me surge un problemita.. no puedo descargarla :(

Otra cosa, ¿el slideshow se puede usar mas de una vez pero con diferentes imágenes?

Muchas gracias
Saludos!

Responder
JMiur  

Auí, la alojé en ImageShack par que la descargues. en realidad, es cualquier cosa, es una imagen sin contenido, vacia.

Como el script utiliza un ID, no pueden ponerse dos en la misma página pero podrían ponerse en páginas distintas.

Responder
La hormiguita  

JMiur... me gustaría poner este slide pero no entiendo donde va el código, si lo pongo en la plantilla???? en donde.... y si no como?
y la imagen la puedo hacer en photoshop? de esas medida y la cierro que sea .gif . Que color debe ser? Blanca?
Gracias

Responder
JMiur  

El código del script, como todos, antes de </head>

Luego, el DIV y la llamada al script, donde quieras mostrarlo, un post o un elemento HTML:

>div id="Book" style="position:relative;"<
...............
</div>
<script type="text/javascript">ImageBook();</script>

Si es en un post, todo eso en una sola línea.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR