Viewing 1 replies (of 1 total)
  • I am using this code with just colorbox installed, so you can modify it for your purposes (it is Facebook + Pinterest button added to gallery photos):

    $(".gallery").each(function(index, obj){
                var galleryid = Math.floor(Math.random()*10000);
                $(obj).find("a").colorbox({
                  rel:galleryid,
                  maxWidth:"90%",
                  maxHeight:"85%",
                  scalePhotos: true,
                  scrolling: false,
                  current: "Image {current} from {total}",
                  title:function () {
                    galeryURL = $(this).attr("fb-data");
                    var imageURL = $(this).attr("lightbox-url");
                    var postTitle = $(this).attr("postTitle");
                    var code =    '<div id="cboxTitleLeft">';
                    if (typeof FB !== 'undefined') {
                      code = code +   '<div class="FBlike"><div class="fb-like" data-href="' + galeryURL + '" data-send="true" data-layout="button_count" data-width="386" data-show-faces="false" data-font="segoe ui"><\/div><\/div>';
                      code = code +   '<script type="text\/javascript">FB.XFBML.parse(document.getElementById("FBlike"));<\/script>';
                    }
                      code = code +   '<div class="Pinterest"><a href="//pinterest.com/pin/create/button/?url=' + galeryURL + '&media=' + imageURL + '&description=' + postTitle + ' | Ure?enje doma" data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a></div>';
                      code = code + '<\/div>';
                    return code;
                  },
                  href: function () {
                    var imageURL = $(this).attr("lightbox-url");
                    return imageURL;
                  }
                });
              });

    and you need to add this code instead classic image output in gallery code (put it in functions.php):

    $output .= "<{$itemtag} class='gallery-item'>";
        $output .= "
          <{$icontag} class='gallery-icon {$orientation}'>
            <a title='" . $atttitle . "' href='" . $attPageURL . "' lightbox-url='" . $attlink . "' fb-data='" . $attPageURL . "' postTitle='" . $postTitle . "'>
              $image_output
            </a>
          </{$icontag}>";

    I am not using Lightbox Plus Colorbox plugin until now, because it is not working on my site, but I am planing to do so, so I will update this code later.

    Does anybody figured out how to display Google ads in colorbox overlays? ??

Viewing 1 replies (of 1 total)
  • The topic ‘Adding FaceBook share button’ is closed to new replies.