JGallery con Effetto Fade v1.0

Teo_Mc

Posted on 24/11/2012, 20:08

.

User deleted

Signori buonasera, sono ancora qui....

ho caricato altre immagini seguendo come dice la descrizione qui sopra,ho copiato la stringa e ho aggiunto la descrizione, ma se guardate nello slide,( la descrizione della tigre , e la descrizione dei funghi) si accavallano le scritte come mai?

ecco il forum http://wildcolourseyes.forumfree.it

ecco il mio codice

SPOILER (clicca per visualizzare)

Una Rondine Non fa.....Workshop

Ed invece saranno proprio questi instancabili volatori e migratori i protagonisti di un workshop dedicato ineramente all'uso delle fototrappole ed i flash's ad alta velocità.

IL Danubio ed il Suo Immenso Delta

....navigando sulle acque di una dei più grandi fiumi europei, lungo i canali più nascosti per scoprire e fotografare innumerevoli specie di uccelli che vivono e si riproducono in uno degli ambienti acquatici più incontaminati del nostro continente...

Intorno Alla Mangiatoia

....dalla cinciarella al picchio rosso maggiore, dal pettirosso alla passera scopaiola, come fotografare ed allestire un set fotografico intorno ad una mangiatoia invernale, che oltre a permetterci di eseguire ottimi scatti aiuterà i nostri piccoli amici a passare meglio le rigide giornate invernali.

I Signori Del Vento

Sulle isole Farne, in Inghilterra, per fotografare i pulcinella di mare, le urie, le gazze marine ed altre specie ancora....ma non solo uccelli, dirigendosi su questi piccoli paradisi ornitologici avremo modo di osservare e fotografare anche la simpatica e curiosa foca comune.

In Rajasthan...Sulle Tracce Della Tigre ...

Nel parco indiano di Rantambhore alla ricerca della mitica tigre del Bengala e del leopardo, ma non solo, cervi Sitka, Langurs e decine di specie di uccelli riempiranno tutti i giorni le nostre schede di memoria, ed in più un grande reportage in uno degli stati più affascinanti dell'India

Astrazioni In Natura

...con Stefano Baglioni, alla ricerca delle meraviglie che la Natura tiene per sè e che solo un occhio attento, esperto e sensibile può catturare...

IL Bayerischer Wald

Nel parco nazionale tedesco dove, in situazione controllata, è possibile fotografare il lupo europeo, la lince europea, l'orso bruno ed altro ancora, due giorni di full immersion fotografica!

poi ho caricato 7 foto ma dopo il primo giro ne visualizza solo 4 come mai?

potete aiutarmi^?????

.

$reymaster™$ o.O

Posted on 28/11/2012, 18:19

.

User deleted

scusate ma se io metto un immagine che compre una parte dello schemo della jgallery il titolo e la descrizione fuoriescono nn si può fare come nelle immagini di deflaut mettere il titolo a sinistra e la descrizione a destra se si come si fa ?! grz

.

El Gringo 89

Posted on 15/1/2013, 00:10

.

Senior Member

Group: M. Onorario

Posts: 23,086

Activity Level: +9

Location: Far West

Status: Offline

Per tutti coloro che hanno difficoltà nell'aggiunta di nuove slides e nella modifica dei tempi di transizione, consiglio di leggere QUESTO mio tutorial sulle animazioni in CSS3.

Se avete dubbi o domande sul codice, postate sempre qui di seguito!

.

THE_DARK_KING

Posted on 15/1/2013, 13:40

.

User deleted

Bell'effetto. L'ho copiato da un'altro forum molto tempo fa ma mi rendo conto che è un po' diverso ma non capisco in cosa:

css

SPOILER (clicca per visualizzare)

CODICE

