Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Konflikt, Pomimo udanego pogodzenia 2 bibliotek coś nie gra
krystian1991x
post
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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 ?


(IMG:style_emoticons/default/withstupidsmiley.gif)

Nie ma mądrych ?!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
krystian1991x
post
Post #2





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 (IMG:style_emoticons/default/smile.gif) a i przed DOCTYPE nie mam żadnych znaków (IMG:style_emoticons/default/winksmiley.jpg) Dodam że bez tego GET jak umieszcze obrazki o takiej samej nazwie poza divem to też działa

(IMG:style_emoticons/default/blinksmiley.gif)
Go to the top of the page
+Quote Post
zegarek84
post
Post #3





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 (IMG:style_emoticons/default/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?(IMG:style_emoticons/default/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...
Go to the top of the page
+Quote Post

Posty w temacie
- krystian1991x   [JavaScript] Konflikt   21.08.2010, 20:32:04
- - vokiel   Otwórz sobie firebuga i zobacz co się dzieje po za...   21.08.2010, 21:15:57
- - krystian1991x   Mam to na żywo Tutaj Szukałem ale nic ciekawego ni...   21.08.2010, 22:06:40
- - vokiel   Jak w firebugu, po załadowaniu strony dodasz ten k...   21.08.2010, 22:20:41
- - krystian1991x   Poprawiłem i zrobiłem tak jak chciałeś ale nic to ...   21.08.2010, 22:26:12
- - everth   Co dziwne lightbox chodzi kiedy wywoła się go ręcz...   21.08.2010, 22:33:25
- - krystian1991x   no i się zawieruszyłem z tym nie wiem co mam w koń...   21.08.2010, 22:40:13
- - vokiel   A jak dasz wywołanie jQuery za tym window.addEvent...   22.08.2010, 09:48:18
- - zegarek84   banalny problem ;D - zmień nazwy tym obrazkom - w ...   22.08.2010, 10:34:27
- - krystian1991x   vokiel dalej nic ale jak jest po staremu to wszędz...   22.08.2010, 12:25:37
|- - zegarek84   Cytat(krystian1991x @ 22.08.2010, 13:25...   22.08.2010, 13:03:39
- - krystian1991x   Jakieś propozycje bo ja kompletnie nie wiem co mam...   22.08.2010, 13:09:58
- - everth   Najprostsze rozwiązanie - przestań mieszać bibliot...   22.08.2010, 13:25:57
- - krystian1991x   za dużo zmian by to wymagało ... Nawet nie wiesz i...   22.08.2010, 13:42:16

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 15.10.2025 - 05:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn