[RISOLTO] Conflitto jQuery - $.noConflict();

8 contenuti / 0 new

Accedi o registrati per inserire commenti.

Ultimo contenuto

Sab, 30/07/2011 - 16:52

kipper

[RISOLTO] Conflitto jQuery - $.noConflict();

ciao a tutti!
ho una galleria immagini in jQuery da inserire in un nodo...

nell'head di page.tpl.php inserisco:

<head>
<link rel="stylesheet" href="css/svwp_style.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/jquery.slideViewerPro.1.0.js" type="text/javascript"></script>
<!-- Optional plugins  -->
<script src="js/jquery.timers.js" type="text/javascript"></script>
<!-- Syntax hl -->
<script src="js/jquery.syntax.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
	$("div#gallery").slideViewerPro({
		thumbs: 6,
		autoslide: false,
		asTimer: 3500,
		typo: true,
		galBorderWidth: 3,
		thumbsBorderOpacity: 0,
		buttonsTextColor: "#707070",
		buttonsWidth: 40,
		thumbsActiveBorderOpacity: 0.8,
		thumbsActiveBorderColor: "ff0000",
		shuffle: true
		});
		});
$(function(){
$.syntax({root: 'js/jquery-syntax/'});
});
</script>
</head>

e nel form di inserimento node/add metto il seguente codice:

<div id="gallery" class="svwp">
    <ul>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    </ul>
</div>

però mi da conflitto... c'è qualcosa che non va...

devo per forza installare il modulo jQuery???

suggerimenti/info per risolvere questo problema???

il file HTML funziona perfettamente:

<html>
<head>
<link rel="stylesheet" href="css/svwp_style.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/jquery.slideViewerPro.1.0.js" type="text/javascript"></script>
<!-- Optional plugins  -->
<script src="js/jquery.timers.js" type="text/javascript"></script>
<!-- Syntax hl -->
<script src="js/jquery.syntax.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
	$("div#gallery").slideViewerPro({
		thumbs: 6,
		autoslide: false,
		asTimer: 3500,
		typo: true,
		galBorderWidth: 3,
		thumbsBorderOpacity: 0,
		buttonsTextColor: "#707070",
		buttonsWidth: 40,
		thumbsActiveBorderOpacity: 0.8,
		thumbsActiveBorderColor: "ff0000",
		shuffle: true
		});
		});
$(function(){
$.syntax({root: 'js/jquery-syntax/'});
});
</script>
</head>
<body>
    <div id="gallery" class="svwp">
    <ul>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="immagini/005.jpg" /></li>
    </ul>
    </div> 
</body>
</html>

diciamo che il modulo jQueri UI etc... non l'ho mai approfondito... serve per forza quello???

l'errore me lo da sulla seguente funzione...

<script type="text/javascript">
$(window).bind("load", function() {
	$("div#gallery").slideViewerPro({
		thumbs: 6,
		autoslide: false,
		asTimer: 3500,
		typo: true,
		galBorderWidth: 3,
		thumbsBorderOpacity: 0,
		buttonsTextColor: "#707070",
		buttonsWidth: 40,
		thumbsActiveBorderOpacity: 0.8,
		thumbsActiveBorderColor: "ff0000",
		shuffle: true
		});
		});
$(function(){
$.syntax({root: 'js/jquery-syntax/'});
});
</script>

ne ho provati altri e gli errori sono causati sempre da funzioni tipo queste

grazie!

Sab, 30/07/2011 - 18:08

ealmuno

C'è già Jquery in drupal, eliminalo dal tuo e caso mai fa l'update di quello di drupal.
pensa ad usare un modulo, come views slideshow.
O un noconflict http://api.jquery.com/jQuery.noConflict/

http://www.chromeos.eu

Dom, 31/07/2011 - 12:08

asdomar

che sarebbe il jquery noconflict ragazzi?

Dom, 31/07/2011 - 16:24

kipper

@ealmuno
niente da fare... ho provato il $.noConflict(); in tutti i modi, l'errore/alert sparisce, ma anzichè la gallery (nel nodo...) mi appare un "Loading..."

ti viene in mente qualcosa???

p.s. con views slideshow è possibile mettere la "descrizione" in sovrapposizione a ciascuna foto foto???

in ogni caso se riusciamo a risolvere con $.noConflict(); preferirei:

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html

grazie...

Dom, 31/07/2011 - 18:43

ealmuno

Con il noconflict, se arriva al loading vuol dire che qualcosa migliora, controlla che non ci siano altri errori.
Per views slideshow si, basta mettere un altro campo e giocare un po con i div (e io te lo consiglio così è pure dinamico).

http://www.chromeos.eu

Lun, 01/08/2011 - 12:49

kipper

ok ealmuno, views slideshow è buono ma se possibile vorrei risolvere con una gallery in jQuery...

se metto questo codice (un pò migliorato...) riesco a visualizzare la gallery nel nodo (prima non la visualizzavo perchè avevo impostato un path sbagliato alle immagini...)

nell'head di page.tpl.php:

