PDA

Visualizza la versione completa : Comportamento anomalo IE con jQuery e jpg


serjo70
16-02-2011, 15:36
Ciao a tutti,

Ho creato un piccolo script con jQuery per creare uno slideshow di foto.
Una cosa banale e semplice nel funzionamento.
La cosa strana è legata a delle immagini in particolare e solo con IE.
Per il sito ho diverse gallery, differenti per ogni pagina.
Se inserisco le immagini di una gallery tutto ok, se metto quelle di una in particolare non c'é verso di farle funzionare :confused:

Si ferma lì e non si schioda!!!!
La cosa strana è persino sul sito ho dovuto spostarle di cartella perché non le voleva "mostrare", malgrado il percorso esatto e malgrado funzionassero in locale.
Le foto sono state modificate e ridimensionate come le altre, non credo contengano nulla che possa renderle differenti, anche lo script nella sua banalità non credo che crei problemi.
Tantopiù che con altre foto funziona.



function slideshow1() {$("#slideshow1 img:last-child").animate({"top":"0"},1000)
.fadeOut(500,
{$("#slideshow1 img:last-child").insertBefore("#slideshow1 img:first-child")
.css("display","block",
$(slideshow1)
); } ); }


sono un neofita e magari lo script vi risulterà "rozzo" qualcuno avrebbe un suggerimento per gestire diversamente l'intervallo di pausa tra un fade e l'altro?
Io ho unsato un'escamotage...

.animate({"top":"0"},1000)
Ma immagino che molti storceranno il naso :D

Grazie a chiunque sarà in grado di aiutarmi.

Sergio

simo_JQ
28-02-2011, 15:20
:confused:

non capisco come possa funzionare quello script che hai postato... anche perché richiama la funzione che stai definendo all'interno della stessa...

:confused:

cerca in google delle slideshow già fatte... io ti consiglio di utilizzare questa:

http://jquery.malsup.com/cycle/] ( [url) http://jquery.malsup.com/cycle/[/URL]

è facile da inserire, e gestire anche nella grafica.

Xinod
28-02-2011, 15:54
oltretutto, chiami la funzione come l' id di un elemento
cosa che puo' molto facilmente generare comportamenti inattesi in IE

simo_JQ
28-02-2011, 16:00
:( mmmh mi sono accorto di essere stato un po "supponente" e poco gentile, visto e considerato che tu hai anche ammesso di essere alle prime armi potevo essere + gentile. :afraid: sorry.

In ogni caso, studiati bene la struttura di una funzione di Jquery perché stai facendo un po di confusione, per cominciare sviluppa script più semplici di una slideshow che di per se necessita di script annidati.

Sfrutta il fatto che conosci Jquery per utilizzare tutte le risorse che il web ti offre gratuitamente, già fatte, e di ottima qualità.

Se invece ci tiene a farla da te, come ho già detto cerca di informarti meglio sulla struttura di una funzione JQ. Noi comunque siamo sempre qui se proprio non riuscissi, RIPOSTA il nuovo codice.

:ciauz:

:D

serjo70
28-02-2011, 16:14
Ciao Simo_JQ,

ti ringrazio per la risposta, e per aver aggiustato il "tiro" hai sicuramente ragione su tutto il fronte e quando dico neofito intendo proprio tale, fino a un mese fa non sapevo nulla di javascript e tantomeno di jQuery.
Sul fatto che esistano tante risorse online hai ragione, ma devo dire che mi sono appassionato e mi diverte far da me! :mame:
Sul fatto che richiami la funzione all'interno è veramente un errore banale, in ogni caso un nome si può sempre cambiare (ma il fatto che si riferisca ad un id, non dovrebbe bastare?
:confused: ).
Ad ogni modo, potrà sorprendere ma funziona, direi anche in maniera banale ma funziona.
Non è certo raffinato ma da lì si può partire per fare qualcosa di più efficiente.
Es. per il mio scopo (una slideshow posta di sfondo) con immagini non troppo grandi ma comunque che potrebbero risultare numerose, rischia di impiegare molto a caricarle.

Idee su come migliorarlo ne ho, ma mi colpiva che funzionasse con quasi tutte l immagini e con alcune no??!! :confused:

Suggerimenti su come migliorarlo?

P.S.
se ti va puoi guardare questo sito: www.massakonzerte.de (http://www.massakonzerte.de)
Che ho finito da poco, usando le mie scarse conoscenze di JQ, così mi dai un parere.

Grazie

Sergio

simo_JQ
28-02-2011, 16:55
:) il sito è veramente carino e fatto piuttosto bene, mi piace molto l'animazione d'entrata.

L'unica cosa che ti posso dire è di migliorare il menu, hai messo dei puntini che vanno verso una scritta in basso idea mooolto originale ma a me risulta piuttosto "SCATTOSA" prova a vedere se con uno slideDown o con un altro tipo di animazione viene più graduale. Per il resto lo trovo gradevole.

per il resto non mi da "ERRORI" di javascript se non una variabile non definita che tu hai chiamato s0 prova a vedere.

:D

serjo70
28-02-2011, 18:02
Grazie Simo_JQ!!!! :zizi:

mi fa piacere che ti piaccia, ribadisco (non per piangeria) che quando mi hanno proposto di fare questo sito non sapevo da che parte cominciare con js e animazioni.
Considera anche che è il mio terzo sito in assoluto.
Sono anche molto contento che non risultino errori.
Sulla questione delle descrizioni hai ragione, io avrei preferito qualcosa di più statico, ma al cliente piacevano così.
Ho provato a regolare in vari modi lo slideDown per cercare di minimizzare il problema.
Il tempo è risotto ma talvolta risulta un po "sincopato".

So quale sia la variabile, in realtà fa parte di uno script che ho trovato che "legge" le variabili che trasmetto nel passaggio di una pagina all'altra per conservare la lingua corretta.
Lo trovi in fondo al body.
Il problema è che nativamente comprendeva due variabili ed a me ne serviva solo una.
Non sapendo bene come modificarlo ho pensato che anche lasciando una variabile "vacante" non sarebbe stato un problema, magari alla fine avrei potuto usarla per qualcosa.

Hai visto l'animazione di passaggio dalla pagina management a quella artistica? (il link in basso staccato dagli altri "Pietro Massa")
Che browser usi?

Ora sto facendo un sito è stò elaborando un script personalizzato sullo stile del lightbox di prototype.
Una faticaccia :nonlodire

Ma è stimolante e divertente.
Non so se mi puoi aiutare, ho un problema che non riesco a bypassare:

Il div che conterrà l'immagine si apre e diventa della dimensione dell'immagine finale, ho pensato di caricare l'immagine nascosta, all'inizio e poi determinare la dimensione del div tramite variabili che ricavo con .attr dell'immagine caricata.
Ma invariabilmente, per quanto l'immagine la carichi prima, non riesce a definire la dimensione in tempo.
Devo trovare il modo che legga la dimensione dell'immagine prima di crei il div, ma non riesco in alcun modo!!! :afraid:

Suggerimenti?

simo_JQ
28-02-2011, 18:38
prova ad utilizzare l'evento:

.load() (http://api.jquery.com/load-event/)

la logica è, creo una finestra (div) di dimensioni x e y in overlay (sopra tutto il sito) che sia di default centrata nel browser (dimensioni INIZIALI FISSE) che presenti al suo interno un'oggetto (immagine/div o altro) che sia un segnaposto di caricamento. (con in background il tag dell'immagine OVVIAMENTE INVISIBILE con display:none)

una volta creato questo div si passa al caricamento dell'immagine quindi:



$("selettore immagine").load(function(){
(questa funzione verrà chiamata solo al completo caricamento dell'immagine)
});


quindi all'interno della funzione di .load() inserirai per prima cosa la richiesta di avere le dimensioni dell'immagine caricata.

con esse ridimensionerai il DIV che hai creato prima con .animate, poi eliminerai il "loading..." segnaposto e renderai l'immagine visibile con un fadeIn.

P.s. ancora meglio puoi mettere il "segnaposto loading..." con posizionamento ABSOLUTE ed eliminarlo solo dopo aver caricato completamente l'immagine magari con un'overlay anche su di essa che si elimina con il segnaposto.

:spy: è più facile a dirsi che a farsi... (bisogna vedere se la logica funziona, non ho mai provato)


non ne sono certo ma penso che avrai bisogno anche di conosce l'evento .live() (http://api.jquery.com/live/)

serjo70
28-02-2011, 19:17
Grazie grazie grazie!!!

con .load() ho già risolto buona parte del problema che avevo.
Per ora non ho usato .live() ...forse non sarà necessario.

al momento riesce a determinare la dimensione dell'immagine e quindi per ora le cose vanno di conseguenza.
Adesso devo solo mettere a punto come gestire l'animazione d'ingresso dell'immagine.
Ma mi sembra di aver superato lo scoglio principale.

La cosa che non ho ancora ben idea di come gestire è l'array delle immagini legate alla specifica galleria.
In lightbox inserisci un rel con il nome della gallery, lo script determina un array di quelle immagini e nell'ingrandimento con le frecce passi da una a quella successiva e viceversa per tutta la gallery.
Non ho mai gestito array e quindi dovrò studiare un po il metodo.
Ma direi che è una cosa che posso studiare dopo aver sistemato il meccanismo di base.

Non so che altro dire...

GRAZIE! :D

simo_JQ
28-02-2011, 21:13
:) bene.
ed è esattamente il metodo migliore.

Se poi ti serve una mano per sviluppare anche la gallery posta e mandami un messaggio privato che ti do una mano volentieri perché mi sicuramente potrà servire anche a me approfondire una ligthbox

Loading