Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2015-11-09 15:03:16

dorka
Member
Registered: 2012-10-04
Posts: 90

How to display individual article in a overlay popup (lightbox style)?

Hi everybody,
Is there generic way around for displaying individual article in a popup / iframe in txp? What’s the trick? Thanks!

Offline

#2 2015-11-10 08:50:20

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: How to display individual article in a overlay popup (lightbox style)?

It depends on the lightbox/modal script you are using for the popup and the method you using to call up the popup content.

Inline: If your information for the popup is relatively short/contained, you can include it inline in your page source using the normal txp tags placing it in named divs, e.g.

An example with using an inline div with magnific popup:

<txp:article_custom category="popup-articles" break="">

<!-- this is the heading and popup trigger link -->
<h2><txp:title /> <a href="#<txp:article_url_title />" class="open-popup-link">More…</a></h2>

<!-- this is the corresponding popup content in an inline div -->
<div id="<txp:article_url_title />" class="white-popup mfp-hide">
  <txp:body />
</div>

</txp:article_custom> 

Then add the styles and initiate the magnific script as per the instructions. The category="popup-articles" is just an example; you can use an id, section, whatever to select the popup articles you need.

Ajax: You can also call an entirely different page to appear in the popup via ajax, you can call the popup content via ajax. This is how you would do that using ajax with magnetic popup:

<txp:article_custom category="popup-articles" break="">

<!-- this is the heading and popup trigger link -->
<h2><txp:title /> <a href="<txp:permlink />" class="ajax-popup-link">More…</a></h2>

</txp:article_custom> 

Again, remember to include the magnific script and css in your page too.

With ajax there’s the problem that you might potentially get headers, footers, navigation and stuff that you don’t need in the popup. There’s two ways to get around that:

1) If the target article you are opening in the popup doesn’t appear elsewhere in its own right on your site, you can define its page template / form to just include the html code you need for the popup, e.g. without the html head, footers, navigation etc.

2) If that page does appear in its own right somewhere else on your site, or you want a fallback option with the whole page layout for non-javascript users, you can use jdw_if_ajax in your page template for the target article to block out sections of code that shouldn’t appear when the page is retrieved via ajax but will appear when the page is called up normally, e.g.

<txp:jdw_if_not_ajax>
// skipped by ajax
</txp:jdw_if_not_ajax>

Iframe: You can use an iframe in a popup too (infos for iframe type popups with magnetic popup) but you can’t then omit page sections in the target article that you don’t need.

If you meant an iframe in the normal page flow (i.e. not in a popup), you don’t need to to do that as you can simply include them normally in the page using the txp tags. If your problem is that the articles are too long, and you’d like them to be contained in a box, include them with txp tags in a div, and then use css to giv that div a fixed height and a vertical scrollbar, e.g.:

.scrolling-box {
  height:400px;
  overflow-y: scroll;
}

PS: You can use another popup/modal script instead of magnific but will need to adapt the triggers accordingly depending on how that script works.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2015-11-11 14:38:14

dorka
Member
Registered: 2012-10-04
Posts: 90

Re: How to display individual article in a overlay popup (lightbox style)?

Jakob, thank you so much! The ajax function is exactly what I need.
Unfortunately the link to jdw_if_ajax plugin is broken, but I will try to find it somehow.

Offline

Board footer

Powered by FluxBB