Unofficial WebSite X5
WebSite X5 versioni obsolete => WebSite X5 [v9] - Discussioni Generali => Topic aperto da: Miss. Lin - 10 Novembre, 2012, 15:15:57
-
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.
-
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..
-
Si scusami, stavo caricando degli aggiornamenti. Adesso cmq è on-line. La pagina in cui ho inserito la lightbox è "Cucine".
-
Ci sono molti file mancanti ...
[attach=1]
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.
-
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/
-
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:
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.
-
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ù.
-
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.
-
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
-
</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;
}
-
Non l'ho provato, quindi non so se funziona nè se crea effetti collaterali:
In head (impostazioni generali, esperto):
Only registered users can see contents. Please click here to Register or Login.
-
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.
-
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.
-
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?
-
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.
-
Ok mi faccio un bel controllo ed effettuo un pò di pulizia. Cmq grazie mille per il tuo aiuto. Appena sistemo tutto ti confermo. ^__^
-
Ciao Stesil, dunque come da tuo suggerimento, ho eliminato dei file css in + e sistemato il problema della sovrapposizione di css tramite un codice inserito all'interno del css screen. Allo stato attuale va tutto abbastanza bene, c'è solo il fatto che il jcarousell nn riesce ad apparire nella homepage quando lo si guarda da google chrome a differenza degli altri browser.
Inoltre un cruccio che sto cercando di sistemare riguarda il loader dell'applicazione JQuery Max Image di sfondo, in quanto vorrei centrarlo. Ho provato con molti codici ma nn ci riesco, il codice css originario è quello allegato e dio sto cercando di creare un codice che lo riesca a fissare centralmente, ma finora ho fatto un buco nell'acqua.
Avevo provato ad inserire questo:
#loader {
position: fixed !important;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
-
Per il loader prova ad aggiungere questo:
Only registered users can see contents. Please click here to Register or Login.
Per Chrome, ho visto ... le immagini si visualizzano in ritardo .... per ora non ho capito perchè ...... giusto per eliminare una variabile, prova ad aggiungere un contenuto, tipo un oggetto testo ... più tardi guardo con più calma.
-
Stesil, il css adesso è perfetto del loader. Per quanto riguarda la Index ho inserito un testo prova, premetto che avevo fatto anche io questa prova precedentemente. Purtroppo non và ugualmente.
-
Non va in nessuna pagina. Se fai il refresh di qualsiasi pagina, osservi lo stesso comportamento. Mi scrivi il link della fonte da cui hai scaricato il plugin?
Già che ci siamo, togliamo altre variabili, correggendo alcuni tra gli errori presenti nel codice:
togli questo dal file css/style.css: @import url('reset.css');
i nomi delle cartelle dovrebbero essere senza spazi: "Studio In Home_files/skin.css"
Di errori ce ne sono altri: se passi la pagina al validatore li vedi. Ma non dovrebbero incidere con l'esecuzione del codice, anche se correggerli non farebbe male.
-
In pratica i codici con i file li ho presi da questo esempio http://studioin.theme.mk/html/ mi sono salvata il tutto ed ho ripulito i file integrando così l'oggetto nel piè di pagina. Probabilmente in questo passaggio non ho ripulito bene il tutto.
Ti allego il jqueri da me sistemato.
allegato rimosso - stesil
-
No, non è questo il modo di agire. Il link che hai postato, che cancellerò, non è un codice "sistemato", ma l'esatta copia dei file della pagina del sito che hai linkato. Spero per te che tu non abbia caricato sul server tutti quei file.
Questo è il vero link al plugin: http://sorgalla.com/projects/jcarousel/ (http://sorgalla.com/projects/jcarousel/)
Ci sono le istruzioni e i file che servono. Leggi e troverai il modo corretto di procedere.
-
Stesil hai pienamente ragione, solo che trovare un jcarosel con gli effetti di quella demo nn è semplice. Adesso cerco di sistemare il tutto, magari dando al jcarosel gli stessi effetti di quello da me postato nel sito.
-
Ciao Stesil,
come da tuo suggerimento scaricai il Jcarosel dal link da te indicato. Diciamo che l'ho sistemato abbastanza bene, sono riuscita a dare anche un effetto hover alle immagini, ma non riesco a fare si che le immagini scorrano di continuo a sinistra senza tornare indietro. Inoltre risulta che solo la prima immagine nn prenda l'effetto hover ed il collegamento. Ho provato a controllare se dipendesse da qualche mio errore nel codice, ma nn ne vedo.
Potresti controllare x cortesia? Ti ringrazio.
-
Ciao,
dai file che hai allegato si vede poco, perchè manca il codice della pagina html e mi sembra che non hai aggiornato il sito online con la tua prova.
Hai inserito le opzioni di jcarousel in head? Una cosa di questo tipo, poi verifica il significato delle variabili e i valori che possono assumere sul sito di jcarousel:
Only registered users can see contents. Please click here to Register or Login.
-
Il codice della pagina html si trova all'interno della cartella examples. Il codice html è il seguente (ho provato anche ad inserirlo nel piè di pagina inserendo il codice della Head appunto nella parte head di esperto ma nn funziona, ho cambiato la funzione last cn circula e adesso gira sempre nella stessa direzione, ma resta che al primo oggetto l'effetto hover e link nn funziona:
<head>
<title>jCarousel Examples</title>
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 1,
wrap: 'circular',
});
});
</script>
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="lube.png" width="150" height="70" alt="" /> <a href="http://www.cucinelube.it" target="_new""></li>
<li><img src="comfort.png" width="148" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="customhome.png" width="148" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="decor.png" width="130" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="finesse.png" width="160" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="furniture.png" width="149" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="homedesign.png" width="149" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
<li><img src="interior.png" width="150" height="70" alt="" /> <a href="http://www.prova.it" target="_new""></li>
</ul>
<>
</body>
-
E' errata la posizione dei tag a, che sono inoltre privi di chiusura. Questo è il codice corretto:
Only registered users can see contents. Please click here to Register or Login.
In head togli tutta questa parte
Only registered users can see contents. Please click here to Register or Login.
e prova a sostituirla con il codice che ti ho scritto prima:
Only registered users can see contents. Please click here to Register or Login.
-
Stesil, ho sistemato tutto come da tuo suggerimento ed ho modificato i codici delle immagini e dei link in maniera corretta (avevo effettivamente dimenticato la chiusura </a> e non avevo inserito nella giusta posizione il codice x il link. Il prototipo adesso va bene, è in website che adesso nn và, in pratica se inserisco la parte Head in codice esperto head e la parte del body all'interno dell'oggetto html nel piè di pagina questo nn funziona, appare in pratica cm se mancasse una pagina, adesso ti pubblico la prova on-line.
Il codice adesso è il seguente:
<head>
<title>jCarousel Examples</title>
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#mycarousel').jcarousel({
scroll: 1,
wrap: 'circular',
auto: 5,
start: 0,
visible: 5
});
});
</script>
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="http://www.cucinelube.it" target="_new""><img src="lube.png" width="150" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="comfort.png" width="148" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="customhome.png" width="148" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="decor.png" width="130" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="finesse.png" width="160" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="furniture.png" width="149" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="homedesign.png" width="149" height="70" alt="" /></a></li>
<li><a href="http://www.prova.it" target="_new""><img src="interior.png" width="150" height="70" alt="" /></a></li>
</ul>
<>
</body>
-
Stesil, ho pubblicato il sito cn tute le modifiche, ti ringrazio di cuore, sei stata un aiuto fondamentale per me. Finalmente funziona tutto bene, ci ho messo un pò di tempo a sistemare i file ma alla fine ne è valsa la pena. Puoi vedere il sito a questo indirizzo www.peppespider.it.
Adesso nn vorrei essere scocciante, ma qualcuno sa come inserire una cornice alla mappa?
-
A proposito come nn detto, ho modificato la mappa di WS9 direttamente dal codice.
-
Ciao Stesil, devo chiederti un favore, dato che grazie al tuo aiuto sono riuscita a sistemare il JCArousel, per caso sapresti dirmi anche come riuscire ad ottenere questo effetto di scomparsa oggetti in secondo piano ad una immagine? http://www.weddingbag.it/#!negozio-on-line/c1my
Io ci ho provato, ma devo ammettere con nessun successo.
Ti ringrazio anticipatamente.
-
Ciao Linda, temo di non aver capito: l'effetto da ottenere è da abbinare con il jCarousel?
-
L'effetto che di vede in questo link http://www.weddingbag.it/#!negozio-on-line/c1my (credo si tratti di un Jcarousel) è quello che vorrei simulare anche io. In pratica mi riferisco alla sezione foother, dove si vedono questi oggetti che scorrono a carosello e che sembra convergano all'interno all'interno della borsa. In pratica io vorrei realizzare lo stesso effetto con il Jcarousel sempre se si possa fare.
-
Inserisci in modifica del modello --> Piè di pagina un oggetto html con il codice per visualizzare l'immagine e lo posizioni in modo adeguato sopra l'oggetto html in cui è presente il codice per il jCarousel.
Only registered users can see contents. Please click here to Register or Login.
-
Ok perfetto adesso funziona http://www.doublelldesignz.altervista.org/ in pratica io avevo inserito direttamente l'immagine anzi che il codice.
Grazie mille Stesil!!! :D
-
Prego!
Però il resto della pagina va sistemato, secondo me. Ti rispondo nell'altro topic che hai aperto.