Hi Karl,
Can you tell me if it is possible to display the page "sitemap" page using the modal-plugin?
I want this page to be displayed in this way, I also tried using data-popup but every other line has a black background and so not very readable ...
Thank you.
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
modal-plugin7 posts
Re: modal-plugin
Hi Thomas,
When you say "the page sitemap", are you referring to the specific X3 sitemap XML page?
https://demo.photo.gallery/sitemap/
Before I give a direct answer, I would like to inform that modal-type plugins (like X3 modal) can load external content by AJAX, but this is meant to be pure fragments of html, loaded and injected into the modal/popup element for display. The loaded content however, is not meant to be full standalone pages (like the sitemap you are referring to), because they include full page code (<html> <body> <style> <script> etc). After Ajax loads a full page like that, it can't simply "inject" a "full page" into an existing element (modal) on your page. Thus, the highly preferred Ajax method cannot be used to load "full pages".
Iframe
Thus, if you want to load a full page into either the X3 modal or the X3 popup, this will have to be done with the less elegant <iframe> method, instead of AJAX.
Modal Iframe
Since you can't use built-in Ajax methods, you would have to load the given page into an <iframe> container inside the modal element. The problem with <iframe> content (unlike content injected directly into the page from ajax), is that you don't really know the height, so you just need to set a fixed height to the iframe container. The following code would work:
Not sure X3 modal is a better choice than the X3 popup though ...
X3 Popup
When loading an external URL into X3 popup, it will automatically use <iframe> method. Additionally, it will always set the height to 100% viewport height. You have already tried this and technically got it working ...
Let me know if you need help to create a custom popup class that would be more appropriate for loading the sitemap page on top of. Basically it would require a light background, since that is what the standalone sitemap page is based upon.
When you say "the page sitemap", are you referring to the specific X3 sitemap XML page?
https://demo.photo.gallery/sitemap/
Before I give a direct answer, I would like to inform that modal-type plugins (like X3 modal) can load external content by AJAX, but this is meant to be pure fragments of html, loaded and injected into the modal/popup element for display. The loaded content however, is not meant to be full standalone pages (like the sitemap you are referring to), because they include full page code (<html> <body> <style> <script> etc). After Ajax loads a full page like that, it can't simply "inject" a "full page" into an existing element (modal) on your page. Thus, the highly preferred Ajax method cannot be used to load "full pages".
Iframe
Thus, if you want to load a full page into either the X3 modal or the X3 popup, this will have to be done with the less elegant <iframe> method, instead of AJAX.
Modal Iframe
Since you can't use built-in Ajax methods, you would have to load the given page into an <iframe> container inside the modal element. The problem with <iframe> content (unlike content injected directly into the page from ajax), is that you don't really know the height, so you just need to set a fixed height to the iframe container. The following code would work:
Code
<button data-reveal-id="modal_id">sitemap in modal</button>
<div id="modal_id" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<iframe src="https://demo.photo.gallery/sitemap/" width="100%" frameborder="0" style="height:400px;"></iframe>
</div>X3 Popup
When loading an external URL into X3 popup, it will automatically use <iframe> method. Additionally, it will always set the height to 100% viewport height. You have already tried this and technically got it working ...
This can be solved by adding your own custom CSS to your X3 popup. The data-popup-class setting is already touched upon in https://demo.photo.gallery/examples/plugins/popup/:Thomas wrote:I also tried using data-popup but every other line has a black background and so not very readable ...
Code
<!-- Use the data-popup-class to define your own custom CSS wrapper class for the popup. Useful if you want to define your own CSS rules for popup-content or popup-links. -->
<a data-popup-content="Howdy! This content is wrapped inside an element with a <em>custom_css_class</em>." data-popup-class="custom_class">Custom</a>Re: modal-plugin
Karl thank you for that comprehensive answer...
So I just put the city code below:
By cons as you can see it by going to my website, the width of the page with the "iframe" method is just a little ...
So if you can give me the solution to fix this, I will be very grateful to you.
Otherwise it seems from all I've read everywhere that the method "iframe" was if possible to avoid ...
In my case it is not annoying as well it works but if you find another way, I am also a buyer.
I purposely left the two links in the footer of my site "Iframe" and "Data Popup" so you see a little different rendering method.
Thank you.
So I just put the city code below:
Code
<a href="#" data-reveal-id="myModal">Mentions légales</a> -
<a href="#" data-reveal-id="modal_id">Iframe</a>
<div id="modal_id" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<iframe src="http://www.clubphotomel.fr/sitemap/" width="100%" frameborder="0" style="height:600px;"></iframe>
</div> -
<a href="http://www.clubphotomel.fr/sitemap/" data-popup>Data Popup</a>So if you can give me the solution to fix this, I will be very grateful to you.
Otherwise it seems from all I've read everywhere that the method "iframe" was if possible to avoid ...
In my case it is not annoying as well it works but if you find another way, I am also a buyer.
I purposely left the two links in the footer of my site "Iframe" and "Data Popup" so you see a little different rendering method.
Thank you.
Modérateur du forum français Imagevue
Re: modal-plugin
You can change the width of the modal window by setting a width class, for example "large":Thomas wrote:By cons as you can see it by going to my website, the width of the page with the "iframe" method is just a little ...
So if you can give me the solution to fix this, I will be very grateful to you.
Code
class="reveal-modal large"- tiny: Set the width to 30%.
- small: Set the width to 40%.
- medium: Set the width to 60%.
- large: Set the width to 70%.
- xlarge: Set the width to 95%.
- full: Set the width and height to 100%
Code
class="reveal-modal" style="width:700px; max-width:100%;"To be honest, as long as it's a simple page like the the sitemap, <iframe> will work fine, as you can see.Thomas wrote:Otherwise it seems from all I've read everywhere that the method "iframe" was if possible to avoid ...
In my case it is not annoying as well it works but if you find another way, I am also a buyer.
Re: modal-plugin
Karl impeccable !!!
Just one last thing, how to replace the title "XML Sitemap" with "The text of my choice"
Thanks again :)
Just one last thing, how to replace the title "XML Sitemap" with "The text of my choice"
Thanks again :)
Modérateur du forum français Imagevue
Re: modal-plugin
This is part of the XML template file /public/xsl/xml-sitemap.xsl. You can edit this file, including the <h1>XML Sitemap</h1>. Keep in mind, when updating X3 in the future, you will need to make sure to keep your customized xml-sitemap.xsl.Thomas wrote:Just one last thing, how to replace the title "XML Sitemap" with "The text of my choice"