WordPress.org

Ready to get started?Download WordPress

Forums

Simple Staff List
[resolved] lightbox (25 posts)

  1. rickyspires
    Member
    Posted 1 year ago #

    hello.

    i have installed the "Lightbox Plus ColorBox" and i want to show each staff member in a lightbox.

    on my page i have <?php echo do_shortcode('[simple-staff-list]'); ?>
    to show a list of staff members.

    then in the staff members templates page i have added <a href="#" class="lightbox [staff-name]"></a> which will say if the member is clicked to open them in a light box. (which works fine).

    then a have added the lightbox window in the same area.

    which all seems to work except for 1 thing. No matter which member of staff i click on, it always shows the last member of staff in the list in the lightbox and not the on i have clicked on ?

    this is the code in my template:

    [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]

    http://wordpress.org/extend/plugins/simple-staff-list/

  2. rickyspires
    Member
    Posted 1 year ago #

    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 :)

  3. rickyspires
    Member
    Posted 1 year ago #

    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]
  4. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. rickyspires
    Member
    Posted 1 year ago #

    Thats great .thanks :)

  6. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    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:
    http://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.

  7. bobwarrick
    Member
    Posted 1 year ago #

    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?
    http://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:

    http://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.

  8. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    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
    http://pastebin.com/CrQ2vQyn

    Here is the jQuery I used:
    http://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.

  9. rickyspires
    Member
    Posted 1 year ago #

    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. :)

  10. rickyspires
    Member
    Posted 1 year ago #

    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

  11. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Ricky,

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

  12. rickyspires
    Member
    Posted 1 year ago #

    thanks

  13. kdsamra
    Member
    Posted 1 year ago #

    Hi Brett,

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

    Here is my test page: http://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

  14. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    @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.

  15. kdsamra
    Member
    Posted 1 year ago #

    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: http://lokafy.com/test/

    Maybe there is also something wrong with the jQuery?

    Thanks,
    Kiran

  16. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

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

  17. kdsamra
    Member
    Posted 1 year ago #

    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 http://lokafy.com/toronto/ and http://lokafy.com/paris/

    Thanks for the great plugin!

    Kiran

  18. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Kiran,
    Hey man, those look great!

  19. emil.lundgren
    Member
    Posted 10 months ago #

    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]
  20. emil.lundgren
    Member
    Posted 10 months ago #

    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...

  21. JJFisher
    Member
    Posted 10 months ago #

    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: http://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; }
  22. NicheLabs
    Member
    Posted 10 months ago #

    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.

  23. JJFisher
    Member
    Posted 10 months ago #

    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?

  24. NicheLabs
    Member
    Posted 10 months ago #

    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;
    }
  25. JJFisher
    Member
    Posted 10 months ago #

    Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.