PDA

Visualizza la versione completa : Conflitto tra librerie Ajax


stiffa
05-01-2011, 11:11
Ciao a tutti. Non essendo esperto di ajax.
Sto usando due script. Uno per far ruotare un banner :
http://spaceforaname.com/galleryview

mentre un altro per fare una pop up ingrandita dell'immagine.

http://phatfusion.net/multibox/

Questi due script sono favolosi. . . ma non riesco a farli funzionare entrambi sulla stessa pagina.

Analizziamo il codice del primo :

nell'head :


<link rel="stylesheet" type="text/css" href="banner_rotator/style.css" >

<script type="text/javascript" src="banner_rotator/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="banner_rotator/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="banner_rotator/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="banner_rotator/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 998,
panel_height:257,
frame_width: 100,
frame_height: 100

});
});
</script>

e nel body :


<div id="photos" class="galleryview" >

<div class="panel">
banner_rotator/foto/6.jpg
<div class="panel-overlay">
<h2>Biciclette elettriche</h2>


</p>
</div>
</div>
<div class="panel">
banner_rotator/foto/2.jpg
<div class="panel-overlay">
<h2>Monopattino elettrico</h2>


</p>
</div>
</div>
<div class="panel">
banner_rotator/foto/3.jpg
<div class="panel-overlay">
<h2>Scooter elettrici</h2>


</p>
</div>
</div>

<div class="panel">
banner_rotator/foto/4.jpg
<div class="panel-overlay">
<h2>Esposizione logiss</h2>


</p>
</div>
</div>
<div class="panel">
banner_rotator/foto/5.jpg
<div class="panel-overlay">
<h2>Trasportatore a catena, nastratrici, rulliera per pallet</h2>


</p>
</div>
</div>


<div class="panel">
banner_rotator/foto/1.jpg
<div class="panel-overlay">
<h2>Sollevatori manuali, transpallet, carrelli, piattaforme elevatrice</h2>


</p>
</div>
</div>





</div>





Analizziamo il codice del secondo:

nell'head


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="multiBox/lighter/Lighter.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
$$('code').light({
altLines: 'hover',
path: 'lighter/',
mode: 'ol',
fuel: 'js',
indent: 4
});
});
</script>


<link rel="stylesheet" href="multiBox/css/multibox.css" type="text/css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="css/multibox-ie6.css" type="text/css" media="screen" />
<![endif]-->
<script type="text/javascript" src="multiBox/js/overlay.js"></script>
<script type="text/javascript" src="multiBox/js/Assets.js"></script>
<script type="text/javascript" src="multiBox/js/multibox.js"></script>
<script type="text/javascript">

window.addEvent('domready', function(){
var box = new multiBox('mb', {
overlay: new overlay()
});

var advanced = new multiBox('advanced', {
overlay: new overlay(),
descClassName: 'advancedDesc'
});
});

</script>





e nel body :



<div id="basic">
multiBox/img/timg_5999.jpg (multiBox/img/img_5999.jpg)
multiBox/img/timg_6608.jpg (multiBox/img/img_6608.jpg)
multiBox/img/timg_8054.jpg (multiBox/img/img_8054.jpg)
</div>



Se metto entrambi i codici sulla stessa pagina , la popup ajax non funziona piu. Il banner funziona mentre la popup si presenta come apertura classica target="_blank" di un link.

Procedendo in maniera empirica.... ho provato a togliere questa riga :


<script type="text/javascript" src="banner_rotator/js/jquery-1.3.2.min.js"></script>


e ho notato che la popup(multibox) ha ripreso a funzionare....e chiaramente il banner ha smesso.

Non sapendo piu dove metter le mani ...invoco il vostro aiuto. come posso ovviare a cio' e usare entrambi gli script?

ciao e grazie

stiffa
05-01-2011, 23:18
up pls

cavicchiandrea
06-01-2011, 01:17
Se devi usare mootools e jquery (anche se io utilizzerei un solo framework) c' un escamotage per jquery denominato "noconflit" vedi sul sito.

stiffa
11-01-2011, 12:48
scusa....potresti essere piu specifico? magari parlando del mio caso?

Perche sto provando aggiungendo le righe di codice su questo sito :
http://api.jquery.com/jQuery.noConflict/


Non riesco a capire come modificare il mio di codice...o dove inserire il nuovo codice.

ciao graz

cavicchiandrea
11-01-2011, 12:50
Non conosco jquery cosi bene da essere pi preciso. :bh:

stiffa
11-01-2011, 16:29
qualcun altro? ho provato anche a sostituire al codice del banner rotator...quello che usa jquery .... il $ con jQuery tipo


$(document).ready(function(){ ==========>prima

jQuery(document).ready(function(){ ==========>dopo

per tutte i simboli $ trovati nello script.... pero' a livello di pagina index... non so se bisogna cambiarli anche nei file sorgenti dello script per il banner....


come in alcune letture che ho trovato in rete.... ma nulla...
con questo metodo funziona il banner rotator e non va piu il multibox

un consiglio?

oppure ancora piu facile magari conoscete un framework Ajax che fa tutto quello che farebbe al caso mio.

Semplicemente delle immagini thumbnail che scorrono con le freccette orizzontali e qual'ora cliccassi su una tmb l'immagine si ingrandisce con effetto a popup.

Qualcuno ha qualche dritta?

ciao e graz

stiffa
12-01-2011, 11:36
up?

Vindav
12-01-2011, 11:59
ti darei anche una mano, ma sinceramente non ho voglia di scaricarmi tutti quei js per fare le prove, e cmq non mi sembra cosi complesso l'uso del noConflict

stiffa
14-01-2011, 15:17
vindav...pls help me... non sono tanti i sorgenti...e' tutto qui in alto .... oppure se mi consigli una galleria che scorre, dove se clicco su una tmb si ingrandisce con effetto popup carino.... ti vorro' sempre bene

stiffa
14-01-2011, 15:42
niente . a posto. ho trovato una buona lettura

http://www.notodesign.it/jquery-e-mootools-con-no-conflict.html

e me la sono cavata usando una variabile cosi

var $j = jQuery.noConflict();


al posto di $


spero possa essere utile a qualcuno
ciaoo

Loading