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
vokiel
post
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
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: 13.10.2025 - 12:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn