jquery: wie man mehrere Leuchtkasten mit dem gleichen jquery Code baut?

Question

Wie können wir universelle Lichtbox machen i gleichen Code für alle Licht-Box-Funktion auf der Seite bedeuten hier JQuery

$(document).ready(function() { 

     $('.lightbox').click(function() { 
      $('.backdrop, .box').animate({ 
       'opacity': '.50' 
      }, 300, 'linear'); 
      $('.box').animate({ 
       'opacity': '1.00' 
      }, 300, 'linear'); 
      $('.backdrop, .box').css('display', 'block'); 
     }); 

     $('.close').click(function() { 
      close_box(); 
     }); 

     $('.backdrop').click(function() { 
      close_box(); 
     }); 

    }); 

    function close_box() { 
     $('.backdrop, .box').animate({ 
      'opacity': '0' 
     }, 300, 'linear', function() { 
      $('.backdrop, .box').css('display', 'none'); 
     }); 

} 

DEMO

Answer 1

Ihr Skript weiß nicht, welche Lightbox hochgezogen werden soll, weil Sie nie eine angeben. Eine Möglichkeit, den Leuchtkasten festzulegen, besteht darin, den Leuchtkasten id in einem der Attribute <a> festzulegen. Ziehen Sie dann bei einem Klick den Wert dieses Attributs und die Referenz mit $("#valuePulledFromAttribute") anstelle des generischen $('.backdrop, .box'), den Sie jetzt verwenden.

konnte ich mit einer Gabel kein HTML5 erstellen: http://jsfiddle.net/J6ee5/2/

$(document).ready(function() { 

$('.lightbox').click(function() { 
    var thisBox = $(this).attr("name"); 
    console.log(thisBox); 
    $('.backdrop,.' + thisBox).animate({ 
     'opacity': '.50' 
    }, 300, 'linear'); 
    $('.box').animate({ 
     'opacity': '1.00' 
    }, 300, 'linear'); 
    $('.backdrop,.' + thisBox).css('display', 'block'); 
}); 

$('.close').click(function() { 
    close_box(); 
}); 

$('.backdrop').click(function() { 
    close_box(); 
}); 

function close_box() { 
    $('.backdrop,.box').animate({ 
     'opacity': '0' 
    }, 300, 'linear', function() { 
     $('.backdrop,.box').css('display', 'none'); 
    }); 
}​ 
}); 

Answer 2

Eine Möglichkeit ist, Daten zu verwenden, als Selektoren Attribute http://jsfiddle.net/Q676T/1/

$(document).ready(function() { 

    $('.lightbox').click(function() { 
     var dataTag = $(this).data('tag'); 
     $('.backdrop') 
      .animate({'opacity': '.50'}, 300, 'linear') 
      .css('display', 'block'); 

     $('.box[data-tag='+dataTag+']') 
      .animate({'opacity': '1'}, 300, 'linear') 
      .css('display', 'block');  
    }); 

    $('.close, .backdrop').click(function() { 
     $('.backdrop, .box') 
      .animate({'opacity': '0'}, 300, 'linear', 
        function(){ $(this).css('display', 'none');}) 

    }); 
}); 

​