Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/03/2010, 14:22
elmundoalreves
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 9 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto con jQuery?

Cita:
Iniciado por masterojitos Ver Mensaje
hahaha...... ahora si nos entendemos..... y por que no mostraste el link desde un inicio.

el funcionamiento de eso, en si es tener un div con una imagen de fondo.
cuando haces el over, aparece con fade otro div encima del anterior con la imagen respectiva y obviamente en el out, se desvanece y otra vez se visualiza el anterior fondo.

aqui te paso una libreria creado en base a jquery para crear eso amigo.

fade.js
Código Javascript:
Ver original
  1. // wrap as a jQuery plugin and pass jQuery in to our anoymous function
  2.     (function ($) {
  3.         $.fn.cross = function (options) {
  4.             return this.each(function (i) {
  5.                 // cache the copy of jQuery(this) - the start image
  6.                 var $$ = $(this);
  7.                
  8.                 // get the target from the backgroundImage + regexp
  9.                 var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
  10.  
  11.                 // nice long chain: wrap img element in span
  12.                 $$.wrap('<span style="position: relative; "></span>')
  13.                     // change selector to parent - i.e. newly created span
  14.                     .parent()
  15.                     // prepend a new image inside the span
  16.                     .prepend('<img border="0">')
  17.                     // change the selector to the newly created image
  18.                     .find(':first-child')
  19.                     // set the image to the target
  20.                     .attr('src', target);
  21.  
  22.                 // the CSS styling of the start image needs to be handled
  23.                 // differently for different browsers
  24.                 if ($.browser.msie || $.browser.mozilla) {
  25.                     $$.css({
  26.                         'border' : '0px',
  27.                         'position' : 'absolute',
  28.                         'left' : 0,
  29.                         'background' : '',
  30.                         'top' : this.offsetTop
  31.                     });
  32.                 } else if ($.browser.opera && $.browser.version < 9.5) {
  33.                     // Browser sniffing is bad - however opera < 9.5 has a render bug
  34.                     // so this is required to get around it we can't apply the 'top' : 0
  35.                     // separately because Mozilla strips the style set originally somehow...                    
  36.                     $$.css({
  37.                         'border' : '0px',
  38.                         'position' : 'absolute',
  39.                         'left' : 0,
  40.                         'background' : '',
  41.                         'top' : "0"
  42.                     });
  43.                 } else { // Safari
  44.                     $$.css({
  45.                         'border' : '0px',
  46.                         'position' : 'absolute',
  47.                         'left' : 0,
  48.                         'background' : ''
  49.                     });
  50.                 }
  51.  
  52.                 // similar effect as single image technique, except using .animate
  53.                 // which will handle the fading up from the right opacity for us
  54.                 $$.hover(function () {
  55.                     $$.stop().animate({
  56.                         opacity: 0
  57.                     }, 200);
  58.                 }, function () {
  59.                     $$.stop().animate({
  60.                         opacity: 1
  61.                     }, 200);
  62.                 });
  63.             });
  64.         };
  65.        
  66.     })(jQuery);
  67.    
  68.     // note that this uses the .bind('load') on the window object, rather than $(document).ready()
  69.     // because .ready() fires before the images have loaded, but we need to fire *after* because
  70.     // our code relies on the dimensions of the images already in place.
  71.     $(window).bind('load', function () {
  72.         $('img.fade').cross();
  73.     });
  74.    
  75.     //-->

para utilizarla.... debes previamente referenciar el jquery, luego a esta libreria (dale click a ver original y copia todo en un archivo js).....
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fade.js"></script>


y para utilzar el efecto es asi de sencillo.
<img src="imagen1.jpg" class="fade" style="background: url(imagen2.jpg)" />

y listo.

Suerte.
Hola masterojitos, como puedo hacer que un boton con las mismas caracteristicas que describiste, me abra una galeria emergente tipo shadowbox, ligthbox.
Porfa si me puedes ayudar soy novato en este tema.

saludos