Lightbox con Slideshow per piattaforme gratuite (Blogger, Splinder, Cannocchiale…): solo 16 KB di codice!
Pubblicato: 10 June 2007, 9:24 am Add comments
Come vi avevo promesso, oggi regalone per tutti quelli che hanno un blog su una piattaforma gratuita (Blogger, Splinder, Cannocchiale, ma anche lo stesso WordPress.com) e muoiono di invidia per le centinaia di plugin che WordPress mette a disposizione dei propri utenti.
In realtà i plugin di WordPress sono dei meri adattamenti di codice javascript (talvolta portati in php per farli eseguire dal server piuttosto che dal client) che possono essere integrati benissimo anche su una piattaforma gratuita.
Ovviamente con un po’ di ingegno in più (che in alcuni casi si risolve anche con un codice più snello).
Oggi per es. vediamo come portare sulle piattaforme gratuite uno degli effetti ajax più simpatici cioé la famose Lightbox. Per l’occasione ho scelto il codice migliore, con l’effetto di apertura più innovativo, i bordi arrotondati ed in più con la funzione di slideshow automatico già inclusa.
Qui ne potete vedere un esempio funzionante.
Il pacchetto completo lo potete scaricare cliccando sul link qui sotto (all’interno ci sono anche le istruzioni per l’installazione… che poi consiste in una banale taglia incolla di codice prima del TAG di chiusura dell’HEAD).
Se utilizzate questo pacchetto sarebbe molto gradito un commento a questo post, un bel link di questo blog sul vostro, ed il vostro voto a Silvio Berlusconi nelle prossime elezioni 
!
Nel pomeriggio faccio un update al post con le istruzioni dettagliate per l’installazione.
Se avete problemi utilizzate i commenti, ma soprattutto se lo installate fatemi sapere su quale piattaforma lo avete installato, se è stato semplice farlo e se funziona tutto.
Ricordatevi che i file delle immagini usate sono state uplodate su IMAGESHACK che ogni tanto si incanta e ci mette un pochino a scaricarle. Però questo vale per la prima volta, perché poi risiederanno nella CACHE dei vostri utenti e non ci dovrebbero più essere problemi (cmq stiamo parlando di 7 o 8 KB di immagini… se avete un server vostro o conoscete un servizio migliore di IMAGESHACK potete scaricarle eppoi riuplodarle lì cambiando i riferimenti dentro al file di stile).
NOTA: ho lasciato i PARAMETRI della CLEARBOX bene in vista così se voleste apportare delle modifiche, potete farlo semplicemente cambiando quelli.
NOTA2: questa cosa va bene anche per gli utenti di WORDPRESS a pagamento che si rimpono a caricare plugin. Basta andare nella DASHBOARD (pannello di controllo del vostro blog), cliccare su “PRESENTATION” e selezionare il file “HEADER.PHP” ed aggiungere il codice prima del tag di chiusura diHEAD.
NOTA3: i file delle immagini non sono gli ORIGINALI di KREATURA, ma sono stati ritoccati da me per far funzionare la TRASPARENZA attarverso le PNG. Quindi se volete uplodarli da altre parti dovete scaricarvi quelli di IMAGESHACK e non quelli del pacchetto ORIGINALE!
Per il momento è tutto!
Popularity: 16% [?]
14 Responses to “Lightbox con Slideshow per piattaforme gratuite (Blogger, Splinder, Cannocchiale…): solo 16 KB di codice!”
Add commentsLascia un commento
NOTA: è possibile modificare un commento entro 1 ora dalla pubblicazione (cliccare sul testo del vostro commento per entrare in modalit editor)
informati su almeno 3 di queste cose e poi non avrai pi
«In realt
Ciao Thumbria!
Ovviamente hai ragione tu (specie per quello che riguarda la gestione del database che via js non credo si possa fare) ma ultimamente mi sono capitati dei plugin fatti cos
I plugin servono, oltre che per nascondere il codice, anche per la portabilit
E ce lo so Thumbria!
Che poi a voler essere proprio precisissimi nemmeno basterebbero i plugin per la portabilit
Salve Kagliostro. Ho trovato splendido il tuo richiamo a Clearbox, che trovo meglio di Lightbox 2 (di cui ho fatto da pochi giorni la conoscenza) per via dello slideshow automatico.
a parte alcune personalizzazioni del codice di Pyro che sono riuscito a fare, proprio non riesco a far sparire la banda colorata al di sotto dell’immagine. In pratica vorrei eliminare completamente la porzione sotto la foto dove compare il titolo e il numero dell’immagine, che invece sono riuscito a rimuovere. Lasciando solo un bordino di 1 px intorno all’immagine. Ho sbirciato a lungo il codice CSS e il CLEARBOX.JS, ma non sono proprio riuscito a risolvere niente. Sai, per favore suggerirmi dove devo toccare il codice? Ciao e grazie.
Avrei un quesito da porti, se posso. Da poco mi interesso di JS e purtroppo non mastico molto l’ungherese
Dunque…
sinceramente
Ciao,
ehm utilizzando il codice su blogger mi dà errore:
Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
Messaggio di errore XML: Element type “a” must be followed by either attribute specifications, “>” or “/>”.
J! ho ricontrollato e a me non dà errore.
TRa l’altro non è un file XML, ma un banalissimo javascript compresso che al suo interno NON HA la grammatica degli XML.
Gli unici due tag sono “Style” e “script”, ma sono entrambi aperti e chiusi bene.
Secondo me nell’inserirlo hai toccato qualche altro tag
Grazie kagliostro, controllerò tutto di nuovo, è facile che sia un mio errore in quanto non sono molto istruito su queste cose.
Adesso mi metto di impegno e studio la cosa!!
Tnx millissime!
Ok, seppoi metti pure il link al tuo sito posso dare un’occhiata al codice.
E magari aggiugimi nel tuo blogroll
No,non funziona. ho gli stessi errori
Ciao a tutti.
ho lo stesso errore di
J
pleeeeeeesee help me!!!!!
[...] che io non l’ho creata, non ho fatto un bel niente ! Invece ringrazio all’autore della guida del blog kagliostro, autore anche del file allegato. Per vedere lo script cliccate sull’immagine Dopo un paio [...]