Interazione fra Supersized jquery e magnific popup
Taggato: magnific popup, supersized
- Questo topic ha 9 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 2 mesi fa da jqueryitalia.
- AutorePost
- 21 Febbraio 2015 alle 17:22 #6617sheol77Partecipante
Ciao a tutti,
sto cercando di far funzionare su un mio sito l’apertura lightbox di un video con magnific-popup da un link presente nella caption di una immagine caricata con jquery supersized.
Se utilizzo il solito richiamo di magnific-popup non funziona.Se invece lo richiamo così il popup si apre ma al secondo passaggio della slide non funziona più:
jQuery(window).bind("load", function () { jQuery('#controls-wrapper #slidecaption a.video-home').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); });
Avete qualche consiglio?
grazie
sheol77
21 Febbraio 2015 alle 19:42 #6620jqueryitaliaAmministratoreDifficile darti una risposta senza vedere anche il codice HTML.
Prova ad inserirlo su jsfiddle.net o pastebin.com e vediamo come possiamo aiutarti 😉
22 Febbraio 2015 alle 00:01 #6621sheol77PartecipanteGrazie per la celere risposta. Non sono riuscito a inserire il codice in pastebin, in compenso ho ricreato in una pagina test sul sito il problema.
http://www.labattagliola.it/?page_id=530&preview=true
Ci sono 2 pulsanti player (solo lo stesso div) uno inserito nella didascalia di supersized e l’altro invece nel corpo del sito. richiamano lo stesso codice di magnificpopup ma quello in supersized non funziona.
Inserendo il codice di prima funziona solo una vola
jQuery(window).bind("load", function () { jQuery('#controls-wrapper #slidecaption a.video-home').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); });
Penso dipenda da come supesized richiami le immagini ma non riesco a venirne a capo.
Grazie 1000
sheol7723 Febbraio 2015 alle 10:35 #6625jqueryitaliaAmministratorePurtroppo il link che hai fornito è quello relativo al backend di wordpress e non è raggiungibile (404 error).
Puoi fornire il link reale?
23 Febbraio 2015 alle 12:40 #6626sheol77PartecipanteMi scuso per l’errore. il contenuto creato era in bozza e non pubblicato. adesso dovrebbe essere raggiungibile al seguente indirizzo.
http://www.labattagliola.it/test/
Grazie ancora
sheol77
23 Febbraio 2015 alle 14:02 #6627jqueryitaliaAmministratoreLa soluzione non è banale: si tratta di lavorare con le api di entrambi i plugin.
Come prima cosa nelle slides di supersized lascia solo gli elementi image e title ed elimina tutto il resto.
Successivamente inserisci nel title un’ancora con classe prefissata (nel miop esempio la classe si chiama videolink) con href il link del video da visualizzare.A questo punto devi intercettare l’evento click su tale ancora ed associarlo al magnificPopup.
Per fare questo devi scrivere il seguente codice:$('#slidecaption').on('click', '.videolink', function (e) { e.preventDefault(); api.playToggle(); var myAnchor = $(this); myAnchor.magnificPopup({ items: { src: myAnchor.attr('href'), type: 'iframe' }, mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false, callbacks: { close: function () { api.playToggle(); } } }).magnificPopup('open'); });
Tale codice non fa altro che:
- prevenire l’apertura della pagina del video al click dell’ancora ( con e..preventDefault() )
- bloccare lo scorrimento delle immagini di background ( con api.playToggle(); )
- recuperare l’indirizzo del video ( con myAnchor.attr(‘href’) )
- aprire la popup di magnificPopup
- alla chiusura, riabilitare lo scorrimento delle immagini di supersized (callbacks close … )
Trovi l’esempio completo funzionante a questo indirizzo: jsfiddle.net/jquery_italia/x3zqudto/
Buon lavoro!
23 Febbraio 2015 alle 14:38 #6630sheol77PartecipanteNon ho parole per ringraziarti. Stasera cercherò di inserire il codice.
Grazie
sheol77
23 Febbraio 2015 alle 15:57 #6631jqueryitaliaAmministratoreSe vuoi sostenere la community una piccola donazione è sempre gradita 😛 😉
23 Febbraio 2015 alle 22:55 #6633sheol77PartecipanteHo inserito il codice ed è perfettamente funzionante. Sostenere sarà un piacere.
Sheol77
23 Febbraio 2015 alle 23:02 #6634jqueryitaliaAmministratoreSono contento che tutto funzioni e ti ringrazio per la donazione che abbiamo ricevuto giusto ora 😉
Alla prossima!
- AutorePost
- Devi essere connesso per rispondere a questo topic.