/* JGALLERY CON EFFETTO FADE - By El Gringo 89 */
/* Riquadro */
.jgallery {height: 340px; width: 800px; background: #1B1B1B; box-shadow: 0 0 7px 1px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 7px 1px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, .4); padding: 12px; overflow: hidden; font-family: verdana}
.jgallery ul {list-style: none; margin: 0; padding: 0; position: relative}
.jgallery ul li img {width: 100%; max-height: 300px}
/* Keyframes effetto dissolvenza delle foto */
@-webkit-keyframes anim_slides {0% {opacity: 0}
6% {opacity: 1}
24% {opacity: 1}
30% {opacity: 0}
100% {opacity: 0}}
@-moz-keyframes anim_slides {0% {opacity: 0}
6% {opacity: 1}
24% {opacity: 1}
30% {opacity: 0}
100% {opacity: 0}}
@-o-keyframes anim_slides {0% {opacity: 0}
6% {opacity: 1}
24% {opacity: 1}
30% {opacity: 0}
100% {opacity: 0}}
/* Foto */
.jgallery ul li {opacity: 0; 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}

/* Ritardo di visualizzazione delle foto successive alla prima */
/* ATTENZIONE: per ottenere un effetto naturale, è consigliato aumentare PROPORZIONALMENTE il ritardo(Esempio: 4s --> 8s --> 12s --> ...) */
.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 effetto della descrizione */
@-webkit-keyframes anim_titles {0% {top: 117%; opacity: 0}
5% {top: 103%; opacity: 1}
20% {top: 103%; opacity: 1}
25% {top: 103%; opacity: 0}
100% {top: 103%; opacity: 0}}
@-moz-keyframes anim_titles {0% {top: 117%; opacity: 0}
5% {top: 103%; opacity: 1}
20% {top: 103%; opacity: 1}
25% {top: 103%; opacity: 0}
100% {top: 103%; opacity: 0}}
@-o-keyframes anim_titles {0% {top: 117%; opacity: 0}
5% {top: 103%; opacity: 1}
20% {top: 103%; opacity: 1}
25% {top: 103%; opacity: 0}
100% {top: 103%; opacity: 0}}
/* Riquadro Titolo + Descrizione */
.jgallery div {background: #1B1B1B; 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; color: #FFF; font-size: 33px; text-align: right; border-right: 1px solid rgba(27, 54, 81, 0.4); letter-spacing: -1px; height: 30px; margin-top: -20px}
/* Descrizione */
.jgallery div p {float: left; margin-top: -5px; font-family: constantia; font-style: italic; color: #FF0000; font-size: 15px; text-align: left; width: 55%; height: auto; line-height: 90%}

.

El Gringo 89

Posted on 15/1/2013, 13:48

.

Senior Member

Group: M. Onorario

Posts: 23,086

Activity Level: +9

Location: Far West

Status: Offline

Era il vecchio codice (in quale altro forum lo hai copiato?), ti consiglio di modificarlo con la versione aggiornata (la trovi nel primo post di questa discussione).

.

THE_DARK_KING

Posted on 15/1/2013, 14:14

.

User deleted

Si grazie. L'ho copiato da qui.

Comunque ho un problemino...

Cioè, non so descrivervelo ma secondo me l'effetto ha dei problemi. Uso Chrome.

Potreste visualizzare più volte il div dei loghi che si trova sul mio forum?

Cioè, delle volte non carica un logo, e altre vole c'è una sovrapposizione in dissolvenza. Non so spiegarvelo meglio...

Edited by THE_DARK_KING - 16/1/2013, 13:31

.

¬Y-Marchog-Gwaed-Amhur©

Posted on 13/9/2013, 11:15

.

Senior Member

Group: Lettore

Posts: 16,191

Activity Level: 0

Location: Lago di Holts (Finlandia)

Status: Offline

Salve ragazzi, non sono riuscito a presentarmi solo perché quando entro nella home del vostro forum il browser non riesce a caricare tutta la pagine. Vorrei chiedervi se è possibile avere le immagini a effetto fade senza riquadro.

.

Cometa Gabry

Posted on 31/1/2014, 22:28

.

User deleted

E' bellissimo l'ho messo nel mio forum, ma mi fa vedere solo 4 immagini ed io ne ho caricate di più... come mai? :-(

.

El Gringo 89

Posted on 1/2/2014, 00:42

.

Senior Member

Group: M. Onorario

Posts: 23,086

Activity Level: +9

Location: Far West

Status: Offline

Perchè devi modificare il CSS, come indicato nella guida ^_^

CITAZIONE

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.

.

Black&White

Posted on 1/2/2014, 02:06

.

Senior Member

Group: Member

Posts: 10,894

Activity Level: 0

Status: Offline

Peccato che nn funzioni con Explorer che è ancora il maggior browser usato (colpa di microsoft) quindi mi rimane ostico decidere di sostiturlo con uno funzionante con tutti, anche se questo è piu bello!

.

Cometa Gabry

Posted on 1/2/2014, 16:36

.

User deleted

CITAZIONE (El Gringo 89 @ 1/2/2014, 00:42)

Perchè devi modificare il CSS, come indicato nella guida ^_^

CITAZIONE

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.

Oddio El Gringo, e da stamani che sono su questo codice e non riesco, sto guardando bene bene e non so cosa devo modificare per far si che si vedano tutte le immagini che carico, io voglio solo che al posto di 4 ce ne siano di più... ma non riesco ci ho provato

.

Cometa Gabry

Posted on 1/2/2014, 18:33

.

User deleted

Uffa!!!
Non ce la fò non ce la fò... sigh sigh :-(

.

AngioC

Posted on 15/10/2014, 19:55

.

Advanced Member

Group: Lettore

Posts: 1,276

Activity Level: 0

Location: Lecce

Status: Offline

Salve, ho provato a rendere cliccabili le immagini che scorrono con questo codice:

CODICE

Però purtroppo le immagini non si cliccano, come devo risolvere?

.

Bernardo Silva

Posted on 12/11/2014, 14:08

.

User deleted

Hey hmm I don't speak Italian but maybe someone could help me with this.

I wanted a Gallery like this goo.gl/OgR1Pk to use on my forum but I can't make it happen.

Thanks and sorry for traspassing :rolleyes:

.

•Kolyat

Posted on 22/2/2015, 23:27

.

User deleted

CITAZIONE (AngioC @ 15/10/2014, 19:55)

Salve, ho provato a rendere cliccabili le immagini che scorrono con questo codice:

CODICE

Però purtroppo le immagini non si cliccano, come devo risolvere?

Ho anche io lo stesso problema ma non solo con le immagini, ma anche con i link... anche se clicco non succede nulla, non si aprono i link.
Uso chrome.

.

JGallery con Effetto Fade v1.0

Una Rondine Non fa.....Workshop

IL Danubio ed il Suo Immenso Delta

Intorno Alla Mangiatoia

I Signori Del Vento

In Rajasthan...Sulle Tracce Della Tigre ...

Astrazioni In Natura

IL Bayerischer Wald