Create pop-up for Team Members?

[brotskybee]

Hi there,
Once again enjoying this theme. Have an issue though, and I’m wondering if there’s a way to accomplish this using child-theme files instead of modifying the core:

My client has several team members. She wants just an exerpt of their bio displayed on the main Team page, and then a pop-up when you click on the name or “More” button (which I added). I know that lightbox-style pop-ups are set up for the galleries when you click on a specific part of the overlay. But is there an easy way to also set this up for this area?

Here’s a link to the development page in question: (this site is seriously still under development and looking a little wonky at the moment).

Thanks in advance,
~Laura

[Raghavendra]

Laura,

Probably you can achieve this using a custom plugin in WordPress.org. A quick search on Google “wordpress lightbox plugin for text” got me into this article which may help –

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

There are other search results too that may help if this does not meet your need.

Meteorite

[Raghavendra]

Sorry – I had a feeling that this could be done with the lightbox plugin prettyPhoto bundled with the theme but could not try this earlier. Here is an example markup that works –

<div id=”inline-1″ class=”hidden”>
<p>This is inline content opened in prettyPhoto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>

I am not sure you can see the markup right unless you edit this post. You can see some example here –

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone#prettyPhoto

In the middle of this page, look for the demo named Inline Content. You will need to use the class “hidden” to hide the inline div initially with the theme (the demo uses class named hide).

[brotskybee]

Thanks so much. And my apologies for the delay in replying.

I may be misunderstanding the instructions. I want to keep the layout of the Staff page, but I’d just like the auto-created links to open in a lightbox, with the header/footer areas stripped – so just the corresponding image and text stuff from the body.

I’m guessing this is more involved that a simple id change within the corresponding .php file in the theme. If you DO know of a simple solution on that score though, please do feel free to pass it along 😉

~Laura

[Raghavendra]

You do not need to change any PHP file. Just add content like the attached file content with sample HTML to each one of the team members (button + expanded profile content which is hidden initially).

You can just paste this content to any post to see how it works before moving forward with making the change to the page.

[Author]

Posts