Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Konflikt
Forum PHP.pl > Forum > Przedszkole
krystian1991x
21.08.2010, 20:32:04
Więc tak zacznę od tego że problem z konfliktem bibliotek js został rozwiązany i obydwa skrypty pięknie działają. Problem zaczyna się gdy chce je namówić do współpracy a konkretnie gdy jeden umieszczę w drugim. Jeszcze tylko podam z jakich bibliotek korzystam i podam kod i objaśnię wszystko bardziej obszernie winksmiley.jpg

jquery-lightbox-0.5
qscroller_js

Jeszcze jedna ważna informacja to fakt że korzystam ze znanego systemu szablonów zwanego Smarty

plik.tpl

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  5.     <title>Aktualnosci
  6.     </title>
  7.     <link href="shop.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="mootools.js"></script>
  9. <script type="text/javascript" src="qscroller.js"></script>     	
  10.     <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />       
  11.     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />           
  12. <script type="text/javascript" src="js/jquery.js"></script>     
  13. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>     
  14.     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />     
  15.     <!-- Ativando o jQuery lightBox plugin -->             
  16. <script type="text/javascript">
  17.     {literal}
  18. jQuery.noConflict();
  19. jQuery(function() {
  20. 	// Use this example, or...
  21. 	jQuery('a[@rel*=lightbox]').lightBox();
  22. });
  23.  {/literal}
  24.     </script>         
  25.   </head>
  26.   <body>      {include file="top.tpl"}   
  27.     <div id="site"> 
  28.       <div style="background-image: url('templates/images/02.jpg'); background-repeat: no-repeat;"> 
  29.         <div id="bg_site">
  30.           <div style="padding-top: 20px; margin-left: 120px;">
  31.             <div style="padding-right: 7px;padding-top: 100px;float: left;">
  32.               <a id="go-prev" href="java script:void(0)">
  33.                 <img border="0" src="templates/images/37.jpg"></a>
  34.             </div>         
  35.             <div style="height: 203px; float: left;">         
  36.               <div id="qscroller2"  class="qscroller">
  37.               </div>     
  38.               <div class="hide">                          {foreach from=$result key=myId item=products name=products}    {if $smarty.foreach.products.index%6 == 0}      
  39.                 <div class="qslide2">{/if}                        
  40.                   <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">               
  41.                     <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">  
  42.                       <div>
  43.                         <img src="templates/images/{$products.img_small}">
  44.                       </div>               
  45.                       <div> 
  46.                         <a href="templates/images/{$products.img_small}" title="{$products.title}" rel="lightbox">
  47.                           <img border="0" src="templates/images/46.png"></a>               
  48.                       </div>         
  49.                     </div>              
  50.                     <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;">
  51.                       <center>
  52.                         <a href=""  style="color: #FFFFFF;" >{$products.link}</a> - {$products.title}
  53.                       </center>
  54.                     </div>   
  55.                   </div>   {if $smarty.foreach.products.index%6 == 5 || $smarty.foreach.products.last}   
  56.                 </div> {/if} {/foreach} 
  57.               </div>
  58.             </div> 
  59.           </div>  
  60.           <div style="padding-top: 100px; margin-left: 28px; float: left;">
  61.             <a id="go-next" href="java script:void(0)">
  62.               <img border="0" src="templates/images/38.jpg"></a>
  63.           </div>
  64. <script type="text/javascript">
  65. {literal}
  66. window.addEvent('domready', function() {
  67. var opt = {
  68.     slides: 'qslide2',
  69. 	duration: 1500,
  70.     buttons: {next:'go-next',prev:'go-prev'},
  71.     transition: Fx.Transitions.Quint.easeOut
  72.   }
  73.   var scroller = new QScroller('qscroller2',opt);
  74.   scroller.load();
  75. });
  76. {/literal}
  77. </script>
  78.         </div> 
  79.       </div> {include file="bottom.tpl"} 
  80.   </body>
  81. </html>
[HTML] pobierz, plaintext


Teraz kilka ważnych uwag odnośnie działania skryptu. Skrypt pobiera wszystkie produkty z bazy danych które są przetwarzane przez pętlę a następnie przypisywane do odpowiednich zmiennych następnie wszystkie produkty wczytywane są do tego diva 
[HTML] pobierz, plaintext 
  1. <div id="qscroller2"  class="qscroller"></div>
