Di base utilizzando il click sull'immagine per visualizzarla in un formato più grande TYPO3 crea una finestra del browser in popup.
Con l'utilizzo di template e strutture mobile diventa sempre più indispensabile trovare soluzioni eleganti e soprattutto compatibili con i diversi dispositivi in mercato.
Di seguito una breve guida per modificare la tipologia di popup utilizzato dal sito web al click sulla immagine.
MAGNIFIC POPUP
Magnific Popup è un lightbox responsive in grado fornire una migliore esperienza per l'utente con qualsiasi dispositivo.
1)Scaricare i file js e i css che compongono il Magnific Popup (link)
2) Nel TSref (template typoscript) inserire le seguenti linee di codice per includere il jQuery ed inizializzare Magnific Popup:
# Add the CSS and JS files
page {
includeCSS {
fancy = fileadmin/templates/lib/magnific-popup/magnific-popup.css
}
includeJSFooter {
fancybox = fileadmin/templates/lib/magnific-popup/jquery.magnific-popup.min.js
}
}
page.jsFooterInline.999 = TEXT
page.jsFooterInline.999.value (
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
)
3) Inserire, sempre all'interno del file TSref le seguenti linee di codice che vanno a modificare la tipologia di link per l'immagine:
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class="image-popup-vertical-fit" rel="fancybox{field:uid}" title="{file:current:description}"
}
In questo modo l'utente cliccando sulla immagine aprirà un popup perfettamente compatibile con tutti i dispositivi.
Nel caso in cui si voglia inserire il click sulla immagine di default basta aggiungere le seguenti linee di codice:
tt_content.image.20.1.imageLinkWrap.enable.field >
tt_content.image.20.1.imageLinkWrap.enable = 1