How can I add social Media Buttons (Facebook, Twitter & Co.) to jQuery colorbox?

The aim is to display social media buttons on each image in the jQuery colorbox view. As displaying something other than text in the lightbox is not possible by default (<a href="http://www.jacklmoore.com/colorbox/">jQuery colorbox</a>) (see documentation, demo), we need a custom solution to do the job. Note: As jQuery colorbox is a Plugin for certain content management systems, it is important that the change should be done WITHOUT changing the code of the lightbox and WITHOUT accessing the HTML directly, as Plugins for CMS should not be modified as they will loose update compatibility. The result should look like in attachment 1 (sample.png).

Taggings:

Submitted by David Matthias Stöckl on Wed, 12/11/2013 - 21:51
1 answer

Solution: Adding Social Media Buttons to jQuery colorbox

An appropriate solution for this task is shown with the following code example.

Add the following code into the footer of your website on which the colorbox is displayed (inside the HTML script-tag):


// when document is loaded, start
jQuery(document).ready(function() {

// make variables for each "like" button from social media services you want to display (e.g. facebook, google+, twitter)
var facebook = '*** facebook button code ***';
var twitter = '*** twitter button code ***';
var google = '*** google plus button code ***';

// append the social media buttons to each #cboxContent, the Id of the line below of the Colorbox
jQuery("#cboxContent").append(''+facebook+twitter+google+'');
});

After doing so you will see the social media buttons being displayed inside of the colorbox, however the positioning will be not as you like as the buttons are displayed below the actual line. As you may know, CSS supports negative margins for cases like that. Copy the following CSS into your stylesheet and the buttons will be positioned properly (adjust to your needs):


#cboxSocials {
margin-top:-43px;
}

.cb_social_elem {
float:left;
margin-right:20px;
width:120px;
}

Submitted by David Matthias Stöckl on Wed, 12/11/2013 - 22:01