Support » Plugin: Simple Staff List » lightbox

  • Resolved rickyspires

    (@rickyspires)


    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/

Viewing 15 replies - 1 through 15 (of 24 total)
  • Thread Starter rickyspires

    (@rickyspires)

    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 🙂

    Thread Starter rickyspires

    (@rickyspires)

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

    (@brettshumaker)

    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.

    Thread Starter rickyspires

    (@rickyspires)

    Thats great .thanks 🙂

    Plugin Author Brett Shumaker

    (@brettshumaker)

    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.

    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.

    Plugin Author Brett Shumaker

    (@brettshumaker)

    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.

    Thread Starter rickyspires

    (@rickyspires)

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

    Thread Starter rickyspires

    (@rickyspires)

    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

    Plugin Author Brett Shumaker

    (@brettshumaker)

    Hey Ricky,

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

    Thread Starter rickyspires

    (@rickyspires)

    thanks

    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

    Plugin Author Brett Shumaker

    (@brettshumaker)

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

    Maybe there is also something wrong with the jQuery?

    Thanks,
    Kiran

    Plugin Author Brett Shumaker

    (@brettshumaker)

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

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘lightbox’ is closed to new replies.