La sovrapposizione di JQuery crea conflitti in WS9

[Miss. Lin]

Salve a tutti,


sto realizzando un nuovo sito di seguito l'indirizzo www.peppespider.it.
A tal proposito il problema principale deriva dal fatto che avendo inserito una lightbox in una pagina ed un jcarousel all'interno del piè di pagina, quest'ultimo soltanto nelle pagina con le lightbox non funziona, ovvero si vedono solo le immagini e non il movimento continuo. Inoltre le icone (skype, fb, rss) a mouse hover non funzionano sempre nella pagina in cui è inserita sia la lightbox che il jcarousel.


Qualcuno di voi è in grado di aiutarmi a sistemare questo conflitto?
Vi ringrazio anticipatamente.

[milux]

ciao, sembra che il peppespider.it sia ancora vuoto (al momento in cui scrivo..).  Appena riesci a caricare i contenuti, si può vedere l'eventuale problema..

[Miss. Lin]

Si scusami, stavo caricando degli aggiornamenti. Adesso cmq è on-line. La pagina in cui ho inserito la lightbox è "Cucine".

[stesil]

Ci sono molti file mancanti ...

[ Guests cannot view attachments ]

Manca jquery-ui e un file js jquery.smooth-scroll.min.js. Mentre la libreria jquery non deve essere allegata nemmeno una volta ... viene già inserita dal programma.

Io inizierei a sistemare questi errori .... poi vediamo che succede.

[Miss. Lin]

Quei file sono stati eliminati appositamente in quanto se inseriti oscurano il sito. Fanno parte della struttura da cui è stata prelevata la lightbox. I problemi fondamentali sn 2.


Il primo riguarda il pattern che non crea problemi se non nella sezione dove è stata inserita la lightbox, andando a coprire parti del sito.


Il secondo riguarda il jcarousel che è stato inserito all'interno del piè di pagina e questo sempre nella sezione dove ho inserito la lightbox.


Vi posto il link della lightbox da me utilizzata http://lokeshdhakar.com/projects/lightbox2/

[stesil]

Quei file sono stati eliminati appositamente in quanto se inseriti oscurano il sito. Fanno parte della struttura da cui è stata prelevata la lightbox.

Ma li devi eliminare anche dal codice però. Se lasci questo:

Codice:

Only registered users can see contents. Please click here to Register or Login.
che per essere eseguito necessita sia di jquery-ui, sia del file query.smooth-scroll.min.js, si genera un errore javascript, visibile nell'immagine che ti ho postato, che blocca l'esecuzione di tutti gli script successivi. Fai pulizia nel codice, poi si possono vedere i problemi restanti.

[Miss. Lin]

Dunque, ho eliminato il codice come da tuo suggerimento. Adesso dovrebbe non ricercare più una parte di quei js da te elencati. Premetto che in locale funziona, ma esportandolo on-line accade che il jcarousel non entra + in conflitto e funziona correttamente facendo si che le immagini scorrano,  la lightbox invece nn funziona più.

[stesil]

Mah ... io ora vedo funzionante l'ingrandimento sulle immagini ....

Avevo trascritto solo una parte del codice da eliminare.

Togli tutto quello che è compreso tra i tag <script>. Anche il codice di analytics, che, se ho letto bene, hai copiato con tutto lo script dal sorgente del sito di lightbox!

<script>

//codice lasciato:
$('.showOlderChanges').on('click', function(e){
                            $('.changelog .old').slideDown('slow');
                            $(this).fadeOut();
                            e.preventDefault();
                          })
                     });
                   
 //   codice monitoraggio Google Analytics       
........ 

</script>

Il pattern ... non ho capito dove si dovrebbe posizionare: è sopra i contenuti in tutto il sito, non solo in questa pagina. Anzi almeno in questa pagina le immagini sono sopra! Ed effettivamente le pagine sono illeggibili.

[Miss. Lin]

