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
zegarek84
post
Post #2





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
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
1 Użytkowników czyta ten temat (1 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: 3.10.2025 - 07:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn