Problematyczny Lightbox w Bloggerze

Kliknięcie zdjęcia lub obrazu zamieszczonego na blogu powoduje wyświetlenie go w nakładce na stronie. Jest to tzw. widok Lightbox. (cf. Widok Lightbox w Bloggerze):

<div>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6xuLcKQQ-_ccqmRlM7tjekEMVB4Jgx2UvxS8wqL5154fLo383vlvKYmL4wvghW9wCu6nIyGyvW5eyEv4TNkScK3qc0zGJxZ4EOAC7Pb0YWWnBFGpDgcrmXwqNFP1au-D_nwrdBMPd78N/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6xuLcKQQ-_ccqmRlM7tjekEMVB4Jgx2UvxS8wqL5154fLo383vlvKYmL4wvghW9wCu6nIyGyvW5eyEv4TNkScK3qc0zGJxZ4EOAC7Pb0YWWnBFGpDgcrmXwqNFP1au-D_nwrdBMPd78N/s128/epl313_6040342.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MsKjD61FOS9mOciTMc2srBAy9YeDnFfq05r_PPhFA8-psqNilfs5hkET159ViIBg07tw9kJBFT2Yy-aI7KplfVUNvmICu07pwX0Q2UPiQenTfmKh11P_ZrAs1_aRZjdeDiHTOyyy-gu6/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MsKjD61FOS9mOciTMc2srBAy9YeDnFfq05r_PPhFA8-psqNilfs5hkET159ViIBg07tw9kJBFT2Yy-aI7KplfVUNvmICu07pwX0Q2UPiQenTfmKh11P_ZrAs1_aRZjdeDiHTOyyy-gu6/s128/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA059OOx8ZLS7XqpiZ94iAZ7fdepsU3VAnGCeZ01SiDImelMrjHZwBd5g_o9shvBVB4Ut6x-_cfDrT51VvTc8KuQ7VlCYcZhOr0kEFenfurTKIs_rescLpAKu3-QbCtdwMmDEFaehvU3FM/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA059OOx8ZLS7XqpiZ94iAZ7fdepsU3VAnGCeZ01SiDImelMrjHZwBd5g_o9shvBVB4Ut6x-_cfDrT51VvTc8KuQ7VlCYcZhOr0kEFenfurTKIs_rescLpAKu3-QbCtdwMmDEFaehvU3FM/s128/epl313_6040339.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jT3S-QbEQ4sUexmIQoryhbi2C53tWrO0yHFrZyhRI-Q3naU_KxDipx0005eXd5t6WTgGwcpHnPDJyYWSG1en1R7aEmtpFxkJbc0tRWjQj3lr2_jNtfNn9B-FAVrtLenz8qLyizwxvOq1/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jT3S-QbEQ4sUexmIQoryhbi2C53tWrO0yHFrZyhRI-Q3naU_KxDipx0005eXd5t6WTgGwcpHnPDJyYWSG1en1R7aEmtpFxkJbc0tRWjQj3lr2_jNtfNn9B-FAVrtLenz8qLyizwxvOq1/s128/epl313_6040332.jpg" /></a>
</span>
</div>

Wynik jest następujący (kliknij w zdjęcie aby przejść do widoku Lightboksa):

W powyższym przykładzie zawartość atrybutów href i src jest prawie identyczna, bo różni się wyłącznie fragmentem s128/. Jest to przykład zastosowania sprytnego URLa, który spowoduje automagiczne przeskalowanie zdjęcia, tak aby dłuższy wymiar miał maksymalnie 128 pikseli. Jeżeli zamiast s128/ wstawimy s128-c/ albo s128-p/, to spowoduje to automagiczne wycięcie kwadratu o wymiarach maksymalnych 128 pikseli (crop). Przykład:

<div>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="http://lh3.ggpht.com/…/s128-c/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="http://lh3.ggpht.com/…/s128-p/epl313_6040338.jpg" /></a>
</span>

Symbolem … oznaczono pominiętą część URLa (żeby nie wystawał na margines).

Wynik (kliknięcie w zdjęcie nie powoduje przejścia do widoku Lightboksa):

BTW: Liczba 128 nie jest magiczna, można przeskalować obrazek na inny wymiar.

Jeżeli zdjęcia są różnych wymiarów (portret/pejzaż), to s128-c/ (albo s128-p/) jest lepsze niż zwykłe s128, bo minaturki są jednakowej wielkości, tyle że Lightbox takie zdjęcia ignoruje. Czemu -- nie wiem... Nie wiem też jak to zmienić

Jako obejście problemu można przeskalować miniaturkę do jednakowej wysokości. Przykład:

<div>
<span>
<a href="https://lh4.googleusercontent.com/…/epl313_6040342.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="https://lh4.googleusercontent.com/…/s128/epl313_6040342.jpg" /></a>
</span>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh3.ggpht.com/…/s128/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="http://lh6.ggpht.com/…/epl313_6040339.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh6.ggpht.com/…/s128/epl313_6040339.jpg" /></a>
</span>
<span>
<a href="http://lh5.ggpht.com/…/epl313_6040332.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh5.ggpht.com/…/s128/epl313_6040332.jpg" /></a>
</span>
</div>

Symbolem … oznaczono pominiętą część URLa (żeby nie wystawał na margines).

Wynik jest następujący:

Kliknięcie w zdjęcie powoduje przejście do widoku Lightboksa.

Być może za czas jakiś problem zniknie. Wyświetlanie dla tego wpisu 10 zamiast 8 obrazków w widoku Lightboksa będzie tego dowodem:-)