Jak to zrobić.
1. Po załadowaniu strony, najlepiej załadować wszystkie Image do obiektu new Image no i pakować do jakieś tablicy by nie robić zbędnego bałaganu. Jeżeli zachodzi potrzeba radzę użyć AJAX.
1. Tworzymy zdarzenie click (i tu zalecam wykorzystać funkcję anomimową , która będzie pobierała id zdjęcia, które będzie potrzebne do funkcji która reaguje na to zdarzenie) , do jakieś elementu (lub grupy elementów) lub jeśli ładujemy za pomocą AJAX. Tworzyć to zdarzenie dopiero po załadowaniu zdjęć do cache.
2.Następnie po zdarzeniu tworzymy za pomocą JS element HTML który pokryje całą stronę i bodajże daje się właściwości background , ale rgb i jakieś opacity, pozycjonowanie absolutne, wcześniej sprawdzamy czy taki element nie został już utworzony.
3.Tworzymy kolejny element HTML z pozycjonowaniem fixed/sticky , a dokładne kordynaty jego pozycji pobierzemy (szerokośc strony => document.width) i (wysokośc strony => document.height , choć nie jestem pewny czy on nie pobierze całej wysokości (nas interesuje tylko do dolnego pasku). Dokładna pozycja elementu w którym się wyświetli obrazek =>naszElementwKtoymBedzieObrazek.style.position.left = docuement.width/2 - (naszELementwKtorymBedzieObrazek.width/2) i to samo z pozostałymi pozycjami , no trochę tu trzeba pokombinować.
4.Element img tworzymy ładujemy nasze zdjęcia z tablicy. I voila.
Troszeczkę jest tego pisania.
A tu Gotowe rozwiązanie:
Użyj Lightbox , możebyć z jQuery:
http://lokeshdhakar.com/projects/lightbox2/