lightbox

If i can get this working… I will be able to just have a list of images and names on the main page and the rest of the info in a lightbox ?? which would be perfect ??

i just tried it a different way useing groups but that just gives me an empty lightbox

[staff_loop]
<div id="staffBlock"> <a href="#" class="lightbox">
	<img class="userImg" src="[staff-photo-url]" alt="[staff-name] : [staff-title]">
	<div class="userBasic">
               [staff-name-formatted]
               [staff-position-formatted]
               [staff-email-link]
               <h4> [staff-phone]</h4>
               [staff-bio-formatted]
      </div>
</a></div>

<div class="videoLbox"><div class="close">x</div>
<?php echo do_shortcode('[simple-staff-list group="[staff-name]"]'); ?>
</div>
[/staff_loop]

Hey man, if I get some time this weekend, I’ll see if I can get something working on this. My brain is a little fried this evening. Haha.

Thats great .thanks ??

Hey Ricky,

I was messing around on my test site for the plugin and I think I’ve got something like what you were talking about working:
https://brettshumaker.com/testsite/

Check it out and if that’s similar to what you were wanting I can work you through getting it set up that way.

Hi Brett,
I wish to the exact same thing as Ricky and your testsite is perfect to what I am looking for! With your implementation, what happens when you have more than two staff members? Will additional staff members wrap to the next “row”, as one adds more staff members?
https://brettshumaker.com/testsite/

So, to get started, I implemented Ricky’s code (the first code block in this thread) and activated the Lightbox Plus ColorBox.

[staff_loop]

<div id="staffBlock">
<a href="#" class="lightbox [staff-name]">
	<img class="userImg" src="[staff-photo-url]" alt="[staff-name] : [staff-title]">
	<div class="userBasic">
               [staff-name-formatted]
               [staff-position-formatted]
               [staff-email-link]
               <h4> [staff-phone]</h4>
               [staff-bio-formatted]
      </div>
</a>
</div>

<div class="videoLbox [staff-name]"><div class="close">x</div>
  <div id="staffBlock">
	<img class="userImg" src="[staff-photo-url]" alt="[staff-name] : [staff-title]">
	<div class="userBasic">
               [staff-name-formatted]
               [staff-position-formatted]
               [staff-email-link]
               <h4> [staff-phone]</h4>
               [staff-bio-formatted]
      </div>
</div>

</div>
[/staff_loop]

I am getting the same behavior from the code, except that each entry seems to be repeated. The second entry begins with a small “x” above each photo.

Here is the site, as it looks with the above code implemented, demonstrating the above issue:

https://www.theridgechurch.org/staff-and-ministry-leaders/

On this page, I used the shortcode:
[simple-staff-list]

Can you share the template code and any custom CSS or other requirements that you used to implement your testsite, please? Also, when I select the photos, I assume I will need smaller versions of the photos so that all the staff can be visibile in a table.

Hey guys,
Here’s how my test site is working. The code/CSS below was hastily put together and could possibly be done more efficiently. This is really just a proof-of-concept kind of thing.

Staff Loop Template

[staff_loop]
	<div rel="show-staff" class="[staff-name-slug]"><img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]"><br />
                <span class="vis-staff-name">[staff-name]</span>
        </div>
	<div class="staff-member-info-wrap" id="[staff-name-slug]">
		[staff-name-formatted]
		[staff-position-formatted]
		[staff-bio-formatted]
		[staff-email-link]
	</div>
[/staff_loop]

Staff Page CSS
https://pastebin.com/CrQ2vQyn

Here is the jQuery I used:
https://pastebin.com/GVvykDJe

You’ll need to include the script in the WordPress header yourself.

@bobwarrick To your question about what happens when there are more than two staff members: They will just keep filling up the row until they run out of room and then drop to the next row. But this all depends on the CSS styling that you decide on for your own site.

Hello Guys.

Brett, your amazing. THANKS for much for putting in the time to work this out for us. It looks great.

I will definitely use it ??

Rick. ??

Hi Brett,

I cant get it to work ??

I copied your template code over mine
then copied your css code in to the admin css area
then i copied you jquery in to my header

and nothing ?? just a list of people showing all info

Hey Ricky,

Do you have a link so I can take a look?

thanks

Hi Brett,

I followed the directions you provided but I don’t get the same thing as on your test site (https://brettshumaker.com/testsite/).

Here is my test page: https://lokafy.com/test/

It just has the full bio of each person, clicking has no effect. What am I doing wrong?

If I can’t get the same effect as on your test site my alternative is to have a page with the person’s full bio. Could you guide me on how I would go about doing that?

Thanks,
Kiran

@kdsamra The CSS from the plugin is not being loaded into the page. Go to the “Templates” page and uncheck the “Write to external CSS file?” box. Your theme or hosting setup might be preventing the plugin from writing the file to your server. Unchecking that box will make the plugin write your custom styles directly to the page.

That should do the trick.

Hi Brett,

Thanks for the quick response. Actually that “Write to external CSS file?” box was unchecked to begin with. I checked it to see how that would impact the output. I now have the photo with the name underneath, but still no response when I click on the image.

See here: https://lokafy.com/test/

Maybe there is also something wrong with the jQuery?

Thanks,
Kiran

Sorry for the delay Kiran. I went to check that link but it 404s now.