Lightbox2 to bardzo ciekawa i pożyteczna aplikacja dzięki której w prosty sposób wyświetlamy obrazy na bieżącej stronie w powiększeniu. Jest bardzo prosta w instalacji i co najważniejsze działa we wszystkich nowych przeglądarkach. Na podstawie tego skryptu bazuje wiele innych. Mimo swoich zalet lightbox ma kilka braków, jednym z nich jest brak możliwości ustawienia maksymalnego powiększenia zdjęcia. Tym właśnie problemem się tu zajmiemy.

Thank you for reading this post, don't forget to subscribe!

A więc do dzieła:

Modyfikacje jakie wprowadziłem są zrobione do wersji lightbox v2.51

krok 1. – modyfikacja pliku lightbox.js

• Otwieramy plik lightbox.js
• szukamy linii z kodem “preloader.onload = function()”  – powinna znajdować sie gdzieś w okolicy 207 numeru linii
• zaraz po otwarciu nawiasu klamrowego wklejamy poniższy kod:

[code lang=”js”]

if (preloader.width > 800){

$b=preloader.width;
preloader.width = 800;
preloader.height=preloader.width * preloader.height / $b;

}

if ( preloader.height > 640){

$a=preloader.height;
preloader.height = 640;
preloader.width = preloader.width * preloader.height/$a;

}

[/code]

• w warunkach if (preloader.width > 800) oraz  if ( preloader.height > 640) wpisujemy nasze wartości (odpowiednio szerokość i wysokość ) jakie chcemy aby skalowany obraz nie przekraczał
• w liniach preloader.width = 800; oraz  preloader.height = 640; –  wpisujemy odpowiednio szerokość i wysokość  – na jaką dany obraz ma być powiększony.
• zapisujemy plik

krok 2. – modyfikacja pliku lightbox.css

• szukamy selektora ” #lightbox img “
• dopisujemy w nawiasy dodatkowe atrybuty

max-width:800px;
max-height:640px;

• wartości najlepiej jakby były identyczne z podanymi w kroku 1. u mnie to 800px oraz 640px.
• zapisujemy plik

Teraz wystarczy odświeżyć stronę (jeśli dzialamy na localhost) i już.
ps. zalecam wykonanie zapasowych plików przed wykonaniem wyżej wymienionych modyfikacji. – w razie gdyby  modyfikacja nie działała.