plugin inserimento immagine in articolo con scroll parallasse

[ciriman]

Salve,
cerco un plugin che mi permetta di inserire nel corpo del testo di un articolo, un'immagine di background visibile da una finestra che taglia il corpo del testo (là dove ho inserito l'immagine) e scorre sotto in parallasse. La spiegazione cosi articolata è poco chiara, a differenza dell'esempio che riporto che spiega più chiaramente di cosa ho bisogno:


http://mag.newsweek.com/2014/01/24/bangkok-thailand.html


/CUT

Edited: ciriman, per cortesia come ben saprai c'è una sezione apposita per gli annunci a pagamento.
Prova a postare lì.
Grazie.

[BelinBelan]

Ciao ciriman,


a parte che fai prima coi CSS e gratis, cmq questa non è la sezione giusta per postare queste richieste.


Aspettiamo un moderatore che sposti questa discussione nella sua giusta sezione! 

[ciriman]

fai prima coi CSS e gratis, cmq questa non è la sezione giusta per postare queste richieste.

come potrei fare? considerando che chi deve scrivere gli articoli deve poter definire che "quella precisa foto" abbi quella impaginazione, e che le altre si possano inserire invece normalmente. Dici sia possibile fargli assegnare semplicemente una classe nelle qualità dell'immagine? a me sembra che l'immagine venga messa come background di un preciso DIV... consideriamo che tutto questo discorso si deve applicare al componente K2


 

[BelinBelan]

ciao ciriman,


con firebug ho guardato come fossa definito il CSS, ed usa, ovviamente una mediaquery per capire la larghezza dello schermo, poi applica delle regole a dei div per espandere quell'immagine.


L'utente che carica l'immagine in quel preciso punto del post dovrà assegnare quella classe definita nel CSS.


