<OBJECT> to tag pozwalający na osadzanie np. obiektów multimedialnych na stronach WWW - najczęściej spotykamy się z nim np. na YouTube, gdzie w ten sposób osadzany jest odtwarzacz Flash.
Internet Explorer w wersji 6 radośnie ignoruje sobie ten tag i wymaga zastosowania tagu <EMBED> dlatego często obiekty osadzane są tak jak poniżej:
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/sDsAPMhuABU&hl=pl_PL&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/sDsAPMhuABU&hl=pl_PL&fs=1" type="application/x-shockwave-flash" width="480" height="295" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Dzięki zastosowaniu takiej notacji, zarówno IE6 jak i nowsze przeglądarki poprawnie wyświetlają daną treść. Oczywiście, żeby nie było różowo, są i tutaj haczyki - jeden właśnie spowodował zmarnowanie 30 minut mojego życia.
O ile jak już wcześniej wspomniałem IE6 przy napotkaniu tagu <OBJECT> w HTML zignoruje go, o tyle przetworzy jego zawartość i wyświetli dane z <EMBED> o tyle zupełnie inaczej ma się to z obiektami dynamicznie wstawianymi do DOMu poprzez Java Script - w takim wypadku IE6 ignoruje zarówno <OBJECT> jak i całą jego zawartość. Rozwiązaniem w takim wypadku jest "wyłuskanie" <EMBED> ze wstawianego kodu HTML i wyświetlenie tylko tego jednego znacznika dla IE6.
LightBox 2 to popularne rozwiązanie pozwalające na pokazywanie powiększeń zdjęć bez konieczności otwierania nowego okna. Poprzez osadzenie skryptu i prostą modyfikację już istniejącego kodu otrzymujemy galerię która działa od ręki.
Problemy pojawiają się dopiero kiedy chcemy zmodyfikować działanie. Klient zamówił w firmie wykonanie serwisu dla pośrednika w obrocie nieruchomości. Każda oferta zawiera zdjęcia w 3 wymiarach - miniaturka (1), zdjęcie główne (2) i zdjęcie powiększone. Po kliknięciu w miniaturkę ładuje się jej wersja "główna" w miejsce zdjęcia 2, zaś po kliknięciu w zdjęcie 2 ładuje się powiększenie Lightboxem. Dodatkowo, użytkownik ma możliwość nawigowania pomiędzy zdjęciami w Lightbox za pomocą dostarczanego przezeń interfejsu.
Jak już wspomniałem, Lightbox działa od ręki - wystarczy do linków od powiększeń obrazków dodać atrybut rel="lightbox" dla pojedynczego powiększenia, lub rel="lightbox" dla grupy powiększeń. Niestety, zachowanie do nadpisuje akcję onclick przez co psuje już działający mechanizm przejścia zdjęcia z pozycji 1 na 2. Rozwiązaniem jest modyfikacja pliku lightbox.js, a dokładniej funkcji start() i end() wywoływanych odpowiednio przed i po wyświetleniu powiększenia. Dodatkowo, obrazki, które chcemy umieścić w galerii nie powinny posiadać odnośnika z parametrem rel, akcja podmiany obrazka 2 na 1 powinna znajdować się w onclick obrazka oraz musimy mieć możliwość ich łatwej identyfikacji (np. przez nadanie ich odnośnikom klasy isLightbox). Ok, zabieramy się za modyfikowanie lightbox.js:
//Zmodyfikowana metoda start():
start: function(imageLink) {
var im = document.getElementsByTagName('A');
for(var i = 0, j = im.length ; i < j ; i++) {
if(im[i].className == 'isLightbox') im[i].setAttribute('rel', 'lightbox[1]');
}
this.updateImageList();
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// dalsza część bez zmian
//Zmodyfikowana metoda end():
end: function() {
var im = document.getElementsByTagName('A');
for(var i = 0, j = im.length ; i < j ; i++) {
if(im[i].className == 'isLightbox') im[i].setAttribute('rel', '');
}
this.updateImageList();
// dalsza część bez zmian
Pierwsza dokonana przez nas modyfikacja oznaczy wybrane obrazki jako korzystające z Lightbox oraz zaktualizuje kolekcję zdjęć w galerii. Druga zaś usunie oznaczenia i ponownie zaktualizuje kolekcję, co pozwoli nam na przywrócenie funkcjonalności ładowania powiększenia do widoku 2.
Zapewne jest łatwiejszy sposób na odnalezienie obrazków niż getElementsByTagName ale niestety nie używam Scriptaculous więc zastosowałem proste (i pewnie mało wydajne) rozwiązanie.
