Menu icon Foundation

Designer | Melbourne, Australia

My Posts




My Comments

Mick commented on Rafi Benkual's post almost 6 years

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.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Rafi Benkual's post almost 6 years

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.

Posts Followed

Following

  • No Content

Followers

  • No Content