Non è il massimo della vita ovviamente. La soluzione che cerchi, cmq, è pressapoco identica: un plugin funziona, in questo caso se dichiarato nel post, esempio: {bigimage: http://url_immagine.jpg}{bigimage} quindi mi pare che una soluzione valga l'altra: c'é sempre da scrivere qualcosa perché qualcosa accada 

[ciriman]

mi sembra che sia qualcosa di pi che assegnare all'immagine una classe, infatti come vedi nel sito di esempio, l'immagine sembra essere assegnata ad una classe background-image, non inserita come un elemento grafico normale


<span class="parallax-image" style="background-image: url('http://cdn.newsweek.com/data/images/full/2014/01/21/3133-1-24-2014-fe0304-bangkok-02.jpg')"></span>

[BelinBelan]

Fa tutto quella classe:

Codice: [Seleziona]

class="parallax-image[/font appunto che ha bisogno di un cSS ben configurato, appunto.


Ti suggerivo il fatto che una soluzione, rispetto all'altra, richiede che l'utente, cmq, un minimo si applichi.


Cmq questa discussione, a mio, avviso, dovrebbe proseguire nelle richieste a pagamento.

[ciriman]

grazie, si ho riscritto l'annuncio... spero mi risponda qualcuno interessato ad assistermi per l'intento. 

[mmleoni]

veramente io ho copiato solo il pezzo di html che contiene le foto e le classi del css che iniziano con parallax e mi pare che funzioni egregiamente.

certo un plugin è decisamente più comodo, ma anche così non è che sia difficile da usare: basta copiare 10 righe di html e modificare il nome dell'immagine.

ma se proprio proprio non resisti all'impulso di pagarmi, non so come oppormi 

ciao,
marco

[mmleoni]

ripensandoci la cosa può essere interessane anche per un mio cliente, anche se in forma più ridotta rispetto a ciò che chiede ciriman (a me non interessa l'estensione dell'editor con il cropping/resizing e selezione diretta dell'immagine, mi basta la possibilità di indicare l'immagine anche come stringa nei parametri).

mi sono già scritto parte del plugin, che probabilmente finirà al solito pubblicato sulla jed (se come di solito accade il cliente mi dà l'autorizzazione a fronte di uno sconticino  )

ma secondo voi l'effeto qui:
http://www.mmleoni.net/component/content/article/23-uncategorised/104-parallax-scroll-test

è lo stesso? a me sembra di sì, carino è carino, ma che cosa centra la parallasse?
fatemi sapere perché la grafica non è decisamente il mio forte 

ciao,
marco

[ciriman]

Ottimo bravo... è proprio l'effetto che cerco. di seguito ti riporto un'altra pagina dove si capisce che ci sia (secondo me) un tasto unico utilizzato per inserire le immagini negli articoli,  questo poi potrebbe avere due opzioni di inserimento: normale o con parallasse.


http://mag.newsweek.com/2013/08/30/on-syria-go-big-or-stay-home.html


..il tasto inserisce l'immagine caricandola contestualmente all'inserimento, ed apportando un resize prestabilito nella configurazione del plugin (per evitare si carichino nel server immagini enormi e lente nel caricamento) inoltre sarebbe utile come altro parametro del plugin definire l'altezza dello "squarcio" della pagina (cosi che sia facile configurarlo per ogni sito).


ovviamente al momento dell'inserimento immagine dovrebbe esser possibile inserire anche una didascalia dell'immagine (vedi link esempio) che si comporta in base alla selezionata modalità di visualizzazione.


P.S.
per ogni "aiuto" ed incentivo alla tua dedizione nel soddisfare le mie esigenze, contattami in privato 

[ciriman]

ma che cosa centra la parallasse?
fatemi sapere perché la grafica non è decisamente il mio forte 

per parallasse s'intende il movimento indipendente di più livelli sovrapposti su di un comune punto d'osservazione (riassunto spicciolo).. nella pagina che ci hai fatto vedere tu questo non sembra centrare molto (di fatto sembra essere solo un'immagine di sfondo fissa), ma se consideri che in una stessa pagina ci possono essere più immagini da far comparire durante uno scroll allora l'effetto simula quello di far scorrere il livello dove giacciono (virtualmente) le foto di sfondo e il livello dei contenuti. ovvero un ambiente in parallasse

[mmleoni]

.parallasse
la domanda era: 'che c'azzecca sto coso con la parallasse', non 'che è la parallasse'. come vecchio fotografo 'analogico' ho avuto la mia buona dose di mirini galileiani e telemetri a spezzamento, quindi un po' di familiarità con la parallasse c'è l'ho.  qui il punto di osservazione è singolo... 
quanto ad applicare due volte il plugin crea solo due 'finestre' diverse, non un effetto parallasse, almeno a mio parere.
io metto sempre un id 'autoincrement' quando scrivo questo tipo di plugins, proprio per permettere l'uso multiplo dello stesso contenuto, quindi se ti rivedi il link al mio sito (sopra citato) vedrai le due finestre con le due altezze diverse e due immagini diverse. mi sfugge che sarebbe l'opzione "normale o con parallasse" (almeno finché non mi entra in zucca dove è la parallasse).

..il tasto inserisce

quello che vuoi tu è chiaro. si tratta di due plugins, il primo è di tipo content ed effettua il render dell'immagine, il secondo è di tipo editor extension e aiuta l'utente nell'inserimento (e questo è il pezzo costoso, detto tra noi).
ti dirò però perché secondo me non funziona quello che dici tu: l'immagine viene posizionata con

Codice: [Seleziona]

background-size: cover;pertanto verrà ingrandita/rimpicciolita sulla base della finestra del browser, un ridimensionamento automatico ha senso solo lato front end, altrimenti la qualità va a farsi benedire. in questi casi sarebbe meglio che sia una persona a caricare l'immagine della dimensione opportuna (la seconda è 1280x800) e della qualità necessaria (intesa come rapporto di compressione, e, come tu sai di sicuro quest'ultimo varia secondo il tipo di immagine).

ciao,
marco

[ciriman]

come posso fare per ottenere quel che mi serve?se qualcuno è interessato ad aiutarmi in modo pratico lo ringrazio .ciao

[BelinBelan]

Ho apprezzato molto questo post perché ha dato la possibilità di crearsi, a chi ha tempo e voglia, un interessante effetto su alcune immagini nei post rendendo un po' quell'aspetto professionale che hanno ultimamente alcuni template e di capire come, a grandi linee può nascere un plugin.


Ciriman, hai avuto suggerimenti approfonditi su come fare, ovviamente se hai necessità più "professionali" manderai avanti questa richiesta nella sez. annunci o in "privato"


Io nel frattempo mi tengo da parte quest'effetto per un futuro prossimo

[ciriman]

grazie per l'interesse riscontrato. però ancora non ho avuto nessun intervento "pratico" per la sa realizzazione. le discussioni di intuizioni e teorie tecniche per me sono poco utili perche non saprei realizzare il plugin che mi occorre, ne nella versione scarna che andrebbe avvicendata da parametri da inserire nel richiamo del plugin, ne tantomeno in una versione più elaborata come pulsante che inserisce le immagini e le elabora come richiesto.


ho contattato in privato mmeloni ancora senza risposta, ho visto l'ottimo esempio che ha sviluppato e sono estremamente interessato all'utilizzo del suo plugin. aspetto fiducioso la possibilità.


Ho già inserito questo annuncio nella sezione dedicata agli annunci di lavori retribuiti, ma nessuno sembra interessato per ora alla mia richiesta.

[ciriman]

..idea.. ma, se io potessi modificare il plugin, già esistente, preposto all'inserimento di un'immagine nel testo facendo in modo che non inserisca semplicemente un codice tipo:


<img src="images/panorama.jpg">


ma un codice di div nidificati come esempio:



<div class="contenitore-immagine">
   <div class="immagine">
      <div style="background-image: url('images/panorama.jpg')" class="immagine-sfondo">
      

a questo punto me la giocherei solo settando dei valori CSS cosi come ho visto nell'esempio di mmleoni
dovrebbe funzionare...


cosi potrei usare tutte le funzionalità già presenti nel mio editor (JCE editor)  o altro già esistente che si vuole usare, ma semplicemente di lavora di CSS... ora rimane capire quale file inserisce il codice nel contenuto 

[mmleoni]

annunci retribuiti: scusa ma oggi è domenica, e magari gli altri operatori 'professionali' sono anche un poco a riposo.

io sto terminando qualche lavoretto e aspettando di andare al cinema e quindi ero presente sul forum, ma a mezzo servizio e più che altro per rispondere ai post aperti nelle mie sezioni; per vari motivi è passata la segnalazione del tuo post e mi è venuta l'idea.

al pm ti rispondo domani, così come domani avrei valutato l'annuncio, e come immagino faranno altre persone.

abbi un attimo di pazienza.

ciao e buona serata,
marco

[mmleoni]

ps: ho tolto la parte del titolo del topic di apertura in maiuscolo.
poi ti spiego in pm

ciao

[mmleoni]

alessandro ha molta fretta ed io troppe cose da fare al momento, ma questo sarà il prossimo plugin che svilupperò.

se vi piace l'effetto e se non avete fretta fatemelo sapere che vi posterò il link quando lo rilascerò.

ciao,
marco

[ciriman]

il tuo plugin sarà ben gradito a suo tempo... grazie per l'attenzione. Per quanto mi riguarda hai la mia attenzione per quando sarà pronto, cosi da poterlo usare in futuro per altri progetti.