• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genesis Featured Post open in lightbox

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Genesis Featured Post open in lightbox

This topic is: resolved

Tagged: Genesis Featured post, lightbox, overlay

  • This topic has 3 replies, 2 voices, and was last updated 8 years, 11 months ago by simbasounds.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 25, 2014 at 5:32 pm #111563
    simbasounds
    Member

    This is a long shot, I know, but here goes..

    Does anyone have any idea how to make posts from the Genesis Featured Posts widget open in a lightbox?
    ie. when a post's thumbnail is clicked-on, the whole post, not just the image should overlay the widget page.

    I'll be building a post thumbnail grid by hiding titles, excerpts, post meta and content in CSS, so I guess the solution would involve something like hijacking the link in jQuery, then un-hiding those items in the overlay.

    It's the hijacking part I need help with, either by filtering the Genesis Featured Posts links to make them meet the jQuery lightbox requirements; or else modifying the jQuery so it triggers an overlay instead of linking to the post.

    June 26, 2014 at 7:07 am #111622
    avgjoegeek
    Member

    I'm no jquery expert but this might give a start in the right direction?

    http://www.endocreative.com/how-to-insert-content-in-a-popup-using-lightbox-plus-for-wordpress/

    This guy was looking for something similar and found a plugin to help.

    June 26, 2014 at 4:56 pm #111677
    simbasounds
    Member

    Ah, thanks, yes I saw that : ) and installed the plugin, tried to get my head around making it work with Genesis Featured Posts. And also started looking at http://defunkt.io/facebox/

    Eventually the designer I'm developing with said he wasn't that keen on the idea anyway, so it's a mind-bender for another day. But I think AJAX would be the way to go. Will update here if I ever get the time to find the full solution.

    October 11, 2014 at 6:49 am #127467
    simbasounds
    Member

    I eventually ended up implementing this on my own site by installing the ShadowBox plugin:
    https://wordpress.org/plugins/shadowbox-js/

    In my archive-portfolio.php I used a rel="shadowbox" link on my image block post links:

    add_action('genesis_entry_content', 'post_thumbnail');
    function post_thumbnail() {
    	if ( has_post_thumbnail() ) { ?>
    		<a href="<?php echo get_page_link(); ?>" rel="shadowbox">
    			<?php the_post_thumbnail( $size, $attr ); ?>
    		</a>
    	<?php }
    }

    This makes the links open the post in an iframe lightbox.

    But the posts in the iframe lightbox had a duplicate header and navigation. Since the posts needed to be able to open as stand-alone posts - say, if linked-to from a Google search - I couldn't remove the duplicate site structure markup with php. They needed to to be hidden using CSS display:none only in the iframe.

    This was achieved by using a script which detects if the post is inside the iframe, and hides structural elements accordingly:

    <script type='text/javascript'>
    if (self !== top) document.write('<style type="text/css"> .site-header,.site-container .nav-primary,.site-container .responsive-primary-menu-container,.site-footer {display: none;}</style>');
    </script>

    Here's the result:
    http://simonbarnett.co.za/portfolio/

    There's an additional issue in that links inside the iframe posts need to open in the full browser window. Currently they open inside the lightbox. The links will need to be filtered to have target="_top". In most cases the archive-portfolio.php can be modified, but I think Genesis uses a custom function for taxonomy links because this doesn't work:

    function change_target($result) {
    	$result = str_replace('<a', '<a target="_top"', $result);
    	return $result;
    }
    add_filter('wp_list_categories', 'change_target');
    add_filter('the_category', 'change_target');

    I'll start a new thread for this query.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble