jonathanheilmann / ext-jh_magnificpopup Goto Github PK
View Code? Open in Web Editor NEWTYPO3 CMS Extension to integrate Magnific Popup
License: GNU General Public License v2.0
TYPO3 CMS Extension to integrate Magnific Popup
License: GNU General Public License v2.0
Use new template: https://github.com/TYPO3-Documentation/TYPO3CMS-Example-ExtensionManual
New content
FAQ:
Actually, the extensions uses vendor TYPO3, but it should be Heilmann.
May this change break something?
jh_magnificpopup 0.6.1,
fluid styled content
with the constants:
styles.content.textmedia.linkWrap.lightboxEnabled = 1
styles.content.textmedia.linkWrap.lightboxCssClass = magnificpopup
styles.content.textmedia.linkWrap.lightboxRelAttribute = magnificpopup[{field:uid}]
plugin.tx_jhmagnificpopup.magnificpopup.support.user = .ce-textpic
Ideas:
Related to https://forge.typo3.org/issues/77020
Inside the file
ext-jh_magnificpopup/Resources/Private/Partials/Magnificpopup/ContentTemplates/File/FluidStyledContent.html
a link is created for the image:
<div class="ce-textpic ce-{imageorient} ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<f:if condition="{imageorient} == 'center'"><div class="ce-outer"><div class="ce-inner"></f:if>
<div class="ce-row">
<div class="ce-column">
<figure class="image">
{tsLink->f:format.raw()}
<f:if condition="{imagecaption}">
<figcaption>{imagecaption}</figcaption>
</f:if>
</figure>
</div>
</div>
<f:if condition="{imageorient} == 'center'"></div></div></f:if>
</div>
</div>
But i need that link for the "figcaption", too. Is that possible? Or around the complete "figure" tag?
Hello,
do you think it is possible (Sometime) to add the following option to your extension (as option)?
I have added it in the "Default.html" and tested.
Thank you very much
Goarli
image: {
titleSrc: 'title',
image: {
titleSrc: function(item) {
return item.el.attr('title') + ' · <a href="'+item.src+'" target="_blank">download</a>';
},
Adds "view original image" link to caption that just opens image via default browser method.
http://codepen.io/dimsemenov/pen/qGIlh
Solution:
Swap lines 158 and 159 in Core\EidRequest to
$this->typoScriptFrontendController->checkAlternativeIdMethods();
$this->typoScriptFrontendController->determineId();
i'm running typo3 7.6.10 and jh_magnificpopup 0.6.4
i'm not able to change sucessfully the template root path. plugin.tx_jhmagnificpopup.view.templateRootPath
also i'm not able to remove the inline js generated by the extension.
i tried everythin but not successfully
this is really strange..
best regards Markus
Fatal error: Call to undefined method TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController::getCompressedTCarray() in jh_magnificpopup/Classes/Core/EidRequest.php
solution: http://stackoverflow.com/a/32225730
I use often lightboxes in that way, that my content-creators can set up an Image on the page and define the output-size for the normal Web-View. But if the visitors click on the image (with Click-Enlarage activate) the "original" big Image shall be open in the lightbox.
Currently always the already processed Image is shown.
If you want to show the "original Image" you have to change the source-parameter for link-generating:
Actual:
tt_content.image.20.1.imageLinkWrap.enable.ifEmpty.typolink.parameter.data = file:current:link
New (for opening the original Images)
tt_content.image.20.1.imageLinkWrap.enable.ifEmpty.typolink.parameter.data = file:current:publicUrl
tt_content.image.20.1.imageLinkWrap.typolink.parameter.data = file:current:publicUrl
Actually the lines
// EXT:fluid_styled_content
styles.content.textmedia.linkWrap {
lightboxEnabled = 1
lightboxCssClass = magnificpopup
lightboxRelAttribute = magnificpopup[{field:uid}]
}
are located in setup, but should be located in constants.
Fields layout,select_key,pages,recursive are not required.
If you use the link-type "image", it is possible to insert a image file reference (from the FAL).
Here you can also use the image metadata fields "title" and "description" to overwrite the labels. Thats all ok.
But in multilingual sites it's still used the image reference (and title / description) from the default language, that's not correct. If you want define for each language a different image/title/description (translated labels), this has NO impact. The different file referece/labels are saved in the backend but in the frontend there are ignored, always the image (labels) from the default language are shown... i think that's a bug.
The only workarround at the moment is, to translate the labels (meta information) of the image in the FAL.. Then make only in the default language a file reference and do not override the labels and use the original from FAL.
But in this way you habe NO chance to diplay a language dependent image....
For a language dependent image the bug have to be fixed :-)
Thanks.
Hello
can you fix the compatibility of the EXT:jh_magnificpopup with the actual TYPO3 CMS version 8.5 and higher?
That would be great.
Thank you very much.
Regards,
Angelo
It could be sufficient (I only tested the "Default" configuration, no CE, no RTE) to add to the manual that the following TS Constants must be included:
styles.content.textmedia.linkWrap.lightboxEnabled = 1
styles.content.textmedia.linkWrap.lightboxCssClass = magnificpopup
styles.content.textmedia.linkWrap.lightboxRelAttribute = magnificpopup[{field:uid}]
plugin.tx_jhmagnificpopup.magnificpopup.support.user = .ce-textpic
My Javascript didn't work anymore cause of using the id attribute with the same value multiple times.
If an content element is included as "normal content" and also as "inline content for magnific popup" on the same page the parsed site has the id of the original content element multiple times.
I am pretty sure that this is also an effect on all other magnific popup types.
Solution:
Don't use the orignal TYPO3 uid of the content element. Use id=mfp-1234 instead of id="1234". Or (better way) id="mfp-1-1234" (1 stands for the uid of the plugin, 1234 for the content element)
Hi Jonathan,
for better TYPO3 7.6 support could you please include a composer.json?
Thanks!
Illegal offset in Classes/Hooks/class.tx_jhmagnificpopup_tcemain.php line 57, key 'data' not available
Alt and title attribute not displayed in html code for the link picture
example with empty alt attribute, although it is filled in backend:
<div class="csc-textpic-image csc-textpic-last">
<a href="http://xxx.com/index.php?id=3" class="mfp-inline-18" data-mfp-src="#mfp-inline-18">
<img src="http://xxx.com/fileadmin/templates/img/Illu/03_icon_01.jpg" alt="" width="200" height="200"></a>
</div>
When activating JumpURL using config.jumpurl_enabled=1
the links are skipped by the extension filter.
Here is an example of a JumpURL image link:
<a href="testgallery/?jumpurl=fileadmin%2Fgallery%2FP1050941.JPG&juHash=7e326c89af1971c5764975e041d0d8492895dc1a"><img src="fileadmin/_processed_/2/6/csm_P1050941_ae4f011de7.jpg" width="290" height="218"></a>
Hi!
Can´t get this extension to work in TYPO3 6.2.27.
Don´t get any JS errors.
Think it´s because image enlarge links in picture CE´s are like:
<a target="thePicture" onclick="openPic('index.php?eID=tx_cms_showpic&file=209&md5=5705060e998318a81c320ab4b725ae876b584827&parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjEyMDAiO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D','thePicture','width=898,height=600,status=0,menubar=0'); return false;" href="index.php?eID=tx_cms_showpic&file=209&md5=5705060e998318a81c320ab4b725ae876b584827&parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjEyMDAiO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D"><img width="1280" border="0" height="855" alt="" src="fileadmin/_processed_/csm_Galerie_0000_ostnor5_42ed865651.jpg"></a>
Can´t find anything to resolve this...
If using with plugin it works except linked images appear at top of the website content area. Like they are not getting hidden by JS or so.
Hey there,
I just had an issue where after an upgrade from TYPO3 LTS 6 to TYPO3 LTS 7 the jh_magnificpopup stopped working. Thought I write about here so you can check it out or maybe it helps some soul that's been stuck like me.
As a side note:
Weirdly enough EXT:news-FAL-elements were fine (beautiful lightbox showed up) but for normal CE and IRRE in EXT:news there was only openPic.
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
-> This way it renders without openPic and with a direct link instead the very long show_pic-link in the .
But that stopped working in TYPO3 7.
I needed much longer than I should have but here is how I resolved it:
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.default.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
tt_content.image.20.default.1.imageLinkWrap.directImageLink = 1
Now the extension works again.
I found nothing about a needed change from .1 to .default anywhere.
Besides that - works like a charm, like it did in TYPO3 LTS 6.
Hello,
it seems that this extension is not supported by the current LTS Release (8.7.6). Are there any plans for it?
fin swimmer
How to is not available in documentation (see 2bda635)
eID is marked as deprecated within version 2.0.0 and should be removed in version 3.0.0.
Rendering content via TypoScript using a custom page typeNum is much more faster and comfortable.
In the following context, the "Close"-button is displayed twice "Inside" + "Outside":
•Display typ: "Inline Content"
•Link typ : "Text"
•Method: "Ajax" <-------- !!!
•Magnific Popup -> closeBrnInside : true
We are using Version 0.6.4 (T3 6.2.x)
Requires TYPO3 CMS 7.5 bugfix https://forge.typo3.org/issues/70314
Stress in Constant Editor and Plugin Flexform, that removalDelay is a ms value.
The curled braces are re-rendered by fluid and thus replaced. Cause some JavaScript is missing then, the JS engine runs into an error.
Solution: Move rendered JavaScript to footer via PageRenderer::class
Requires a new ViewHelper and re-written Templates/Magnificpopup/Show.html
As EXT:bootstrap_package contains since version 7.0.0 PhotoSwipe as lightbox the compatibility ist lost and the TypoSript constant plugin.tx_jhmagnificpopup.magnificpopup.support.tx_bootstrappackage = 1
is not working as expected anymore because "the content rendering definitions have completly changed and are now streamlined to use only FluidTemplates".
TYPO3: 8.7.13
Magnificpopup: 1.0.0
Using "link" it works, while using "inline" or "content-reference" it throws an error:
Oops, an error occurred!
The Fluid template files
"E:/Siti/xamppv7/htdocs/typo3.demo8/web/typo3conf/ext/jh_magnificpopup/Resources/Private/Partials/Magnificpopup/.html",
"E:/Siti/xamppv7/htdocs/typo3.demo8/web/typo3conf/ext/jh_magnificpopup/Resources/Private/Partials/Magnificpopup/"
could not be loaded.
I am not using custom partials for the plugin,I have just installed it.
We I have multiple instances of magnificpopup on the same page, the lightbox-content gets mixed up - e.g.: Lightbox 1 shows the content of lightbox 3, Lightbox 2 the content of lightbox 1 - somentimes, not always . In the Backend everything is linked correctly.
If the Minifier for TYPO3 (min) extension is active is not possible to have multiple Magnific Popup elements on the same page as there is a problem with a disappearing semicolon. Specifically the semicolon at the end of the magnificPopup()-Function (see: https://github.com/jonathanheilmann/ext-jh_magnificpopup/blob/master/Resources/Private/Partials/Magnificpopup/Inline.html).
renderStatic()
instead of render()
in ViewHelpersselector .img-wrap
is used, but it should be .image-wrap
Hi, when i use the inline type for content elements i get an additional opening and closing html tag inside my sourcecode.
It looks something like this:
...
<div class="tx-jhmagnificpopup-pi1">
<html >
</html>
<a href="de/startseite/" class="mfp-inline-60" data-mfp-src="#mfp-inline-60">Details</a>
<div id="mfp-inline-60" class="white-popup-block mfp-hide">
...
</div>
...
how can i get rid of this additional html tags?
I am using jh_magnificpopup 0.6.4 with TYPO3 CMS 7.6.13
document, how to set the image width in lightbox:
Contant-Editor -> CONTENT -> "Click-enlarge Image Width [styles.content.imgtext.linkWrap.width]"
In the following context, the "Close"-button isn't working:
In this constellation, the "X" (and ESC) isn't working with EDGE Browser. Only the click on background triggers the close of the popup.
We are using Version 0.6.4 (T3 6.2.x)
Hi. My main page is reachable over "https" and the external lightbox link is normal "http" to a subdomain.
Then the following error appears:
This request has been blocked; the content must be served over HTTPS.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.