Odnośniki do obrazków będą zwykłymi tagami typu <a>. Po kliknięciu w odnośnik zostaną dodane dwie warstwy: zewnętrzna (overlay) i ta, na której wyświetlany jest obrazek (lightbox).
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Lightbox</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="scripts/myscript.js"></script> </head> <body> <h2>Nice cars list</h2> <ul> <li> <a href='/images/bmw_seria6.jpg' class='lightbox'>BMW Seria 6</a> <a href='/images/hyundai_genesis.jpg' class='lightbox'>Hyundai Genesis</a> <a href='/images/lexus_ct200h.jpg' class='lightbox'>Lexus Ct200h</a> <a href='/images/mercedes_slk.jpg' class='lightbox'>Mercedes SLK</a> <a href='/images/nissan_350z.jpg' class='lightbox'>Nissan 350z</a> </li> </ul> </body> <style> #lightbox_overlay { position:absolute; top:0; left:0; height:100%; width:100%; background:black url(spinner.gif) no-repeat scroll center center; } #lightbox { position:absolute; } </style> </html>
Overlay pozycjonowany jest absolutnie z wymiarami na 100%. Pozycję lightboxa wylicza się tak, aby trafił na środek ekranu. Animacja opacity daje efekt półprzezroczystej warstwy.
$(document).ready(function(){ $('a.lightbox').click(function(e) { $('body').css('overflow-y', 'hidden'); $('<div id="lightbox_overlay"></div>').css('top', $(document).scrollTop()) .css('opacity', '0') .animate({'opacity': '0.5'}, 'slow') .appendTo('body'); $('<div id="lightbox"></div>') .hide() .appendTo('body'); $('<img />') .attr('src', $(this).attr('href')) .load(function() { positionLightboxImage(); }) .click(function() { removeLightbox(); }) .appendTo('#lightbox'); return false; }); }); function positionLightboxImage() { var top = ($(window).height() - $('#lightbox').height()) / 2; var left = ($(window).width() - $('#lightbox').width()) / 2; $('#lightbox') .css({ 'top': top + $(document).scrollTop(), 'left': left }) .fadeIn(); } function removeLightbox() { console.log('asd'); $('#lightbox_overlay, #lightbox') .fadeOut('slow', function() { $(this).remove(); $('body').css('overflow-y', 'auto'); }); }
Brak komentarzy:
Prześlij komentarz