Menu icon Foundation
Clearing Lightbox social media icons

Hi Everyone! Anton has a question about clearing. Lets help him out! Thanks!

I've been experimenting with the Foundation framework and really love it. Think I will be using it on all of my projects. I just have one question, is it possible to include social share buttons in the Clearing Lightbox? I've tried to include it but with no luck, searched for ways to implement it but with no avail. Any help would be much appreciated as I would like to use the Clearing Lightbox in my projects rather than other plugins.

Kind Regards,

--
Anton

lightboxsocial mediabuttonssocialclearing

Hi Everyone! Anton has a question about clearing. Lets help him out! Thanks!

I've been experimenting with the Foundation framework and really love it. Think I will be using it on all of my projects. I just have one question, is it possible to include social share buttons in the Clearing Lightbox? I've tried to include it but with no luck, searched for ways to implement it but with no avail. Any help would be much appreciated as I would like to use the Clearing Lightbox in my projects rather than other plugins.

Kind Regards,

--
Anton

Stefan Staudenmeyer almost 6 years ago

When, in the page / widget rendering proccess did you trigger your social media DOMElement adding?

Mick almost 6 years ago

I'm surprised this doesn't have more of a response, I too would like to know if this is possible.
I would prefer to use Clearing Lightbox rather than loading another plugin purely for loading social media icons.

Edit:

Here's the best I could come up with using the example of a Pinterest button on each slide:

<ul class="example-orbit" data-orbit>
  <li>
    <img data-caption="<a href='//www.pinterest.com/pin/create/button/' data-pin-do='buttonBookmark'  data-pin-color='white'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png' /></a>" src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li>
    <img data-caption="<a href='//www.pinterest.com/pin/create/button/' data-pin-do='buttonBookmark'  data-pin-color='white'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png' /></a>" src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img data-caption="<a href='//www.pinterest.com/pin/create/button/' data-pin-do='buttonBookmark'  data-pin-color='white'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png' /></a>" src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

You can add the social media sharing code to the data-caption="" element as long as you only use single and not double quotation marks.

An easier way of doing this is if you're using wordpress, to simply drop a shortcode in to the data-caption that calls your social media buttons.