Managed it - editing the juicebox social links rather than having a seperate social div.
Some code - c#/ASP.net
Page code-behind
protected string ogimage = "";
protected string ogurl = "";
protected string imageurl = "";
protected void Page_Load(object sender, EventArgs e)
{
//remove query
Uri path = new Uri(Request.Url.GetLeftPart(UriPartial.Path));
//remove file
string pathfolder = path.AbsoluteUri.Remove(path.AbsoluteUri.Length - path.Segments.Last().Length);
if (pathfolder.Substring(pathfolder.Length - 1, 1) == "?")
{ pathfolder = pathfolder.Substring(0, pathfolder.Length - 1); }
ogurl = "<meta property=\"og:url\" content=\"" + Request.Url + "\" />";
if(Request.QueryString["Img"] != null)
{
ogimage = "<meta property=\"og:image\" content=\"" + pathfolder + "images/" + Request.QueryString["Img"] + ".jpg\" />";
imageurl = pathfolder + "images/" + Request.QueryString["Img"] + ".jpg";
}
else
{
ogimage = "<meta property=\"og:image\" content=\"" + pathfolder + "images/_DAF1470.jpg\" />";
imageurl = pathfolder + "images/_DAF1470.jpg";
}
}
Open-graphic section of header
<meta property="og:title" content="Nest 2015" />
<%=ogurl %>
<%=ogimage %>
<meta property="og:image:type" content="image/jpeg" />
Config XML
I have added the filename into the caption of the images.
I don't show captions so this was doable.
I do this so that I can easily specify what image to display.
If not doing this I'd need to reply on the ID - and then need to parse the XML to find the filename.
JQuery/Javascript to alter the social icon click events
<script type="text/javascript">
//create a gallery instance
var jb = new juicebox({
containerid: 'juicebox-container'
});
var FBhandler = function (e,url) {
var fbShareWindow = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url);
window.open(fbShareWindow,"_blank", 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
};
var Twitterhandler = function (e, url) {
var twitShareWindow = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title)
+ "&url=" + encodeURIComponent(url);
window.open(twitShareWindow, "_blank", 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
};
var Gplushandler = function (e, url) {
var gpShareWindow = 'https://plus.google.com/share?url=' + encodeURIComponent(url);
window.open(gpShareWindow, "_blank", 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
};
var Tumblrhandler = function (e, url) {
var tumblrShareWindow = 'https://www.tumblr.com/widgets/share/tool/preview?shareSource=legacy&canonicalUrl=&url=' + encodeURIComponent(url)
+ "&posttype=photo"
+ "&content=<%=imageurl%>"
+ "&caption=" + encodeURIComponent(document.title)
+ "&clickthroughUrl=";
window.open(tumblrShareWindow, "_blank", 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
};
//then set up an event listener
jb.onImageChange = function (e) {
//unbind
$(".jb-bb-btn-facebook").unbind("click");
$(".jb-bb-btn-twitter").unbind("click");
$(".jb-bb-btn-gplus").unbind("click");
$(".jb-bb-btn-tumblr").unbind("click");
//bind
var url = window.location.href.split('?')[0].split('#')[0] + "?Img=" + e.caption + "#" + e.id
$(".jb-bb-btn-facebook").bind("click", function () { FBhandler(e, url); });
var url = window.location.href.split('?')[0].split('#')[0] + "?Img=" + e.caption + "#" + e.id
$(".jb-bb-btn-twitter").bind("click", function () { Twitterhandler(e, url); });
var url = window.location.href.split('?')[0].split('#')[0] + "?Img=" + e.caption + "#" + e.id
$(".jb-bb-btn-gplus").bind("click", function () { Gplushandler(e, url); });
var url = window.location.href.split('?')[0].split('#')[0] + "?Img=" + e.caption + "#" + e.id
$(".jb-bb-btn-tumblr").bind("click", function () { Tumblrhandler(e, url); });
};
</script>