LightWindow 2 i problem z flashowymi bannerami

Korzystając z doskonałego skryptu tworzącego tak zwany LightWindow (http://mysticearth.wordpress.com/2007/07/12/lightwindow-2-available/), napotkałem na dość uciążliwy problem. Sprawa polega na tym, że okno podglądu tworzone jest dynamicznie po kliknięciu na link. Zanim wyświetlony zostanie podgląd zlinkowanego zasobu biblioteka generuję animację rozwijającą w dość atrakcyjny sposób okienko. Wszystko jest dobrze, aż do momentu kiedy animacja ta nie jest wyświetlana na stronie, która zawiera flashowe dodatki. Efekt jest taki, że wszystkie flasha znajdują się nad animowaną warstwą okienka podglądu. Ostateczny wygląd jest dosyć nieciekawy.

Rozwiązań problemu jest zapewne wiele, ale ostatecznie zdecydowałem się na metodę, polegającą na tym, że wszystkie elementy flashowe przed wywołaniem okienka light window są ukrywane, a po jego wyłączeniu na nowo pokazywane.

Aby osiągnąć taki efekt należy skorzystać z dobrodziejstw jakie daje nam biblioteka Prototype (standardowo dołączana do projektu).

  <script type="text/javascript">
     swfobject.embedSWF("<%= url %>", "banner_<%=  banner.id %>", "700", "100", "9.0.0");
  </script>

  <a href="http://<%= banner.url %>" style="position:relative;z-index:1;" class="banner">
     <div id="banner_<%=  banner.id %>" style="z-index:1;" >
      <p><img src="<%= @url_for_app +banner.plik.public_filename if banner.plik %>"/></p>
     </div>
  </a>

Uwaga: do osadzenia obiektu Flash została użyta biblioteka SWFObject (gorąco polecam).

Następnie modyfikujemy dwie funkcji w lightwindow.js. Szukamy następującej linijki:

   activate : function(e, link){  

Dla ułatwienia powiem że jest to linia 252 i na samym początku dodajemy następujący wiersz:

($$('.banner').invoke('hide'));

Następnie w funkcji dekatywacji (linia 277):

 deactivate : function(){

wstawiamy

       ($$('.banner').invoke('show'));

Dzięki takim kosmetycznym zmianom nasz problem został rozwiązany.