I have a site with a fancyBox gallery. I have added the Facebook like button to the gallery so I have a like for each image in the gallery. Problem is, that when clicking like on one of them, it doens't poste to facebook. However, it saves who likes what, so when others open the same gallery they can see who has liked what, but it's not posted.
I need to have each liked image to be posted on facebook.
I have tried with jsfiddle, but no matter what I do I can't get it to work: http://jsfiddle.net/sZG4L/
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").attr('rel', 'gallery').fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=standard&show_faces=true&width=450&action=like&font&colorscheme=light&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>';
}
},
helpers : {
title : { type : 'inside' },
buttons : {}
},
afterLoad : function() {
this.title = (this.index + 1) + ' / ' + this.group.length + ' ';
}
});
});
I guess I need some sort of variable, so my "this.href" points to each image, also after it is closed, maybe some dynamically function. I have been searching for this, but not been able to find out.
I have also tried updating the facebook like to html5, but then I'm not able to get it visible.
Hope someone can help.
Related
I've got a feeling this is impossible, but I thought I'd ask anyway. There are a couple of similar questions, but none fix my particular problem.
I've got a site with a couple of fancybox galleries (link here). The client wants a like button on each image, which will link back to that specific image. As the site is live I've taken down the like button for now.
I've added anchor links to each image so I can open them from a URL no problem - like so http://www.izzyhodge.com/portfolio/index.html#image01. I can also get the actual like button up no problem, as I'm already using a bit of java to add the "poem" hover over thing (it just includes the contents of a bunch of divs in respect to each image). However, when I add a like button using the Facebook code, not only does it add another like button on the next image in a different position, but the button likes the main portfolio page not the anchor link.
The only solutions I could find for using an anchor link with the Facebook button used meta tags in the header of the liked page, which of course I can't do.
I'd really appreciate some help with this one! BTW, I'm using Fancybox 2.0, and I'm using the HTML5 method of adding a button (not sure if I have to change doctype for this?).
EDIT: I'm now trying to do this using the Social Buttons JSfiddle here, however I'm using the alt tag as the title and I'm not sure how to combine the two pieces of code. My JS now looks like:
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeShow : function() {
if (this.title) {
// New line
this.title += '<br />';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
}
}); // fancybox
}); // ready
If I remove;
this.title = alt;
I get a div which appears about the right size for the like button, but there's nothing in it! This could be due to my custom title formatting in the CSS.
HTML for Fancybox:
<div id="thumb-container">
<a id="image01" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_1.jpg"><img src="/images/portfolio/thumbs/th_1.jpg" alt="<h2>LOLA LURKING IN THE LILYPADS <br/> Book Cover (Book in progress) <br/> Pencil and Digital</h2>"/></a>
<a id="image02" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_2.jpg"><img src="/images/portfolio/thumbs/th_2.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE OTTER<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
<a id="image03" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_3.jpg"><img src="/images/portfolio/thumbs/th_3.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE POLAR BEAR<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
ETC
</div>
<div id="appendContent" style="display: none;">
<div><div class="fb-like" data-href="http://www.izzyhodge.com/portfolio/index.html#image01" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div>
<div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/otterpoem.png" alt=""/></a></h2></div>
<div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/polarbearpoem.png" alt=""/></a></h2></div>
ETC
Cheers!
The issue is that this line
this.title = alt;
will override your previous title, which included the facebook button. You should rather do :
this.title += alt;
full code :
$(".fancybox").fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title += alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
},
helpers: {
title: {
type: 'inside'
}
}
});
JSFIDDLE
On the other hand, bear in mind that this line
if (this.title)
validates if the title attribute exists on the <a> element .... in your case it does and it simple says image01, image02. etc. so it's also shown in the fancybox'a title.
If you just want to use the title attribute to show up on mouse hover but not in the fancybox's title, then remove the condition and built the title from scratch inside the callback like :
$(".fancybox").fancybox({
beforeShow: function () {
// New line
this.title = '<br />'; // here we start the title
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title += alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
},
helpers: {
title: {
type: 'inside'
}
}
});
JSFIDDLE (Updated)
I was wondering if some could help me to produce another case in Fancybox 2 media helper for Soundcloud. I need it to load the soundclooud iframe when the fancybox is triggered - otherwise with a number of embeds things go really slow.
I'm not very familiar with regular expressions - hence my enquiry.
The google part looks like this:
google_maps : {
matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
type : 'iframe',
url : function( rez ) {
return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
}
}
Now if we take the standard iframe code for soundcloud:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F91535490"></iframe>
I believe we would take the url from the iframe as the direct link does not contain the id of the track - only string representation of it.
What I've got so far (trying hard ;) - is the following, which doesn't work:
soundcloud : {
matcher : /w\.soundcloud\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|url\?)(.*)/i,
type : 'iframe',
url : function( rez ) {
return '//w.soundcloud.com/player/?url=$1';
}
}
Could someone point me in the right direction here please?
Ok - for those who also wonder - I've managed to get it to work with the following:
soundcloud : {
matcher : /w\.soundcloud\.com\/player\/(.*)\/?(.*)/,
type : 'iframe',
url : function( rez, params, obj ) {
obj.width = '600px';
obj.height = '166px';
return '//w.soundcloud.com/player/' + rez[1];
}
}
I found this script online that add a pin it button to fancybox v2. Here is the working example:
http://scottgale.com/blogsamples/fancybox-pinterest/index.html
Im working on a site on the Hubspot CMS. For those who are familiar, Fancybox 1.3.4 comes included with Hubspot. And you really don't get editing access to any of the files or scripts associated with it.
The Fancybox works as a gallery module (or widget) so users can just upload images.
I was wondering if there is a way to modify this original script to work with how fancybox 1 is implemented on my site.
Here is my page:
http://www.signdealz.com/gallery-test/
Here is the script:
<script type="text/javascript">
//NOTE: this uses fancybox 2
$(document).ready(function() {
$('.fancybox').fancybox({
//set the next and previous effects so that they make sense
//the elastic method is confusing to the user
nextEffect: 'fade',
prevEffect: 'fade',
//set the position of the title
helpers : {
title: {
// title position options:
// 'float', 'inside', 'outside' or 'over'
type: 'inside'
}
},
beforeShow: function () {
//if you already have titles
//on your fancybox you can append
if(this.title) {
//set description to current title
//this will set what posts
var description = this.title;
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
//put the path to the image you want to share here
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
//add title information
+'<span>'+this.title+'</span>';
//if you don't already have titles
//you can just make the title the pinterest button
} else {
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
}
}
});
});
</script>
Any help is greatly appreciated!
This is an example of how to add the Pinterest button to your fancybox's (v1.3.4) title using the options titlePosition and titleFormat. If your anchor has a title then it will be displayed along the button, otherwise the button will be displayed alone.
This script is based on the script your found for v2.x but tweaking to options for v1.3.4.
$(".fancybox").fancybox({
"titlePosition": "inside",
"titleFormat": function () {
return this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+this.title+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'+
'<span>'+this.title+'</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'+
'<span> </span></div>'
}
});
See JSFIDDLE
NOTE : this is for fancybox v1.3.4
EDIT (Jan 30, 2014) :
New JSFIDDLE using CDN for fancybox files to avoid possible 403 forbidden errors while serving the files from fancybox.net server.
I am making an app and i want to have the facebook "Like" button in the bottom of a page.
Is it even possible? I have played around with different things and this is what i have right now.
var win = Ti.UI.currentWindow;
win.showNavBar(); // Force the navbar to show
var bgImage = Ti.UI.createImageView({
height : 'auto',
top : -11,
image : 'images/h-4.jpg',
zIndex : 0
});
win.add(bgImage);
var ticksterImage = Ti.UI.createImageView({
height : 'auto',
top : 1,
image : 'images/takida.png',
zIndex : 0
});
win.add(ticksterImage);
var facelike = Ti.UI.createWebView({
html: '<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=368268836546636" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:80px;" allowTransparency="true"></iframe>',
height: '80dp',
bottom: 1,
});
win.add(facelike);
Am i going about this wrong? Should i have HTML5 or XFBML instead of iframe? I have tried all three but with no result.
I just get: Error loading app://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=234826439948817
Is it another way of doing this?
Thanx
//R
— asked 6 hours ago by Rickard Harrysson
I'd recommend not using a webview for it - try using the Ti.Facebook module. That will give you a lot more flexability in allowing the user to login to Facebook via Titanium. See the KitchenSink for examples.
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/facebook.js
If you must use a website, the html must be a full webpage, not just the iframe. It should start with <html><head/><body>. I recommend creating a webpage outside of Titanium that works, then plug the html of that page in the html property.
I'm new to mediaelements.js
at the end of my video, I wish that the user is redirected to another page
I have tried something like
<script>
$(function(){
$('audio,video').mediaelementplayer({
success: function(player, node) {
window.location = "http://google.com";
});
}
});
});
</script>
but I have not been successfull at all, maybe someone would have an idea
This worked for me. 'player1' is the id of the video
<script>
new MediaElement('player1', {
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
//Do Stuff here
//alert("sometext");
window.location = "http://google.com";
}, false);
},
});
</script>
The code I posted was for the media element player. I looks like you're using the video.js player in the link you posted. I'm not sure how that would work but I did find this... help.videojs.com/discussions/questions/26-redirect-to-url-once-video-has-ended