Bene, adesso ho eliminato tutto e funziona tutto come si deve. Unica cosa che non và è il pattern.


Il codice inserito nella sezione è il seguente Head di esperto è il seguente:



<div id="mb_background" class="mb_background">
<div class="mb_overlay"><>
<>


<div id="mb_pattern" class="mb_pattern"><>


Il foglio di stile che lo riguarda si chiama Style ed è inserito nella cartella css

[Miss. Lin]

</script>

Il pattern ... non ho capito dove si dovrebbe posizionare: è sopra i contenuti in tutto il sito, non solo in questa pagina. Anzi almeno in questa pagina le immagini sono sopra! Ed effettivamente le pagine sono illeggibili.



Il pattern deve posizionarsi soltanto sulla max image di sfondo. Purtroppo nonostante gli abbia dato uno z-index pari a 0 questo si sovrappone su tutto.



img.mb_bgimage{
   position:fixed;
   left:0px;
   top:0px;
   width:100%;
   opacity:0.8;
   z-index: 0;
}
.mb_overlay{
   width:100%;
   height:100%;
   position:fixed;
   top:0px;
   left:0px;
   background:transparent url(../images/pattern.png) repeat-x bottom left;
   z-index: 0;
}
.mb_pattern div{
   position:absolute;
   width:50px;
   height:50px;
   background:trasparent;
   z-index: 0;
}

[stesil]

Non l'ho provato, quindi non so se funziona nè se crea effetti collaterali:

In head (impostazioni generali, esperto):

Codice:

Only registered users can see contents. Please click here to Register or Login.

[Miss. Lin]

Stesil, premetto che avevo già fatto una prova del genere andando a modificare direttamente il foglio di stile "template" (ovviamente le modifiche erano temporanee dato il fatto che WebSite riportava il foglio di stile alle impostazioni da lui definite. Cmq oltre al codice #imPage { z-index:1;} ho dovuto inserire anche il codice #imFooter { z-index:1;} per farlo funzionare e devo dire che il Pattern si posiziona sullo dsfondo x tutte la pagine tranne che per la pagina "cucine" in cui è inserita la lightbox. Bisognerebbe che gli stili si potessero applicare direttamente a quella pagina, ma io nn so cm fare.

[stesil]

Devi controllare nell'oggetto html in cui hai inserito il codice di lightbox che per ogni <div> aperto sia presente il tag di chiusura </div>.

Nel sorgente della pagina mancano due tag </div> e questo potrebbe essere la causa dell'errato posizionamento di imPage.

Azzarderei che manca la chiusura di questo div: <div class="section" id="example"> (che nel codice è ripetuto due volte .... e non dovrebbero avere lo stesso valore di id):

[.....]
<a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="Cecilia"><img src="images/examples/thumb-5.jpg" alt="Plants: image 5 0f 10 thumb" /></a>
                        </div>
                      </div>
                      </div>
</div>
[...]

ma è proprio un azzardo. Tu lo puoi verificare più facilmente.

[Miss. Lin]

Sil hai ragione, effettivamente nell'esportazione avevo dimenticato quei due DIV di chiusura. Adesso è tutto ok! Però sto notando un effetto anomalo con i testi in quanto i grassetti a quanto pare non funzionano nè in locale e nè on-line, è un problema solo mio o è dovuto a qualche ultimo aggiornamento di website?

[stesil]

E' un problema delle tue pagine, il programma non c'entra. Hai allegato un numero consistente di file css, e alcuni di questi contengono regole di stile generali ....  Verifica che i file che hai inserito siano effettivamente necessari.

Ad esempio per il lightbox serve solo questo file  <link href="css/lightbox.css" rel="stylesheet" />, ma tu ne hai inserito anche un altro, che fa parte della pagina demo di lightbox. Se anche per gli altri plugin che hai utilizzato hai usato lo stesso "metodo" ... potrebbero esserci anche altri file che interferiscono con i css delle pagine del sito.

Incomincia a togliere i file superflui e vediamo che succede.