Tube trucos

Mostrando entradas con la etiqueta galeria de imagen. Mostrar todas las entradas

Slideshow ojeando paginas con imagenes

Por Unknown No comments

Hoy les voy a brindar un fabuloso slideshow es como si fuera ojeando paginas en un libro abierto que muestra dos paginas pero esta paginas van a ser imagenes cada ves que pase una ojeada muestra dos imagenes las cuales les puedes poner enlace o no tambien una ves pases el mouse por encima de una imagen esta se detendra y al quitarlo esta continuara en este codigo tenemos dos opciones que se muestre vertical o horizontal como se las muestro es vertical,mas abajo les muestro lo que podemos modificar ahora les muestro un ejemplo:

Este codigo lo debemos colocar en cualquier parte del body.

<body onload="ImageBook()"> <script type="text/javascript"> var Book_Image_Width=150; var Book_Image_Height=230; var Book_Border=true; var Book_Border_Color="gray"; var Book_Speed=16; var Book_NextPage_Delay=1600; //1 segundo=1000 var Book_Vertical_Turn=0; Book_Image_Sources=new Array( "http://dl.dropbox.com/u/25944020/images6.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images5.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images1.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images2.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images3.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images4.jpg","http://www.tubetrucos.com" ); var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1; var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length); function ImageBook(){ if(document.getElementById){ for(i=0;i<Book_Image_Sources.length;i+=2){ 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> <div id="Book" style="position:relative"> <img src="http://dl.dropbox.com/u/25944020/tubetrucosplaceholder.gif" width="144" height="227"> </div>

Lo que podemos modificar

    var Book_Image_Width=150;                El ancho de las imagenes
   var Book_Image_Height=230;               La altura de las imagenes
   var Book_Border=true;                          si deceas borde true o false
   var Book_Border_Color="gray";            color del borde
   var Book_Speed=16;             la velocidad
   var Book_NextPage_Delay=1600;         un 1 segundo=1000
    var Book_Vertical_Turn=0;                    vertical o horizontal

Donde dice :

Book_Image_Sources=new Array(

"http://dl.dropbox.com/u/25944020/images6.jpg","http://www.tubetrucos.com",                           "http://dl.dropbox.com/u/25944020/images5.jpg","http://www.tubetrucos.com",
"http://dl.dropbox.com/u/25944020/images1.jpg","http://www.tubetrucos.com",

Lo que esta en rojo lo deben cambiar por su imagen y su url de enlace.

eso es todo espero y lo disfruten.

Opacidad en una imagen al pasar el cursor

Por Unknown 4 comments

Con el código de hoy vamos a obtener el efecto de opacidad en una imagen al pasar el cursor y viseversa también, por lo tanto vamos a obtener dos códigos,este efecto es muy fácil de implementar copien el código que les brindo y lo puedes colocar en la plantilla o en Diseño > añadir gadget > HTML/Javascript y pegamos es todo.
Aquí les muestro el ejemplo como quedaría:

En el codigo donde nos dice "URL de la imagen" ponen entre las comillas la url de la imagen que quieren mostrar

<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Galeria de imagen con la opcíon ampliar II

Por Unknown No comments

Esta es una galería de imagen al pasar el mouse por encíma de ese texto se mostrara una imagen,Un título puede ser añadido a la imagen ampliada,estas las pueden modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.

Este va entre las etiquetas .<head><head>

<style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /></a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src="http://dl.dropbox.com/u/25944020/images9.jpg" /></a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src=" http://dl.dropbox.com/u/25944020/images.jpg" /></a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /></a> </div>

Con este es lo mismo lo uníco que este tiene para mostrar un titulo o informacion hacerca de la imagen en la parte de abajo de la imagen van a usar el mismo codígo para el head que les brindo anteriormente ,este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /> Aquí ponen el titulo que quieran</a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src="http://dl.dropbox.com/u/25944020/images9.jpg" /> Aquí ponen el titulo que quieran</a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src=" http://dl.dropbox.com/u/25944020/images.jpg" /> Aquí ponen el titulo que quieran</a> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /> Aquí ponen el titulo que quieran</a> </div>

Ejemplo:

Aquí ponen el titulo

Ejemplo:

Aquí va el titulo

Aquí ponen el titulo que quieran
Aquí va el titulo

Aquí ponen el titulo que quieran

Galeria de imagen con la opcíon ampliar

Por Unknown No comments

Esta es una galería de imagen CSS con títulos, que muestra más grandes las imágenes dinámicamente cuando el mouse pasa sobre ellas. Un título puede ser añadido a la imagen ampliada,estas las puedes modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.

Este va entre las etiquetas .<head><head>

<style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" width="100px" height="66px" border="0" /><img src="http://dl.dropbox.com/u/25944020/images1.jpg" /> Aquí pueden poner el titulo que quieran</a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/ima.jpg" width="100px" height="66px" border="0" /><img src="http://dl.dropbox.com/u/25944020/ima.jpg" /> Aquí pueden poner el titulo que quieran</a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" width="100px" height="75px" border="0" /><img src="http://dl.dropbox.com/u/25944020/images6.jpg" /> Aquí pueden poner el titulo que quieran</a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" width="100px" height="70px" border="0" /><img src="http://dl.dropbox.com/u/25944020/images7.jpg" /> Aquí pueden poner el titulo que quieran</a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" width="100px" height="75px" border="0" /><img src="http://dl.dropbox.com/u/25944020/images4.jpg" /> Aquí pueden poner el titulo que quieran</a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images8.jpg " width="100px" height="70px" border="0" /><img src="http://dl.dropbox.com/u/25944020/images8.jpg " /> Aquí pueden poner el titulo que quieran</a> </div>

Ejemplo:

Aquí pueden poner el titulo que quieran