Forum PHP.pl > [JS] jQuery.noConflict();

Pomoc - Szukaj - Użytkownicy - Kalendarz

krystian1991x

13.08.2010, 03:00:08

Witam mam poważny problem ... Konkretnie posiadam 2 skrypty JS
- qscroller_js
- jquery-lightbox-0.5

Teraz przejdę do problemu co się konkretnie dzieje ;/ Gdy wrzucam na stronę odnośniki do skryptów js skryptu jquery-lightbox-0.5 i qscroller razem w taki sposób

[HTML] pobierz, plaintext 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>    
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="qscroller.js"></script>
[HTML] pobierz, plaintext

to działa tylko skrypt pierwszy drugi niestety nie działa tak jak powinien bo zamiast otwierać dynamicznie w okienku nowym grafike to on otwiera nową strone z grafiką w zwykły sposób ...

gdy zrobię tak

[HTML] pobierz, plaintext 
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="qscroller.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>    
[HTML] pobierz, plaintext

Nie działa skrypt pierwszy ale za to działa skrypt numer 2 ;(

w związku z tym że nie ma sensu tutaj wpisywać długich kilometrów kodu podam linki do bezpośredniego zassania

jquery-lightbox-0.5 <--- POBIERZ
qscroller_js <--- POBIERZ

Dodam że próbowałem wielu wersji skryptu jquery-lightbox

elmozaur

13.08.2010, 08:08:03

proponuje zrob stronke testowa wystaw ja do pobrania to cos pokombinujemy.
Na pierwszy rzut oka powinno chodzic ok. Oczywiscie Doctype masz ustawione

kipero

13.08.2010, 09:13:50

http://api.jquery.com/jQuery.noConflict/
Warto się jednak zastanowić, czy potrzeba aż tyle JavaScriptu.

krystian1991x

13.08.2010, 10:35:39

kipero natrafiłem na coś podobnego niestety moja nikła znajomość angielskiego nie pozwoliła mi na dokładne zrozumienie co tam pisze a kopiowanie na pałe nie przyniosło rezultatów ;/

Dodam że używam smarty

Udało mi się zrobić aktualnie coś takiego

[HTML] pobierz, plaintext 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Aktualnosci</title>
	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
 
 
 
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <link href="shop.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="qscroller.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>   
 
 
       <script type="text/javascript">
       {literal}
        var $j = jQuery.noConflict();
                $j(document).ready(function(){
                        $j("#slider").easySlider();
                });
         {/literal}       
        </script>
</head>
[HTML] pobierz, plaintext

Pomimo tego skrypt pierwszy działa za to skrypt drugi nadal nie ... teraz mi nie znika nic przynajmniej ale i tak nie działa ;[

ja sie poddaje próbowałem już chyba wszystkiego co tylko przyszło mi do głowy lub znalazłem gdzieś w necie 3 pełne strony wyników przeszukałem w google i nic żadne rozwiązanie nie działa ani zamienianie w skrypcie $ na $j itp totalne dno ;(

MWL

13.08.2010, 10:41:22

trochę się wysil i poszukaj w necie czy mootools też ma rozwiązania bezkonfliktowości..
poza tym lightbox którego używasz pewnie korzysta z $() a nie z bezkonfliktowości (wystarczy że to zmienisz - wyszukaj i zamień wszystkie)

krystian1991x

13.08.2010, 10:50:03

ok fajnie ale na co zamienić ? próbowałem zamieniać w bibliotece jquery zmienić wszystkie $ na jQuery ale i tak nie pomoglo ;< Błagam o pomoc ... od 4 jeszcze nie poszedłem spać cały czas szukam rozwiązania przewertowałem naprawdę sporo stron kilka musiałem tłumaczyć na ojczysty język po przez różne tranzlatory więc nie wmawiajcie mi ze sie nie staram ...;(

krispak

13.08.2010, 13:42:16

W mootools nic nie zmieniaj a jedynie na samej gorze przed funkcja lightboxa dodaj jQuery.noConflict(); a w funkcji zamien wszystkie $ na jQuery, czyli dla przykladu

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
	// Use this example, or...
	jQuery('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	jQuery('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	jQuery('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	jQuery('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
[JAVASCRIPT] pobierz, plaintext

U mnie w cms pieknie smiga mootools i jquery razem

Pozdrawiam

krystian1991x

13.08.2010, 18:08:26

Działa świetnie ale pojawił się kolejny problem ;(

[HTML] pobierz, plaintext 
   <div class="hide">
 
{foreach from=$result key=myId item=products name=products}
{if $smarty.foreach.products.index%6 == 0}  
<div id="qs2" class="qslide2">
{/if}                    
   <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
 
       <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');"><table><tr><td><img src="templates/images/50.jpg"></td><td>
       <div id="gallery"><a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"><img border="0" src="templates/images/46.png"></a></div>
       </td></tr></table></div>
 
       <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;">{$products.link}</a> - {$products.title}</center></div>
   </div>
 
{if $smarty.foreach.products.index%6 == 5 || $smarty.foreach.products.last}  
</div>
 
{/if}
 
 
 
 {/foreach}
</div>
[HTML] pobierz, plaintext

gdy ten fragment

[HTML] pobierz, plaintext 
<div id="gallery"><a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"><img border="0" src="templates/images/46.png"></a></div>
 
[HTML] pobierz, plaintext

jest dodany w pętle to skrypt i tak nie działa a gdy ustawie po za pętle to działa jak trzeba więc jeszcze problem mam tylko z tym ;/

Jeszcze zauważyłem jedną rzecz w jaki kolwiek link nie kliknę to otwiera się duża wersja obrazka ...

krispak

13.08.2010, 19:21:13

1. W petli powielasz diva

[HTML] pobierz, plaintext 
<div id="gallery">
[HTML] pobierz, plaintext

Zamiast $('#gallery a').lightBox(); uzyj rel="ligtbox" czyli

[HTML] pobierz, plaintext 
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar." rel="lightbox">
[HTML] pobierz, plaintext

2. Nie wklejami wszystkiego bezmyslnie

[JAVASCRIPT] pobierz, plaintext 
jQuery('a').lightBox(); // Select all links in the page
[JAVASCRIPT] pobierz, plaintext

ta linijka mowi dlaczego masz wszedzie obrazy.
Skroc to co podalem wczesniej do takiej postaci

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
	// Use this example, or...
	jQuery('a[@rel*=lightbox]').lightBox();
});
</script>
[JAVASCRIPT] pobierz, plaintext

i bedzie ok
Pozdrawiam

krystian1991x

13.08.2010, 23:00:15

cholerka zrobiłem tak jak napisałeś ale nie działa teraz nie powiększa żadnych obrazków

nawet tych które powinno

tak się dzieje tylko gdy jest w pętli zauważyłem bo dałem po za nią i działało ... ;/

krispak

13.08.2010, 23:11:35

Pokaz kod jak zmieniles..

krystian1991x

21.08.2010, 10:07:49

[HTML] pobierz, plaintext 
    <!-- Ativando o jQuery lightBox plugin -->
       <script type="text/javascript">
    {literal}
jQuery.noConflict();
jQuery(function() {
	// Use this example, or...
	jQuery('a[@rel*=lightbox]').lightBox();
});
 {/literal}
    </script>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
   <div id="qscroller2"  class="qscroller"></div> 
   <div class="hide">
 
{foreach from=$result key=myId item=products name=products}
{if $smarty.foreach.products.index%6 == 0}  
<div id="qs2" class="qslide2">
{/if}                    
   <div style="margin-left: 15px;height: 185px; width: 279px; float: left;">
 
       <div style="padding-left: 31px;padding-top: 11px;width: 376px; height: 140px; background-repeat: no-repeat; background-image: url('templates/images/49.png');">
  <table><tr><td><img src="templates/images/{$products.img_small}"></td><td>
    <a href="templates/images/{$products.img_small}" title="{$products.title}" rel="lightbox"><img border="0" src="templates/images/46.png"></a>
 </td></tr></table></div>
 
       <div style="padding-left: 22px; margin-bottom: 2px; font-family: Tahoma; font-size: 10px; color: #315b06;"><center><a href=""  style="color: #FFFFFF;" >{$products.link}</a> - {$products.title}</center></div>
   </div>
 
{if $smarty.foreach.products.index%6 == 5 || $smarty.foreach.products.last}  
</div>
 
{/if}
 
 
 
 {/foreach}
</div> Tak jak pisałem wyżej gdy jest po za foreach to wtedy działa bez zarzutu 
[HTML] pobierz, plaintext

Nikt nie pomoże ?

nikt nie pomoże bracie mój gdy na tronie siedzi ....

Kluczem jest class="qslide2" tylko gdy tam wstawiam link z refem to tak się dzieje że nie działa. Próbowałem już innych skryptów ale każdy jaki znajduje jest oparty o jquery itp i wszystkie działają normalnie dopóki nie znajdą się w tym kluczowym divie o tej klasie o której wcześniej wspomniałem.

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.