-
.
JGallery con Effetto Fade v1.0
Galleria di immagini con effetto dissolvenza in CSS3
[ANTEPRIMA]
Installazione
Per inserire la gallery sarà sufficiente copiare ed incollare questo codice in Gestione HTML:SPOILER (clicca per visualizzare)HTML<div class="jgallery">
<ul>
<li><img src="http://dumpshare.net/images/713513slide2.jpg">
<div><h3>Into the wild</h3>
<p>There is a pleasure in the pathless woods, there is a rapture on the lonely shore, there is society, where none intrudes, by the deep sea, and music in its roar: I love not man the less, but Nature more.</p></div>
</li>
<li><img src="http://dumpshare.net/images/24713slide3.jpg">
<div><h3>Loneliness</h3>
<p>Quali dal vento le gonfiate vele | caggiono avvolte, poi che l'alber fiacca, | tal cadde a terra la fiera crudele.</p></div>
</li>
<li><img src="http://dumpshare.net/images/994218slide4.jpg">
<div><h3>Over the rainbow</h3>
<p>Ogni numero è zero di fronte all'infinito. L'inaccessibile unito all'impenetrabile, l'impenetrabile unito all'inespicabile, l'inespicabile unito all'incommensurabile: questo è il cielo.</p></div>
</li>
<li><img src="http://dumpshare.net/images/157058slide1.jpg">
<div><h3>Red October</h3>
<p>Rosso come un rubino immerso nel sangue, rosso come il ferro incandescente pronto per essere forgiato, rosso come un tizzone ardente di odio e rabbia, sopra le languide chiome apparve Castigo. </p></div>
</li>
</ul>
</div>
Inserire ulteriori diapositive: copiare ed incollare (prima dell' ul finale) il seguente form, compilandolo nelle parti richieste:HTML<li><img src="URL_IMMAGINE">
<div><h3>TITOLO_DIAPOSITIVA</h3>
<p>DESCRIZIONE DIAPOSITIVA</p></div>
</li>
Copiare ed incollare il codice seguente in Colori e Stili:SPOILER (clicca per visualizzare)CODICE/* JGALLERY CON EFFETTO FADE - http://ffmagazine.forumfree.it/?t=63444176*/
/* Riquadro */
.jgallery {height: 340px; width: 800px; background: #FFF; box-shadow: 0 0 7px 1px rgba(0, 0, 0, .4); padding: 12px; overflow: hidden; font-family: georgia}
.jgallery ul {list-style: none; margin: 0; padding: 0; position: relative}
.jgallery ul li img {width: 100%; max-height: 300px}
/* FOTO */
.jgallery ul li {opacity: 0; visibility: hidden; position: absolute; top: 0;
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-o-animation-name: anim_slides;
-o-animation-duration: 24.0s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards}
/* TITOLO + DESCRIZIONE */
.jgallery div {background: #FFF; position: absolute; top: 290px; left: 0; width: 100%; height: 60px; padding-top: 5px;
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-o-animation-name: anim_titles;
-o-animation-duration: 24.0s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards}
.jgallery div h3, .jgallery div p {display: inline-block; padding: 12px}
/* Titolo */
.jgallery div h3 {float: left; width: 280px; font-weight: bold; font-size: 33px; text-align: right; border-right: 1px solid rgba(27, 54, 81, 0.4); letter-spacing: -1px; height: 30px}
/* Descrizione */
.jgallery div p {float: left; margin-top: -10px; font-family: constantia; font-style: italic; font-size: 14px; text-align: left; width: 55%; height: auto; line-height: 90%}
/* Ritardo di visualizzazione delle slides successive alla prima */
.jgallery ul li:nth-child(2), .jgallery ul li:nth-child(2) div {-webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; -o-animation-delay: 6.0s}
.jgallery ul li:nth-child(3), .jgallery ul li:nth-child(3) div {-webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; -o-animation-delay: 12.0s}
.jgallery ul li:nth-child(4), .jgallery ul li:nth-child(4) div {-webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; -o-animation-delay: 18.0s}
/* Keyframes FOTO */
@-webkit-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}
@-moz-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}
@-o-keyframes anim_slides {0% {opacity: 0; visibility: hidden}
4.1% {opacity: 1; visibility: visible}
24.6% {opacity: 1; visibility: visible}
28.7% {opacity: 0; visibility: hidden}
100% {opacity: 0; visibility: hidden}}
/* Keyframes TITOLO+DESCRIZIONE */
@-webkit-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}
@-moz-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}
@-o-keyframes anim_titles {0% {top: 110%; opacity: 0; visibility: hidden}
4.1% {top: 103%; opacity: 1; visibility: visible}
20.5% {top: 103%; opacity: 1; visibility: visible}
24.6% {top: 103%; opacity: 0; visibility: hidden}
100% {top: 103%; opacity: 0; visibility: hidden}}
ATTENZIONE
L'effetto dissolvenza del codice è settato per 4 pannelli. Qualora ne vengano aggiunti di nuovi, occorrerà modificare in maniera opportuna alcuni valori persenti nel codice CSS. Vi rimando a QUESTO mio tutorial per capire cosa e dove modificare.
Informazioni
Il codice non è compatibile con IExplorer ( [x] )
Sono in cantiere i seguenti miglioramenti del codice:
- inserimento del bottone Play/Pausa
- possibilità di scorrere le immagini senza dover attendere la fine della transizione
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=63444176">JGallery con Effetto Fade</a> creata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="JGallery con Effetto Fade" href="http://ffmagazine.forumfree.it/?t=63444176"><b>JGallery con Effetto Fade</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>JGallery con Effetto Fade
Realizzata da El Gringo 89 del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by El Gringo 89 - 3/3/2015, 00:15. -
.
Advanced Member
- Group
- Vecchie Querce
- Posts
- 7,944
- Activity Level
- +345
- Location
- morrisblog.tk
- Status
- Offline
un effetto molto faigo, ma non funge con explorer (ovviamente) ed opera (e questo è grave! ) . -
(!_!).
User deleted
Ma funge con chrome e firefox (ovviamente) e safari (e questo è grave! ).
Edited by (!_!) - 7/10/2012, 00:29. -
.
Advanced Member
- Group
- Vecchie Querce
- Posts
- 7,944
- Activity Level
- +345
- Location
- morrisblog.tk
- Status
- Offline
Se non funzionasse con chrome e firefox (safari lo lascerei ai mac users più ostinati) vorrebbe dire che non è uno script funzionante. Non serve prendere per il culo . -
.
Complimenti *ç*
Ottima slide, appare anche non particolarmente complicata nei css, presumo quindi un veloce caricamento. Confermo la mancata visualizzazione della totale slide su Opera.. -
.
IE non conosce neanche lontanamente questi effetti, perciò rimarrà eternamente obsoleto xD
Quanto ad Opera, mea culpa: non me lo ero filato
Tuttavia, facendo una rapida prova, noto che l'animazione non viene visualizzata come dovrebbe, perciò mi servirà un po' di tempo per metterla a punto ^^
Grazie della segnalazione!
UPDATE! Adesso il codice è funzionante anche su Opera!. -
.
Che velocità :E
Rinnovo i complimenti, non ti smentisci mai. -
.
Advanced Member
- Group
- Vecchie Querce
- Posts
- 7,944
- Activity Level
- +345
- Location
- morrisblog.tk
- Status
- Offline
ecco, così ci piaci Gringo XD
è un effetto molto molto bello, magari ci invento qualcosa su xD
explorer non è antico, è anacronistico, viaggia su binari differenti e non se ne fregano nulla della compatibilità. Finora hanno campato di rendita poiché è il browser di default, ma in base ai dati dell'ultimo anno ha perso la leadership, staremo a vedere se cambieranno i loro assurdi sistemi.. -
.
bell'effetto complimenti, vedi non serve per forza iframe e codici complessi per una slide decente alle volte critichiamo forumfree perche è limitato...senza provare però a sfruttare tutto quello che già ci offre, come invece hai fatto tu
ottimo
PS: non ti farò mai piu cosi tanti complimenti tutti assieme quindi fatti uno screen!
pps: jgallery è un po forviante dato che non sfrutta javascript lol, avrei messo css-gallery (ssiessess gallerii ). -
.
Bella *^*
Complimenti :*. -
.
Compilimenti!
Mi piace molto. -
.
@Klo: screen subbbbbito! E quando mi ricapita? xD
Quanto al nome, avevo pensato all'associazione con JQuery, che ha a disposizione effetti simili.. Così uno, convinto che gli venga propinato un codice di proporzioni bibliche da caricare in un iframe, rimarrà stupito della semplicità di una slider in puro css! In questo modo, estasiato dall'abilità dell'utenza del Magazine, decide di entrare a far parte del forum, seguendolo in tutto e per tutto.
Questa si che si chiama strategia di marketing. Ohohohoh.
. -
JackGaunt.
User deleted
Ottimo! . -
Kiname.
User deleted
Ottimo lo cercavo da molto *-* . -
Agron‚.
User deleted
Complimenti, mi serviva :megusta: .