Hi I know a lot has already been asked about this, but I cant find the answer that will help me out.
What I have is a webpage with a number of galleries that are using fancybox to display the big pictures. What I want is to include the twitter and facebook like buttons to the fancybox overlay of the image.
This is the page: http://studiovsf.nl/portretten-voorbeelden.html
I tried it first using JSFiddle and there everything works great ( http://jsfiddle.net/kmLWf/247/ )
html:
<a class="fancybox" title=" " data-fancybox-group="gallery1" href="http://www.studiovsf.nl/portfolio/portretten/carmen_1.jpg">using text iso image since i have not enough reputations</a><br/>
javascript:
$(".fancybox")
.fancybox({
beforeShow: function () {
// Add tweet button
this.title = 'Tweet ';
// 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>';
},
afterShow: function () {
// Render tweet button
twttr.widgets.load();
},
helpers: {
title: {
type: 'inside'
}
}
});
But when I put this code in my webpage only the twitter icon is shown, the facebook like button is missing.
I can't seem to figure out why.
If someone could tell me what I'm doing wrong I would be very greatful.
Thanks,
Ruben.
If you compare the web developer net console for the working Fiddle and your website you'll notice the following: At the Fiddle the Facebook link is
https://www.facebook.com/plugins/like.php?href=http://www.studiovsf.nl/portfolio/portretten/carmen_1.jpg&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23
But at your website it's
https://www.facebook.com/plugins/like.php?href=portfolio/portretten/jardi_betty.jpg&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23
The relevant part is the value for href= as it's a relative link on your website. As the code provided in the Fiddle for the Facebook-Button is
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + ....
for each anchor tag and the href is absolute, you can check if it'll work if you adjust it to
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href='
+ 'http://www.studiovsf.nl/' + this.href + ....
Maybe not an issue, but in addition, you have a script error on your page:
TypeError: jQuery(...).superfish is not a function
jQuery('ul.sf-menu').superfish();
for line 3 jQuery('ul.sf-menu').superfish(); of responsivemenu.js
Related
Info before reading: this code is written in vanilla js / jquery.
I have a page with a product list with infinite products and I want to scroll a bit down, click a product, go to that product detail page and when I click the browser back button it sends me to the list page at the same height where I was scrolling. So basically a pain to set up without a framework to keep track of state.
I've managed to get a POC for this appending an iframe with the product details content page and place it "on top" of the page. This, however, does not work in Firefox. Does anyone have any idea why?
I thought it was a z-index issue, however the iframe's body is empty. This is the iframe in Firefox:
<iframe id="productDetails" class="ProductDetailsFrame js-product-details-frame" src="http://localhost:3000/ProductDetailPage.html?productId=1888" scrolling="yes" frameborder="0">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
Here is the function I use to append the iframe:
(...)
function getBaseUrl() {
var re = new RegExp(/^.*\//);
return re.exec(window.location.href);
}
(...)
urlRoot = getBaseUrl()[0];
productLoadedUrl = urlRoot + 'ProductDetailPage.html?productId=' + productId;
(...)
function addIframe() {
$('<iframe>', {
src: productLoadedUrl,
id: 'productDetails',
class: 'ProductDetailsFrame js-product-details-frame',
frameborder: 0,
scrolling: 'yes'
}).appendTo($body);
}
I'm a graphic design student and I'm making a portfolio website. I wanted a lightbox as a way to show my work. I finally got everything working, except for one problem.
Whenever I load my page, the lightbox also loads. I don't want this. I want the lightbox to only show when people click on thumbnails of my work.
I followed this tutorial from Tutsplus because I am not that familiar with jQuery. The only thing I changed in the script was so the lightbox would fade in and fade out when clicking.
This is the code I'm using
</script><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
var maxheightvalue = $("#lightbox").height() -60;
$("#lightbox img").css("max-height", maxheightvalue + "px");
$('#lightbox').fadeIn(400);
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox" style="display:none">' +
'<p>Click to close<\/p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'<\/div>' +
'<\/div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').fadeOut(300);
});
});
//]]>
</script>
I am pretty sure it's a real mess, but so far it's worked except for that one little thing. But if someone could clean it up (if possible) I would be very grateful.
your can try using this example
$(document).ready(function(){
$("#some").on("click", function(){
$("#gallery").lightbox();
});
});
the above is to load the lightbox for ur gallery or desired ID.
http://api.jquery.com/on/
Earlier I used Sharrre just for one button set per page and it worked just fine. However, I had to change that and now I have 4 sets of buttons and the data-text and data-url values are not showing in the facebook popup - instead it loads the text from the actual linked page which wouldn't bother me so much if it wouldn't come from a hidden form showing "Contact usNameEmail.." etc. It works with twitter and shows first the data-text value and then data-url, just like it should.
I'm using a system almost like the Sharrre example 2 (http://sharrre.com/example2.html) and my codes are now:
HTML
<div class="share-buttons" data-url="MY URL" data-text="MY TEXT"></div>
and the jQuery
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
So there's 4 times that html part on my page and I added the .each function trying to solve this but it didn't have any effect. Any hints or advices to solve this?
Here's a fiddle of the problem: http://jsfiddle.net/b54sc/
I found out a solutions for this myself. But if there's any other ideas please share them! Thanks to #CBroe for pointing to the right direction.
Best practice would be using Open Graph meta tags but that's not possible for me because my site is one-page-site so all the content is on the same page. And since meta tags need to be in the HEAD of the html this won't suit me because I'd need four different urls and titles.
But while browsing for the meta tags solution I found another fairly easy solution.
So, Sharrre uses Facebook's sharer.php which is already deprecated. Thou it's deprecated it's still available to use and it's quite common because it doesn't require app_id. But it has changed: it doesn't accept the 't' parameter in the url for the title so that's the reason why my data-text wasn't working. And there's a solution.
This is the page I found:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
Changing the url a little bit does the thing. The title part needs to be 'p[title]' instead of just 't'. And there's also other parameters to use.
THE FIX to Sharrre
Sharrre uses the old method which doesn't work anymore and I just changed the popup creation function in the sharrre.js file on line 325.
From
window.open("http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&t="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
To
window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&p[title]="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
I don't know how long this solution works because Facebook can change it again anytime but it'll do for now!
Another way would be usign a Facebook dialog but that needs the app_id.
try this: I have added title, url in your code
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
title: $(this).attr('data-href'),
url: $(this).attr('data-url'),
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:
$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});
This will show the div with the ID of 344.
However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.
I modified Jack Moore's example:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return 'Open In New Window';
}});
so that it looks like this:
$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
var elementID = $(this).attr('id');
return elementID;
}});
The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.
I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:
return "#'+elementID+'";
I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?
Thanks for your help,
Jiert
I didn't really like any of the answers given above. This is how I did it (similar but not quite the same).
I also fully commented it for people a bit new to Javascript and the colorbox plug in.
$(document).ready(function() { //waits until the DOM has finished loading
if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
$('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
$(url).hide(); //hides the lightbox content div
$(this).colorbox({
inline:true, // so it knows that it's looking for an internal href
href:url, // tells it which content to show
width:"70%",
onOpen:function(){ //triggers a callback when the lightbox opens
$(url).show(); //when the lightbox opens, show the content div
},
onCleanup:function(){
$(url).hide(); //hides the content div when the lightbox closes
}
}).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
//you could also use "return false" for the same effect but I proffered that way
})
}
});
And this is the html:
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
I think it would work with multiple lightboxes on the one page but I haven't tested it with that.
I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"
Mine looks like this:
Javascript:
<script>
$(document).ready(function () {
$("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
var elementID = $(this).attr('id');
return "#" + elementID;
}
});
});
</script>
And the html looks like (I tried changing the display:none):
<a class='colorbox' href="#">Inline HTML</a>
<div style="display:none">
<div id="pop">
This data is to be displayed in colorbox
</div>
</div>
return "#" + elementID;
will have the desired effect as David says.
This is the way I got it to work
HTML: (taken from the example in one of the answers)
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
Javascript:
$('a.lightboxTrigger').click(function(){
var ref = $(this).attr("href");
$.colorbox({ html: $(ref).html() });
$.colorbox.resize();
});
I'm using jquery Cycle to create a featured content slider. In my pager I have an image from each post and a link to the permalink. I can't link to the page, but I hope this image will give an idea of what I am doing:
My problem is that when I click the permalinks in the right nav, they do not open. The links are formed properly and I'm able to right click and open in a new window. It seems like the slider is intercepting my click as a JS click and not a click on the acutaly href link.
Any one experience this problem?
here is my JS
jQuery('#slideWrap').cycle({
speed: 200,
timeout: 0,
pager: '#featuredNav ul',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + jQuery(slide).find(".featuredSlideImage > img").attr("src") + '" height="50" width="75" />' + jQuery(slide).find(".featuredSlideDesc > h3").html() + ' </li>';
}
});
From http://jquery.malsup.com/cycle/options.html, I would suggest trying the option:
allowPagerClickBubble
And setting it to true instead of its default, false.