[HTML] pobierz, plaintext

które w divie mają nadaną klasę qslide2
[HTML] pobierz, plaintext 
  1. <div class="qslide2">
[HTML] pobierz, plaintext

Dlatego wszystko też musi znajdować się w tym divie smile.gif.

Aktualnie chce zrobić aby po kliknięciu obrazka "zobacz" pokazało mi ładnie za pomocą skryptu js pokazało mi powiększoną wersje tego obrazka. Więc zrobiłem to tak 
[HTML] pobierz, plaintext 
  1. <a href="templates/images/{$products.img_small}" title="{$products.title}" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
[HTML] pobierz, plaintext

I wiecie co działa wszystko pięknie ale tylko gdy nie znajduje się w divie z nadaną klasę qslide2 Niestety musi on być jak wcześniej pisałem gdzie indziej nie miało by to sensu i teraz pytanie do was Dlaczego tylko w tym divie o tej klasie nie działa a wszędzie indziej gdzie umieszczenie tego nie ma sensu działa ?


withstupidsmiley.gif

Nie ma mądrych ?!
vokiel
21.08.2010, 21:15:57
Otwórz sobie firebuga i zobacz co się dzieje po załadowaniu dokumentu. Pewnie jeden skrypt zmienia zawartość tego div'a, a przez to drugi nie może działać (bo zawartość jest inna niż wczytał na początku).

BTW. Masz to może gdzieś na żywo?
BTW2. Może poszukaj qscroller'a pod jQuery
krystian1991x
21.08.2010, 22:06:40
Mam to na żywo Tutaj Szukałem ale nic ciekawego nie znalazłem Firebug chyba nic nie znalazł ale jeżeli masz opcje to nie zaszkodzi jak ty sprawdzisz bo ja dopiero co ten program zainstalowałem i nie czaje go do końca jeszcze
vokiel
21.08.2010, 22:20:41
Jak w firebugu, po załadowaniu strony dodasz ten kod jQuery, to zadziała. Więc, możliwe są dwie opcje:

1. Poprawiony kod
[JAVASCRIPT] pobierz, plaintext 
  1. jQuery.noConflict();
  2. jQuery(document).ready(function() {
  3. 	jQuery('a[@rel*=lightbox]').lightBox();
  4. });
[JAVASCRIPT] pobierz, plaintext

2. A ustaw wywołanie jQuery lightbox'a na końcu, za blokiem window.addEvent('domready', function() {}.
krystian1991x
21.08.2010, 22:26:12
Poprawiłem i zrobiłem tak jak chciałeś ale nic to nie dało możesz sprawdzić nic nie zmieniam do następnego twojego posta
everth
21.08.2010, 22:33:25
Co dziwne lightbox chodzi kiedy wywoła się go ręcznie z konsoli po załadowaniu strony. Może wyeliminuj ten kawałek z addEvent(domready) i kod inicjalizujący qScroller przenieś do jQuery(document).ready(). Jeśli nie zadziała to przynajmniej uprości sprawę.
krystian1991x
21.08.2010, 22:40:13
no i się zawieruszyłem z tym nie wiem co mam w końcu zrobić ;/
vokiel
22.08.2010, 09:48:18
A jak dasz wywołanie jQuery za tym window.addEvent. Umieść to dalej w dokumencie.
zegarek84
22.08.2010, 10:34:27
banalny problem ;D - zmień nazwy tym obrazkom - w operze w kodzie wystarczyło, jak dodałem parametr get inny coby nazwy nie były takie same i zadziałało ;p - chociaż nadmiar info niżej to zamieszczę kodzik [a i przed doctype nie powinno być żadnych znaków ;p] - wychodzi post za długi to tylko fragment z obrazkami ;p :
[HTML] pobierz, plaintext 
  1. <div class="qslide2">
  2.  
  3.    <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
  4.  
  5.        <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  6.   <div><img src="templates/images/50.jpg"></div>
  7.  
  8.  
  9.  
  10.   <div> <a href="templates/images/50.jpg?1" title="Numer 1" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
  11.  
  12.        </div>
  13.  
  14.  </div>
  15.               <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >www.google.pl</a> - Numer 1</center></div>
  16.    </div>
  17.  
  18.  
  19.    <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
  20.  
  21.        <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  22.   <div><img src="templates/images/50.jpg"></div>
  23.  
  24.  
  25.  
  26.   <div> <a href="templates/images/50.jpg?2" title="Numer 2" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
  27.  
  28.        </div>
  29.  
  30.  </div>
  31.               <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >www.ogame.pl</a> - Numer 2</center></div>
  32.    </div>
  33.  
  34.  
  35.    <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
  36.  
  37.        <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  38.   <div><img src="templates/images/50.jpg"></div>
  39.  
  40.  
  41.  
  42.   <div> <a href="templates/images/50.jpg?3" title="Numer 3" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
  43.  
  44.        </div>
  45.  
  46.  </div>
  47.               <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >www.cycyk.pl</a> - Numer 3</center></div>
  48.    </div>
  49.  
  50.  
  51.    <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
  52.  
  53.        <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  54.   <div><img src="templates/images/50.jpg"></div>
  55.  
  56.  
  57.  
  58.   <div> <a href="templates/images/50.jpg?4" title="Numer 4" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
  59.  
  60.        </div>
  61.  
  62.  </div>
  63.               <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >www.hefaj.pl</a> - Numer 4</center></div>
  64.    </div>
  65.  
  66.  
  67.    <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
  68.  
  69.        <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  70.   <div><img src="templates/images/50.jpg"></div>
  71.  
  72.  
  73.  
  74.   <div> <a href="templates/images/50.jpg?5" title="Numer 5" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
  75.  
  76.        </div>
  77.  
  78.  </div>
  79.               <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >www.dary.com</a> - Numer 5</center></div>
  80.    </div>
  81.  
  82. </div>
  83.  </div>
  84. </div>
  85.  </div>
[HTML] pobierz, plaintext
krystian1991x
22.08.2010, 12:25:37
vokiel dalej nic ale jak jest po staremu to wszędzie działa tylko nie tam gdzie powinno czyli np jak umieszcze to w tym samym pliku poza divem o klasie qslide2. Co do zmiany nazw obrazków dodałem GET tak jak chciałeś 
[HTML] pobierz, plaintext 
  1. <div> <a href="templates/images/{$products.img_small}?{$products.id}" title="{$products.title}" rel="lightbox"><img border="0" src="templates/images/46.png"></a> </div>
[HTML] pobierz, plaintext


jak widzisz nic to nie pomogło smile.gif a i przed DOCTYPE nie mam żadnych znaków winksmiley.jpg Dodam że bez tego GET jak umieszcze obrazki o takiej samej nazwie poza divem to też działa

blinksmiley.gif
zegarek84
22.08.2010, 13:03:39
Cytat(krystian1991x @ 22.08.2010, 13:25:37 ) *
...a i przed DOCTYPE nie mam żadnych znaków winksmiley.jpg Dodam że bez tego GET jak umieszcze obrazki o takiej samej nazwie poza divem to też działa
tak ciężko na stronie nacisnąć crlt+u?questionmark.gif

fakt - jak się okazało to to zależało od stanu załadowania dokumentu i problem dokładnie masz w QScroller czyli w tym scrolerze - nie jest on oparty raczej na dom gdyż jeśli udało mi się wymusić by ligthbox działał to po użyciu scrolera [strzałki] i nawet po powrocie nie działał już ligthbox - on tworzy sobie nowy chyba obiekt przez innerhtml - zresztą mało istotne, nawet po zmianie kolejności skryptów po użyciu scrolera nie działa...
krystian1991x
22.08.2010, 13:09:58
Jakieś propozycje bo ja kompletnie nie wiem co mam zrobić w tym momencie sciana.gif
everth
22.08.2010, 13:25:57
Najprostsze rozwiązanie - przestań mieszać biblioteki. Albo zdecyduj się na używanie tylko Mootools i zostań przy qScroller albo zdecyduj się na jQuery i poszukaj sobie zamiennika qSscroller w jQuery -> np. w tym wątku. Ułatwi ci to życie w przyszłości.
krystian1991x
22.08.2010, 13:42:16
za dużo zmian by to wymagało ... Nawet nie wiesz ile się namęczyłem nad tym heh a tak na marginesie do kitu jquery ma scrola
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.