We Keep Coding

facebook like button not showing in fancybox title

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

jQuery Lightbox shows up when opening page

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/

Bootstrap Popover content clickable when hidden

My site has multiple popovers over a map (just a div with background image) with clickable icons:
When clicking those icons, a popover is shown. This popover has a carousel that contains text with links:
When I click outside the popover, all popovers are hidden. This supposedly works ok. I got the code from this Stack Overflow question.
But the real issue occurs when you click outside the popover to hide it again. The popover is hidden, but it's still in the DOM. This means the links are still clickable!
When I click the plus icon to hide the popover, the popover is hidden (removed?), but when clicking outside the plus (i.e. anywhere on the page), the popover is still present (but not visible) right above </body>.
Please help! This annoys the hell out of me.. :(
Edit: Might be worth mentioned that the popovers are dynamically added:
$('.plus').each(function(i) {
var $self = $(this);
$self.popover({
html: true,
title: false,
placement: function() {
return 'auto left'; // TODO: calculate placing
},
content: function() {
var html = '<div id="carousel-' + i + '" class="carousel slide">';
var list = '<ol class="carousel-indicators">';
var slides = '<div class="carousel-inner">';
var count = 0;
$('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {
// add indicator for slide
list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';
// add html for slide
slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';
// increase counter
count++;
});
// merge all html
html += list + '</ol>' + slides + '</div></div>';
return html;
}
});

I had a similar issue, big headache, and searching I got to this page:
https://github.com/twbs/bootstrap/issues/4215
Apparently when you add Popovers to dynamic content you need to add this option:
selector: '[rel="popover"]'
in your case it would be
$self.popover({
selector: '[rel="popover"]'
html: true,
title: false,
...
This resolved all my "hidden popover clicks detection" issues.

This is what I did in order to prevent elements within the hidden popover from being clicked
$('button.new-history').on('hidden.bs.popover', function () {
$(this).next().remove();
})
The idea being that when the popover is hidden, you should remove it from the DOM.
Hope it helps!

None of the other solutions worked for me because I'm using other functions to only allow one popover at a time, and to hide the popover when it loses focus (they are also dynamically generated).
But I found a very simple solution using css to 'fix' this issue:
.popover.fade {
z-index:-1;
}
.popover.fade.in {
z-index:2;
}
Just make sure the .popover.in has a higher z-index than your other elements, and similarly that the one without .in has a lower z-index.

I faced the same problem and after searching a while in the F12 mode in Chrome, I found the following solution was working for me.
After closing the popover manually with a button:
<button
type=button
class="btn btn-default pull-right"
onclick="$('.mypopoverclass').popover('hide');">
Close
</button>
the content of the popover still was there, invisible and hiding other elements on the page.
I changed the button a little like this:
<button
type=button
class="btn btn-default pull-right"
onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()">
Close
</button>
By adding
$('.popover.fade').remove()
to the button onClick handler, the popover window was removed and no longer hiding elements on the screen. Also, next calls to the popover window, will show it again.
I hope it will work for you as well!

I think you need to "destroy" the popover, not just to "hide" it.
See the API here: http://getbootstrap.com/2.3.2/javascript.html#popovers

Jquery: Put variable from attribute into <p>, live() won't work [duplicate]

This question already has answers here:
Turning live() into on() in jQuery
(5 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
I have been using this code to get a simple lightbox working on a site of mine.
And I tried to modify it slightly so:
a) The lightbox fades in- Done
b) The script pulls in the src attribute not the href- Done
b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.
Issues
With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?
Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.
Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.
JS:
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
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
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
Thanks for any help.
EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.
However, why won't my code work for the second issue?

use event delegation with on -
$(document.body).on('click','#lightbox', function() {
$("#lightbox").fadeOut(); // Fades it out
});
Demo ---> http://codepen.io/anon/pen/ywJhe

You can change
$('.inner_img').click(function(e) {
to
$(document.body).on('click', '.inner_img', function(e) {
so that events occurring after the binding will still be delegated to the new elements.

Modify Script to Copy Alt Attribute to Thumbnails

I'm tweaking a gallery plugin for a site that I'm working on, so that it will support titles. This is this script I'm working with:
DEMO: http://jquery.malsup.com/cycle/pager2.html
CODE: http://malsup.github.com/jquery.cycle.all.js
I have everything working, except I need the alt attribute from the original image to be copied to the thumbnails on load, but I can't figure out where things are getting restructured in this script.
This is the modification that I'm using:
$(document).ready(function() {
$("#slideshow-wrap #nav li a img").click(function() {
var caption = $(this).attr("alt");
$("#slideshow-wrap #caption").html(caption);
});
});
(The above code works, I just need to copy the ALT attribute from the original <img> to the jQuery-generated <img> thumbnail.)

If I understand correctly what you need, the changes you have to make to the example given on the page are minimal:
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="50" height="50" />' + slide.alt + '</li>';
}