[Helene CParticipant]

I’d like to display staff bios in lightbox “popups”. Ideally the popups would contain formatted text + an image but I’ll settle for just text.

I tried to repurpose the button code from: http://theme.co/x/member/forums/topic/lightbox-with-button-form/ to use on my images (see first image on this page: http://www.gbchealth.org.php53-15.ord1-1.websitetestlink.com/about/staff) but when called from an image rather than a button, the same method seems to try to pull up the whole page, not just the referenced div.

Please advise…

Thanks!

[ChristianModerator]

Hey Helene,

Thanks for writing in.

Please post the shortcodes you used here so we can see.

Thanks.

[Helene CParticipant]

Thanks for your reply. This is the current code, repurposed, as I say, from here: http://theme.co/x/member/forums/topic/lightbox-with-button-form/

======================

<div id="fareeda" style="display: none;">
<h4>Fareeda Ehtesham</h4>
<em>Program Coordinator, Global Fund PSD & WHO/RBM Private Sector Constituency</em>

Fareeda is the Coordinator for the Global Fund Private Sector Delegation (PSD) in the Membership and Advisory services team. In this role, she supports the PSD Focal Point to the Global Fund to fight AIDS, Tuberculosis and Malaria to ensure the private sector's effective representation and engagement at the Global Fund’s Board. Fareeda also organizes meetings and regular convenings of the PSD, and oversees the production of publications and other relevant communication for the PSD.

Prior to her role at GBCHealth, she interned at UNDP's Private Sector Division. During this time, she worked on the Inclusive Markets Development project, which is focused on building sustainable value chains for private sector development, and on publications such as the MDGs: Everyone’s business.

Fareeda has been educated in Saudi Arabia, India and the United States. She holds a Masters of Arts in International Relations from the City College of New York-CUNY and a Bachelors in Commerce (Honours) from Osmania University in India.

</div>

[column type="one-fifth"][image type="circle" float="none" link="true" info="none" src="379" href="#fareeda" class="staff-bio" ]
<h4>Fareeda Ehtesham</h4>
Program Coordinator, Global Fund PSD & WHO/RBM Private Sector Constituency[/column]

[lightbox selector=".staff-bio"]

====================================================

That said, ideally I’d have a separate post for each staff bio and would use the lightbox to display that html. It looks like ilightbox has the capability to do all this (http://ilightbox.net/index.html) but I’m unsure how to do it with X’s shortcodes.

Just let me know what my options are.

Thanks again!

[KoryKeymaster]

Hey Helene,

Since you have multiple unique sections of content that you want to target for this, you’ll want to make sure to utilize unique values in the is or class attribute of your images to target with the [lightbox] shortcode. Additionally, as stated in the thread your referenced, there is currently no way to add the data-type=“inline” attribute that is necessary on the lightbox triggers to launch HTML content, so you will effectively have to handcode your images instead of utilizing the [image] shortcode. Your markup will need to look something like the following:

<div id="bio-fareeda" style="display: none;">
  ...Fareeda bio...
</div>

<a id="trigger-fareeda" class="x-img x-img-link x-img-circle none" href="#bio-fareeda" data-toggle="none" data-options="thumbnail: '/wp-content/uploads/2014/02/fareeda.jpg'" data-type="inline">
  <img src="/wp-content/uploads/2014/02/fareeda.jpg">
</a>

[lightbox selector="#trigger-fareeda"]

Thanks!

[Author]

Posts