Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Konflikt, Pomimo udanego pogodzenia 2 bibliotek coś nie gra
krystian1991x
post 21.08.2010, 20:32:04
Post #1





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

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 ?!
Go to the top of the page
+Quote Post
vokiel
post 21.08.2010, 21:15:57
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

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


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
krystian1991x
post 21.08.2010, 22:06:40
Post #3





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
vokiel
post 21.08.2010, 22:20:41
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

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() {}.


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
krystian1991x
post 21.08.2010, 22:26:12
Post #5





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
everth
post 21.08.2010, 22:33:25
Post #6





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----

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ę.


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
krystian1991x
post 21.08.2010, 22:40:13
Post #7





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

no i się zawieruszyłem z tym nie wiem co mam w końcu zrobić ;/
Go to the top of the page
+Quote Post
vokiel
post 22.08.2010, 09:48:18
Post #8





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

A jak dasz wywołanie jQuery za tym window.addEvent. Umieść to dalej w dokumencie.


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
zegarek84
post 22.08.2010, 10:34:27
Post #9





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
krystian1991x
post 22.08.2010, 12:25:37
Post #10





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
zegarek84
post 22.08.2010, 13:03:39
Post #11





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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...


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
krystian1991x
post 22.08.2010, 13:09:58
Post #12





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

Jakieś propozycje bo ja kompletnie nie wiem co mam zrobić w tym momencie sciana.gif
Go to the top of the page
+Quote Post
everth
post 22.08.2010, 13:25:57
Post #13





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----

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.


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
krystian1991x
post 22.08.2010, 13:42:16
Post #14





Grupa: Zarejestrowani
Postów: 114
Pomógł: 0
Dołączył: 7.08.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 14:26
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn