Ah - it's working now without me doing anything extra.
There must have been some caching when I tried it the other day after updating jbcore
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Daf
Pages 1
Ah - it's working now without me doing anything extra.
There must have been some caching when I tried it the other day after updating jbcore
Maybe I wasn't clear : I have 2 situations, both hosted on the same IIS/ASP server / website
And I test both on the same browser (Google Chrome 70.0 on Windows 10)
- Gallery generated by Juicebox Builder Pro (js + html files) - download button appears and works
- Gallery coded into ASPX page using external config generated by ASHX file : download button does not appear
Maybe there's something not right with my declaration of showDownloadButton or where I've put it (config vs JS in page)
A while ago I read that showDownloadButton only works when running within PHP - and so discounted using it - I've been using open in new window instead.
(I run in IIS / ASP environment)
However I recently created a gallery using JuiceboxBuilder-Pro (v 1.5.1) and uploaded the gallery as is (index.html etc) - and the download button shows and works!
It doesn't seem to work in my embedded galleries where
showDownloadButton="true"
(in ASP ashx file pretending to be an xml file)
I've replaced/updated the jbcore folder
Is there an explanation for this and am I likely to get download working in embedded gallery on IIS ?
Thanks
Would be lovely to enable Download button for systems other than PHP e.g. ASP.
One option might be to have a generic button which does a page request.
On asp/.net this page could just do a file.transfer followed by response.end
PS Yes I know I can do a Open in new window - but this isn't optimal.
According to the Nexus 7 Tech Specs on this Google page, the Nexus 7 has a screen resolution of 1280 x 800 and, as noted on the Juicebox Screen Modes Support Section:
Large Screen Mode (LSM) is displayed on screens of 1024x768 pixels or bigger.
May well be the Nexus 7 v2 launched 2013 - screen res 1200 x 1920 pixels (323 ppi)
Facebook share behaviour is inconsistent i.e. the selected photo doesn't always get reaped by FB.
I think this is more a Facebook issue than something with my code.
Not sure if it's something that I can influence or not.
e.g. could be difference between URLS:
/Default.aspx?Img=_DAF0389
or
/?Img=_DAF0389
and og:url value
Or possibly a FB cache issue.
G+ is consistent.
Will likely need to tweak it to incorporate URL rewrites/FriendlyURL
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>Ok thanks.
I'm guessing there may be alternative methods, two I have in mind:
Seperate/custom share links
- Not show the Juicebox share buttons.
- create my own share link in a floating div, which points to a page with parameter that the code behind can read and adjust og:image appropraietly - these are updated via Juicebox API : onImageChange(e) . I did something similar to this in simpleviewer
Replace Juicebox click function
- A Call from onImageChange(e) calls jQuery $('.jg-bb-button.jb-bb-brn-facebook').unbind('click');
- Add my own click event - linking to page with parameter
Not sure if this will work - but will give it a go.
I guess it may be possible to do in a similar way to Simpleviewer method - i.e. create an independent set of share icons - using the API to update these links ?
But altering the inbuilt share icons would be good/nicer.
Just bought juicebox and coming back to this.
Sorry if there are newer threads - but this came when I searched.
So is there any way of altering og:image with Facebook share link ?
Thought worth asking in case Juicebox has an API now.
e.g. method described above:
- Instead of a share link : index.html#34
it does a link something like:
- index.html?Image=34
or
-index.html?Image=filename
This would mean back-end code could read the image info and alter the og:image tag appropriately.
Ah - extra issue would be if someone copied the URL to post in Facebook.
The URL in browser only has hash
e.g.
http://domain.com/GalleryPage#12
Not the verion with ID for setting og:image
http://domain.com/GalleryPage?ID=12#12
On another version I did do some Javascript to check for the presence of this ID, if not there would redirect to include it. Not the nicest of solutions.
window.onload = function()
{
var hashval= window.location.hash;
if(hashval.length>0){
if(!isNaN(hashval.substring(1, hashval.length)))
{
window.location.replace(window.location.protocol + "//" + window.location.host + window.location.pathname + "?ID=" + hashval.substring(1, hashval.length));
}
}
}There is also no way to change the data passed in the share URL. This is hard-coded into the 'juicebox.js' file which is obfuscated and cannot be modified.
Ah shame / Thanks.
The method I mentioned works with Simpleviewer so guess it would with Juicebox too.
(Not purchased Juicebox yet so can't try)
For those that might read this - the majority is as per simpleviewer facebook forum examples:
http://www.simpleviewer.net/forum/viewt … p?id=15213
http://www.simpleviewer.net/forum/viewt … p?id=13243
- Set up API call to call local Javascript (svImageChange) think on Juicebox this would be "onImageChange"
- This function:
1. Sets index after the hash
2. Adds an ID parameter to the temporary url plus hash (since server side code can't read hash value)
3. Sets the source of the facebook iFrame using this temp url
function svImageChange(index) {
//set hash for direct link on current url
document.location = "#" + (index + 1);
//get iFrame
var original = document.getElementById("fb").src;
//set ID + hash for like url
var newurl = document.location.toString().substr(0, (document.location.toString()).lastIndexOf("/")+1);
newurl = newurl + "?ID=" + (index+1) + "#"+(index+1);
var modified = original.replace(/\?href=(.*?)&/, "?href=" + encodeURIComponent(newurl) +"&");
document.getElementById("fb").src = modified;
};- So facebook like/share iframe source is something like http://domain.com/GalleryPage?ID=12#12
- This way Simpleviewer/client-side can read the index after the hash - and set the correct image
- Server side can read the index in"ID=" parameter, then
- Parse the XML - since my filenames are not the index to find the filename
- Set the og:image in server side code before rendering thepage, so when FAcebook reads the url - it gets the correct thumbnail
There is of course a slight cost to this since the Facebook iFrame refreshes each time you view a different image.
There was another issue which I can't recall now.
Is there a simple way to share/facebook the current image being viewed?
Specifically using the Facebook/Share icons ?
Was possible in Simpleviwer but only with some coding/tweaks:
- Like buttons in seperate floating/absolute DIV
- Use the API alter source of FAcebook like iFrame so that the Facebook like link would update for each image viewed
- Use Direct linking to show the specific image when a use clicked on the facebook link
- Use server side code to alter the og:image when FAcebook would call for one.
I imagine this would be possible with Juicebox too.
However I would like it to be cleaner, using the inbuilt share button - Is there an API/method where I can alter the "shareURL" when each image is viewed ?
Pages 1
Juicebox Support Forum → Posts by Daf
Powered by PunBB, supported by Informer Technologies, Inc.