Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-07-2011, 18:07 (UTC)    
Título del mensaje: Efecto de Galeria

Con este codigo puedes ver imagenes en tu web, sin necesidad de abrir nuevas pestañas.
Su uso es sencillo.
Para utilizar este codigo se necesita que un elemento HTML (img,a,div,etc,) posea el atributo galeria con el valor de la imagen que se desea cargar.

Ejemplo
Cita:
<a href="/tuenlace.htm" galeria="http://wtheme.webme.com/img/leute.gif" >Tu enlace</a>

<img src="tuimagen" galeria="http://wtheme.webme.com/img/leute.gif">



Si se trata de IMAGENES o ENLACES (IMG o A) no es necesario darle un valor a galeria ya que el codigo tomara el valor del HREF o SRC.

Cita:
<a href="http://wtheme.webme.com/img/leute.gif" galeria>Tu enlace texto</a>
<img src="http://wtheme.webme.com/img/leute.gif" galeria>


Codigo
(De preferencia coloquen el codigo en Texto por encima..)


Cita:
<!--Codigo http://adan-2994.es.tl/Galeria.htm -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script><script>$(function(){
var enl=$('[galeria]');
var fnd=$('div#fondoGaleria');
enl.click(function(e){var gl=$(this).attr('galeria');abreF();abreI();
if(this.tagName=='A'){e.preventDefault();if(gl==""){cargaImagen(this.href);return;}}
else if(this.tagName=='IMG'){if(gl==""){cargaImagen(this.src);return;}}
cargaImagen(gl);
});/* http://adan-2994.es.tl/Galeria.htm */
function cargaImagen(src){ var img=new Image();img.src=src;
$('div#centraGaleria img').attr('src',src);
img.onload=function(){
if(window.innerHeight>img.height){ $('div#centraGaleria').css({'top':(window.innerHeight/2-(img.height/2)),'position':'fixed'});}else{$('div#centraGaleria').css({'top':'0px','position':'absolute'});}
$('div#centraGaleria img').animate({'width':img.width,'height':img.height},300);
}
}
$('div#centraGaleria img').error(function(){cierraF();cierraI();});
function abreI(){$('div#centraGaleria').css('display','block');}
function cierraI(){ $('div#centraGaleria img').animate({'width':'80px','height':'80px'},300,function(){$('div#centraGaleria').css({'display':'none','top':'34%'});});}
$('div#fondoGaleria,div#centraGaleria').click(function(){cierraF();cierraI();}).mouseover(function(){window.status="Click para cerrar";});
function abreF(){fnd.css('display','block').animate({'opacity':1},300);}
function cierraF(){fnd.animate({'opacity':0},300,function(){$(this).css('display','none');});}
});</script>
<div id="fondoGaleria" title="Click para cerrar" style="display:none;opacity:0;z-index:99;background:rgba(10, 6, 6, 0.7216);position:fixed;top:0px;left:0px;width:300%;height:300%;"></div>
<div id="centraGaleria" title="Click para cerrar" style="display:none;width:100%;position:absolute;top:34%;left:0px;text-align:center;z-index:100;"><img alt="Cargando" style="width:80px;height:80px;"></div>
<!-- Fin del codigo galeria http://adan-2994.es.tl/Galeria.htm -->


Ultima edición por adan-2994 el Mar Jul 12, 2011 2:08 pm; editado 1 vez
Mensaje12-07-2011, 23:59 (UTC)    
Título del mensaje: Re: Efecto de Galeria

ami antes me decian . ¿Y la fuente ?
Mensaje13-07-2011, 00:20 (UTC)    
Título del mensaje: Re: Efecto de Galeria

brianpwg escribió:
ami antes me decian . ¿Y la fuente ?


Y te lo seguimos deciendo lol jaja

Salu2
______________
Miguel García | Desarrollador web freelance
Mensaje13-07-2011, 00:30 (UTC)    
Título del mensaje: Re: Efecto de Galeria

brianpwg escribió:
ami antes me decian . ¿Y la fuente ?

y que quieres decir con esto?
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG
Mensaje13-07-2011, 00:48 (UTC)    
Título del mensaje: Re: Efecto de Galeria

brianpwg escribió:
ami antes me decian . ¿Y la fuente ?

y yo digo
fuente: http://adan-2994.es.tl/Galeria.htm

______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje13-07-2011, 03:06 (UTC)    
Título del mensaje:

Buen aporte Adan lo creastes tu cierto?
______________
Off
Mensaje13-07-2011, 05:03 (UTC)    
Título del mensaje:

fafo-ayuda escribió:
Buen aporte Adan lo creastes tu cierto?
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group