lightbox

Hi Brett,

Sorry I’ve been travelling over the past couple of weeks. I was able to get another solution to work. You can see the final result at https://lokafy.com/toronto/ and https://lokafy.com/paris/

Thanks for the great plugin!

Kiran

Kiran,
Hey man, those look great!

Hi,

I’m trying to implement a similar solution as the one kdsamra got on his website. So far I’ve managed to get the lightbox to show, but depending on what I put as id for the “lightbox-div” and in the link, I either get the whole page inside the lightbox, or if I manually type in a id, I just get the bio of the first member, and this shows on any of the member I press.

Do you have any tips for me on how to get this working so I can show the [staff-bio-formatted] for each member in a lightbox?

Here are my current Staff-loop:

[staff_loop]
	<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
	<div class="staff-member-info-wrap">
		<a href="#test" class="fancybox-inline">[staff-name-formatted]</a>
		<p>[staff-position-formatted]</p>
		<div style="display:none" class="fancybox-hidden">
			<div id="test">
				[staff-bio-formatted]
			</div>
		</div>
	</div>
[/staff_loop]

I came up with a “fix” for it, I used the facebook URL field to type in a unique ID for each member, and then used this code as the id for the div and the link wich worked for me ??

Maybe not the best solution, but works for now…

Hi

Thanks for the great plugin! I’m using the template and jQuery posted in this thread by the developer, and an edited version of the CSS, for some reason the lightboxes for the centre staff cross the page margin, and those for the right hand staff won’t appear, how do I fix this?

Here’s a link to the page: https://kclmsa.co.uk/msa-committee/

Here’s my CSS:

/*  div wrapped around entire staff list  */
div.staff-member-listing {

}

div[rel=show-staff] {
        cursor: pointer;
}

/*  div wrapped around each staff member  */
div.staff-member {
        padding-bottom: 2em;
position:relative;
display: inline-block !important;
padding: 0 1em;
}

img.staff-member-photo {
border:thin solid #000000;
border-radius: 11px;
}

img.staff-member-photo:hover {
border:thin solid #e6ac47;
border-radius: 11px
}

/*  "Even" staff member  */
div.staff-member.even {

}

/*  "Odd" staff member  */
div.staff-member.odd {
        margin-top: 2em;
}

/*  Last staff member  */
div.staff-member.last {
        padding-bottom: 0;
}

/*  Wrap around staff info  */

.staff-member-info-wrap {
        display:none;
        background: #eee;
        position: absolute;
        border-radius: 11px;
        border: thin solid #ccc;
        padding: 1em;
        font-size: .75em;
        width: 180%;
        top: -2%;
        left: 104%;
        box-shadow: 0px 0px 24px rgba(0, 0, 0, .2);
        z-index: 1000;
}

/*  [staff-bio-formatted]  */
div.staff-member-bio {

}

/*  p tags within [staff-bio-formatted]  */
div.staff-member-bio p {

}

/*  [staff-photo]  */
img.staff-member-photo {
        float: left;
}

/*  [staff-email-link]  */
.staff-member-email {

}

/*  [staff-name-formatted]  */
div.staff-member-listing h3.staff-member-name {
        margin: 0;
}

/*  [staff-position-formatted]  */
div.staff-member-listing h4.staff-member-position {
        margin: 0;
        font-style: italic;
}

/* Clearfix for div.staff-member */
div.staff-member:after {
        content: "";
        display: block;
        clear: both;
}

/* Clearfix for <= IE7 */
* html div.staff-member { height: 1%; }
div.staff-member { display: block; }

I found an easy way to do this using the plugin Easy Fancybox.

First install the plugin and activate it.

Then modify your template as follows (the actual fields can be changed, the import parts are the link, the hidden div element and the id of the next div element.

[staff_loop]
<div class="staff-summary">
	<div class="staff-thumb">
		<a id="inline" href="#[staff-name-slug]" class="fancybox"><img class="staff-member-photo" src="[staff-photo-url]"></a>
	</div>
	<div class="staff-member-info-wrap">
		<h3><a id="inline" href="#[staff-name-slug]" class="fancybox">[staff-name]</a></h3>
		<p class="staff-position">[staff-position]</p>
	</div>
</div>
<div style="display:none">
	<div id="[staff-name-slug]" class="staff-full">
		<h1>[staff-name]</h1>
		<p class="staff-position">[staff-position]</p>
		<img class="staff-member-photo" src="[staff-photo-url]">
		[staff-email-link]
		<span>phone</span>: [staff-fax]
                [staff-bio]
       </div>
</div>

Styling is up to you and of course the layout as well.

Hi Niche,

That works perfectly, thank you! I’m having an issue where the staff are now displaying in a single column, I can’t seem to get them to display in three columns as they were before. Is there a mistake in the CSS I posted above, or am I doing something else wrong?

Try changing this:

div.staff-member {
    border: medium none;
    display: inline-block !important;
    position: relative;
}

To this:

div.staff-member {
    border: medium none;
    display: inline-block !important;
    float: left;
    padding: 0 18px;
    position: relative;
}

Thank you so much!