How to enable portfolio popup image

  1. Login to your WordPress dashboard.

  2. Click ‘Theme Options’ → ‘Front Page’ → ‘Portfolio Module’.

  3. Scroll down until you see the option ‘Portfolio Item Image Popup‘. Click the toggle so that ‘Popup Image’ is selected (see image below).

What’s the difference?

  • Full Content—The full WordPress portfolio (text and images) opens in a space above the portfolio. This includes controls to navigate backwards and forwards between portfolio items.

  • Popup image—Only the portfolio images open in a framed popup above the main portfolio area.

  1. ❗️Prior to version 1.10.0, you will also need to edit one of the theme files. Go to ‘Appearance’ → ‘Theme file editor’.

  2. 🎉 From version 1.12.0, you have a third option: link directly to portfolio posts.

  3. In the ‘Theme Files’ panel on the right click ‘js’ → ‘app.js’.

  4. Delete the code: fancybox.fancybox({ loop: false }); (around line 950).

  5. Delete the ‘//’ in front of the code: $("#" +popupItemID).children('.fancybox').fancybox();

  6. Cut and paste the line of code from step #7 above so it’s on the line before the line ending: …('.fancybox:first-child').trigger('click'); You can see what it should look like below.

  7. Click the blue ‘Update File’ button at the bottom to save your changes.

if ($("#"+popupItemID).length) {
    if($('.popup_preview').children('a').hasClass('fancybox')){
        $('.popup_preview').children('a').removeClass('fancybox');
    }
    $("#"+popupItemID).children('a').addClass('fancybox');
    $("#"+popupItemID).children('.fancybox').fancybox();
    $("#"+popupItemID).children('.fancybox:first-child').trigger('click');
}