Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Lightbox + Flowplayer
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
zordon
Witam, mam następujący problem. Na stronie mam kilka niewielkich, generowanych dynamicznie galerii zdjęć, które można oglądać po kliknięciu w miniaturkę za pomocą Lightboxa(jquery.lightbox-0.5). W każdej galerii jest też możliwe dołączenie filmiku - otwieranego za pomocą flowplayera(flowplayer-3.1.1), w podobny sposób jak lightbox(odtwarzacz pojawia się w oknie na półprzezroczystym tle przysłaniającym treść strony). Niestety, te komponenty "gryzą się" ze sobą. Podejrzewam, że chodzi o zdarzenie onLoad - zdaje się, że lightbox również z niego korzysta. Po skomentowaniu linii window.onload = Laduj; w pliku kom.js działa lightbox, a nie reaguje flowplayer. W przeciwnym wypadku flowplayer działa ale zdjęcia otwierają się w przegladarce. Nie znam JS na tyle, żeby samemu sobie z tym poradzić...

Plik kom.js :



  1. <?php
  2. //komunikat - alert JS
  3.  
  4. function Kom(zm, wysokosc, tytul, tekst)
  5. {
  6. var bg = document.getElementById('alert_komunikat_bg');
  7. var okno = document.getElementById('alert_komunikat');
  8. var odtwarzacz = document.getElementById('player');
  9.  
  10. if(zm == 1)
  11. {
  12.     var przegladarka = navigator.userAgent;
  13.     przegladarka = parseInt(przegladarka.replace(/[^0-9]+/, ""));
  14.  
  15.     var szer1 = document.body.scrollWidth;
  16.     var wys1 = document.body.scrollHeight; //realna wysokość strony w oknie przegladarki
  17.  
  18.     var szer2 = window.outerWidth;
  19.  
  20.     if(przegladarka < 5)
  21.     {
  22.         document.documentElement.style.height = '100%';
  23.         document.body.style.height = '100%';
  24.         var wys2 = document.body.offsetHeight; //realna wysokość okna przegladarki IE
  25.     }
  26.     else
  27.         var wys2 = window.outerHeight; //realna wysokość okna przegladarki Firefox, Chrome, Opera
  28.          
  29.         //alert(szer1 + ' ' + wys1 + "\n" + szer2 + ' ' + wys2);
  30.  
  31.     if(szer1 > szer2)
  32.         var szer = szer1 + 'px';
  33.     else
  34.         var szer = '100%';
  35.      
  36.         wys2 -= 165; //korekta wysokości o 165
  37.      
  38.     var wys = 0;
  39.      
  40.     if(wys1 > wys2)
  41.         wys = wys1 + 'px';
  42.     else
  43.         wys = '100%';
  44.  
  45.  
  46.         //alert(szer + ' ' + wys);
  47.  
  48.     bg.style.display = 'block';
  49.     bg.style.width = szer;
  50.     bg.style.height = wys;
  51.     okno.style.display = 'block';
  52.     okno.style.top = wysokosc;
  53.     odtwarzacz.style.display = 'block';
  54.     odtwarzacz.style.visibility = 'visible';
  55. }
  56. else
  57. {
  58.     odtwarzacz.style.visibility = 'hidden';
  59.     odtwarzacz.style.display = 'none';
  60.     okno.style.display = 'none';
  61.     bg.style.display = 'none';
  62. }
  63.  
  64. }
  65.  
  66.  
  67. function Komunikat()
  68. {
  69.  
  70. var komunikat = '<div id="alert_komunikat_bg" onclick="Kom(0);"></div>' +
  71.     '<div id="alert_komunikat">' +
  72.     '<a href="filmy/xx.flv" id="player"></a>' +
  73.     '</div>';
  74. document.body.innerHTML += komunikat;
  75. }
  76.  
  77.  
  78.  
  79. function Laduj()
  80. {
  81. //wczytywanie kodu komunikatu
  82. Komunikat();
  83. }
  84. window.onload = Laduj;
  85. ?>




Wywołanie w pętli Smartów:

  1. <a href="#" title="Prezentacja filmowa" id="link{$biezacy.tytul}{$ii}" onclick="flowplayer('player', 'zzz/flowplayer-3.0.3.swf');Kom(1, '20%', '', '');">
  2. <img src="images/ico0.gif" alt="" style="display:block; margin: 3px 2px 0 0;" onmouseover="Slide3('min{$biezacy.tytul}{$ii}', 'minimg{$biezacy.tytul}{$ii}', '{$biezacy.tytul}');" />
erix
Cytat
Niestety, te komponenty "gryzą się" ze sobą. Podejrzewam, że chodzi o zdarzenie onLoad - zdaje się, że lightbox również z niego korzysta. Po skomentowaniu linii window.onload = Laduj; w pliku kom.js działa lightbox, a nie reaguje flowplayer. W przeciwnym wypadku flowplayer działa ale zdjęcia otwierają się w przegladarce. Nie znam JS na tyle, żeby samemu sobie z tym poradzić...

Najlepiej wrzuć gdzieś to do Sieci.

Ale możesz jeszcze spróbować:
Kod
window.onload = Laduj;

:
Kod
oldLoad = window.onload;
window.onload = function(){ oldLoad(); Laduj(); }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.