StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thats not realy a PHP issue but more a javascript issue. You can use fancybox by adding the <code>rel='fancybox'</code> or <code>class='fancybox'</code> attribute on an <code>a</code> tag and using the basic functionality. Then it will just open the <code>href</code> part in the iframe pop-up. If you open the link in a new tab it will open the <code>href</code> part in the new tab.</p> <p>Now you could also use two seperate links. One for the new tab/no JS link and one for the pop-up. To do that you simple add the new tab link as <code>href</code>, so the default behaviour is open the new tab page.</p> <p>Now to make fancybox open another page you can do several things. One would be to create a completely different link and another would be to append a parameter to the link when its fancybox. The latter will be less efficient for static content like images, so I prefer the first.</p> <p>now instead of the regular JS to open fancybox do something like:</p> <pre><code><a href='newtab.html' data-fancylink='fancy.html' class='fancy'>open me</a> <script> $('.fancy').click(function() { var href = $(this).data('fancylink'); if (href == undefined) { href = $(this).attr('href'); //fall back to default when no fancylink } $.fancybox({ 'autoScale': true, 'autoDimensions': true, 'centerOnScroll': true, 'type': 'iframe', 'href': href }); }); </script> </code></pre> <hr> <p><strong>EDIT</strong> (by JFK) : the general idea is good, however the actual script above won't work without the following tweaks :</p> <pre><code><script> $(document).ready(function () { $('.fancy').click(function (e) { e.preventDefault(); // you still need to prevent default behavior var href = $(this).data('fancylink'); if (href == undefined) { href = this.href; //fall back can be simplified this way } $.fancybox({ type: 'iframe', href: href }); }); }); // ready </script> </code></pre> <p>See <strong><a href="http://jsfiddle.net/9ALxd/" rel="nofollow">JSFIDDLE</a></strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload