2. July 2013
von Blackbam

|| How to add social media buttons to jQuery Colorbox

Recently a client wanted to display social media buttons like facebook, twitter and google plus at the bottom of each image in jQuery Colorbox. As it is bad practice to change the source code of a Plugin, the following code worked well for this job.

 

Note: This client wanted the full URL to be liked, not the image itself – if you want to do so, you should  like/recommend the attachemnt URL of the colorbox images, not the URL of the page. I will leave this up to you, to change the code in this way.

 

Add the following jQuery code to the footer of your page:

		jQuery(document).ready(function() { 
			var facebook = '
';
			var twitter = '
';
			var google = '
';
			
		    jQuery("#cboxContent").append('
'+facebook+twitter+google+'
'); 
		});
CSS code
#cboxSocials {
	margin-top:-43px;
}

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

 

Social Buttons Developer Links

Facebook Like

Twitter

Google+

LinkedIn

Pinterest

Share

Dieser Eintrag wurde am 2. July 2013 um 15:15 in der Kategorie jQuery veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.


Tags: , ,

Already 12 comments belonging to "How to add social media buttons to jQuery Colorbox":

Kommentare abonnieren (RSS) or URL Trackback

Warning: Undefined variable $comment_id in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/comments.php on line 32

peter ames   says:

on 09. October 2013 at 20:17 on clock


Great script! Thanks! Any idea how I'd actually make it able to like the image and not the entire page?
Warning: Undefined variable $comment_id in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/comments.php on line 32