Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje27-05-2011, 22:10 (UTC)    
Título del mensaje: Efecto zoom en las Imágenes

Un gran efecto en las imagenes sin duda es el zoom, sobre todo en aquellas imagenes grandes, este efecto permite agrandar una imagen al contorno de la ventana y poder verla con mas detalle:
EJEMPLO:
http://a-battle-games.es.tl/Efecto-Zoom-Imagenes.htm
El efecto tarda en cargar en mi web pero puedes verlo en este blog:
http://wixusimg.blogspot.com/


Código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
 dsettings: {
  magnifyby: 3, //default increase factor of enlarged image
  duration: 500, //default duration of animation, in millisec
  imgopacity: 0.2 //opacify of original image when enlarged image overlays it
  },
 cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
 zIndexcounter: 100,

 refreshoffsets:function($window, $target, warpshell){
  var $offsets=$target.offset()
  var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
  warpshell.attrs.x=$offsets.left //update x position of original image relative to page
  warpshell.attrs.y=$offsets.top
  warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
  warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
  if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
   warpshell.newattrs.x=winattrs.x+5
  }
  else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
   warpshell.newattrs.x=winattrs.x+5
  }
  if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
   warpshell.newattrs.y=winattrs.y+5
  }
 },

 magnify:function($, $target, options){
  var setting={} //create blank object to store combined settings
  var setting=jQuery.extend(setting, this.dsettings, options)
  var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
  var newattrs={}
  newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
  newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
  $target.css('cursor', jQuery.imageMagnify.cursorcss)
  if ($target.data('imgshell')){
   $target.data('imgshell').$clone.remove()
   $target.css({opacity:1}).unbind('click.magnify')
  }
  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
  $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
  $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
  $target.bind('click.magnify', function(e){ //action when original image is clicked on
   var $this=$(this).css({opacity:setting.imgopacity})
   var imageinfo=$this.data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
   var $clone=imageinfo.$clone
   $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
   .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
   function(){ //callback function after warping is complete
    //none added 
   }) //end animate
  }) //end click
  $clone.click(function(e){ //action when magnified image is clicked on
   var $this=$(this)
   var imageinfo=$this.data('$relatedtarget').data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
   $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
   function(){
    $this.hide()
    $this.data('$relatedtarget').css({opacity:1}) //reveal original image
   }) //end animate
  }) //end click
 }
};

jQuery.fn.imageMagnify=function(options){
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else if (this.complete){ //account for IE not firing image.onload
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else{
   $(this).bind('load', function(){
    jQuery.imageMagnify.magnify($, $imgref, options)
   })
  }
 })
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
 
 })

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
 var $targets=$('.magnify')
 $targets.each(function(i){
  var $target=$(this)
  var options={}
  if ($target.attr('data-magnifyto'))
   options.magnifyto=parseFloat($target.attr('data-magnifyto'))
  if ($target.attr('data-magnifyby'))
   options.magnifyby=parseFloat($target.attr('data-magnifyby'))
  if ($target.attr('data-magnifyduration'))
   options.duration=parseInt($target.attr('data-magnifyduration'))
  $target.imageMagnify(options)
 })
 var $triggers=$('a[rel^="magnify["]')
 $triggers.each(function(i){
  var $trigger=$(this)
  var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
  $trigger.data('magnifyimageid', targetid)
  $trigger.click(function(e){
   $('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
   e.preventDefault()
  })
 })
})


/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

//]]>
</script>



Ahora solo se agrega el siguiente codigo en donde quieras ver el efecto (En una Entrada ó un Gadget):
Código:
<img src="http://urldelaimagen.jpg" class="magnify" style="width:225px; height:150px" />


Espero les guste.

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por a-battle-games el Mie Nov 21, 2012 4:52 pm; editado 5 veces
Mensaje28-05-2011, 00:02 (UTC)    
Título del mensaje: Cierto

Olvide recordar que el efecto tarda en cargar como unos 40 seg o menos esque mi web tine muchas cosas por cargar si tu lo pones alomejor cargue mas rapido
Mensaje28-05-2011, 00:17 (UTC)    
Título del mensaje:

Ya vi el efecto en el blog, esta más actualizado y se ve más profecional.

Espero y traigas más aportes, gracias
______________
Off
Mensaje28-05-2011, 00:39 (UTC)    
Título del mensaje: Re: Efecto zoom en las Imagenes

muy bueno tu post me gusto salu2!!
______________
Visitar sitio web


Mensaje28-05-2011, 01:02 (UTC)    
Título del mensaje:

Hola!,

Bonito efecto de verdad también esta el de opacar las imágenes.
Mensaje28-05-2011, 17:11 (UTC)    
Título del mensaje:

Gracias por compartir el aporte! está muy claro y se puede aplicar bien.
______________

http://radiovijaer.es.tl/
Mensaje28-07-2011, 03:34 (UTC)    
Título del mensaje:

No entendi lo estoy haciendo pero nada que ver si me explican un poquito mas seria de gran ayuda

ya que coloco el text por ensima y la imagen en el portal y cuando le hago clic no hace el zoon porq sera?


Ultima edición por envcia2 el Jue Jul 28, 2011 12:12 am; editado 1 vez
Mensaje18-08-2011, 01:04 (UTC)    
Título del mensaje: Ola quisiera saber donde va el codigo

quisiera saber donde va este script donde coloco este codigo dentro de donde si se tiene que acoplar con algo porque lo e puesto en todos lados pero nada no me da el efecto y yo quiero ese efecto para mi web gracias
y como hago que la imagen que quiero se agrande ?? gracias antemano
Mensaje01-02-2012, 15:27 (UTC)    
Título del mensaje:

Este tema ha sido promovido, ya que cumple las características para ello.

Información sobre promoción de temas a zonas dedicadas:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
(Los diseños o artículos, serán movidos a la zona de selección, si el moderador así lo considera)

saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group