<link rel="stylesheet" href="/drupal_jquery_prove/slideViewerPro/css/svwp_style.css" type="text/css" media="screen" />
<script src="/drupal_jquery_prove/slideViewerPro/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/drupal_jquery_prove/slideViewerPro/js/jquery.slideViewerPro.1.0.js" type="text/javascript"></script>
<!-- Optional plugins  -->
<script src="/drupal_jquery_prove/slideViewerPro/js/jquery.timers.js" type="text/javascript"></script>
<!-- Syntax hl -->
<script src="/drupal_jquery_prove/slideViewerPro/js/jquery.syntax.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).bind("load", function() {
    $("div#my-folio-of-works").slideViewerPro({
    // slideViewerPro options (defaults)
    galBorderWidth: 6, // the border width around the main images
    thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images
    thumbsRightMargin: 3, // the distance of each thumnail respect to the next one
    thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around
    buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails
    galBorderColor: "#ff0000", // the border color around the main images
    thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one
    thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail
    buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner
    thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
    thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
    easeTime: 750, // the time it takes a slide to move to its position
    asTimer: 4000, // if autoslide is true, this is the interval between each slide
    thumbs: 5, // the number of visible thumbnails
    thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original
    thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible
    leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";
    rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
    autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin
    typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed
    typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.
    shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true
    });
    });
</script>

e nel body di node.tpl.php > node/add:

<div id="my-folio-of-works" class="svwp">
    <ul>
    <li><img alt="Meander - P.J. Onori" src="/drupal_jquery_prove/slideViewerPro/immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="/drupal_jquery_prove/slideViewerPro/immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="/drupal_jquery_prove/slideViewerPro/immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="/drupal_jquery_prove/slideViewerPro/immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/005.jpg" /></li>
    <li><img alt="Meander - P.J. Onori" src="/drupal_jquery_prove/slideViewerPro/immagini/001.jpg" /></li>
    <li><img alt="Flock and Predator - L. Ongaro" src="/drupal_jquery_prove/slideViewerPro/immagini/002.jpg" /></li>
    <li><img alt="Empathy - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/003.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/004.jpg" /></li>
    <li><img alt="DIY 3D Scanner - K. McDonald" src="/drupal_jquery_prove/slideViewerPro/immagini/005.jpg" /></li>
    </ul>
    </div>

a parte il tag <li>...</li> che mostra sempre il famoso "pallino di kipper" ma che ormai sappiamo come toglierlo, ho notato che andando per esempio nei blocchi, spariscono le "maniglie" di trascinamento ed è chiaro che il codice non va bene e interferisce su chissà quali altre aree di Drupal... è ovvio; non se ne parla nemmeno... ma in fondo sto facendo solo dei test per cercare di utilizzare quella marea di applicazzioni in jQuery che ci sono in circolazione....

come dicevo nel post precedente ho provato con $.noConflict(); ma, in qualsiasi modo lo metto mi da sempre Loading...

vedendo il codice sopra tu dove lo inseriresti questo $.noConflict();???

il mio problema è che devo far inserire dal cliente qualche centinaio di gallery riferite ad altrettanti nodi (node reference...) e, avendo attivato il modulo File Manager dove il cliente è già addestrato nel crearsi le sue cartelle ed inserire i files *.jpg, se gli fornisco il codice che ho messo nel Body <li>...</li>, lui cambia solo i percorsi alle cartelle/files del File Manager e così evito di creare un sacco di View Slideshow e inserirle io... perchè farle inserire dal cliente non ci penso proprio... hai capito perchè insisto con jQuery???

boh... se ti viene in mente qualcosa... io nel frattempo non mi arrendo come al solito e cerco...

flash lo escludo e anche dhtml... è così comodo con i <li> perchè si possono aggiungere al volo tutte le foto che si vogliono (descrizioni comprese...), le miniature vengono create in automatico etc etc...

il fatto è che lo stesso lavoro lo devo fare anche con i Video e a questo punto mi sembra abbastanza logico che le foto gallery e i video dovrebbero avere una struttura grafica/visiva il più possibile "simile" (al momento non mi viene un vocabolo migliore...) ...e provare con http://drupal.org/project/swftools ?

Flowplayer
1 Pixel Out
JW Image Rotator
JW Media Player
Simple Viewer

mi sa che mi dovrò mettere 2/3 giorni a testarlo...

Gio, 04/08/2011 - 13:04

kipper

risolto $.noConflict();

la sctitta Loading... nella pagina è causata dal sibolo del dollaro ($)

quando si usa $.noConflict(); bisogna sostituire tutti i siboli del dollaro ($) con jQuery per farsì che lo script funzioni ...l'avevo letto da qualche parte ma come mi succede ogni tanto sottovaluto e non prendo alla lettera alcune cose importanti...

da così:

<script type="text/javascript">
$(window).bind("load", function() {
$("div#my-folio-of-works").slideViewerPro({
    // slideViewerPro options (defaults)
    galBorderWidth: 3, // the border width around the main images
    thumbsTopMargin: 3, // the distance that separates the thumbnails and
    eccetera...
</scipt>

a così:

<script type="text/javascript">
$.noConflict();
jQuery(window).bind("load", function() {
jQuery("div#my-folio-of-works").slideViewerPro({
    // slideViewerPro options (defaults)
    galBorderWidth: 3, // the border width around the main images
    thumbsTopMargin: 3, // the distance that separates the thumbnails and
    eccetera...
</scipt>

http://stackoverflow.com/questions/5456750/i-have-a-jquery-problem-when-...

Mer, 07/09/2011 - 19:02

kipper

...tanto per essere più precisi il simbolo $ non è altro che un alias di jQuery creato per comodità e per convenzione quindi, sostituendolo con jQuery si evitano potenziali conflitti (che creano instabilità e comportamenti strani di Drupal...) con altre librerie e/o variabili che usano il simbolo $

ci sono molti esempi (anche avanzati...) in rete sull'uso di questo metodo...

Main menu

Accesso Utente

Nuovi argomenti del forum

Utenti on-line

[RISOLTO] Conflitto jQuery - $.noConflict();

Main menu

Tu sei qui

Accesso Utente

Nuovi argomenti del forum

Utenti on-line

[RISOLTO] Conflitto jQuery - $.noConflict();