Am having an image lightbox code and i tried to add facebook comment box for every image .
The first image goes well with comment box .
The Problem is when i move on to next image the comment box keep on duplicating for every image .
And the move next move prev also not working it moves to end of the last image in album this problem occurs only after adding comment box
any idea about this .
(function(){
/* Private variables */
var overlay = $('<div id="galleryOverlay">'),
slider = $('<div id="gallerySlider">'),
comment= $('<div class="fb-comments" data-href="http://www.bluetopten.com" data-width="350" data-num-posts="10">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
overlayVisible = false;
/* Creating the plugin */
$.fn.touchTouch = function(){
var placeholders = $([]),
index = 0,
items = this;
// Appending the markup to the page
overlay.hide().appendTo('body');
slider.appendTo(overlay);
// Creating a placeholder for each image
items.each(function(){
placeholders = placeholders.add($('<div class="placeholder">'));
});
// Hide the gallery if the background is touched / clicked
slider.append(placeholders).on('click',function(e){
if(!$(e.target).is('img','.fb-comments')){
hideOverlay();
}
});
// Listen for touch events on the body and check if they
// originated in #gallerySlider img - the images in the slider.
$('body').on('touchstart', '#gallerySlider img', '.fb-comments', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
slider.on('touchmove',function(e){
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend',function(){
slider.off('touchmove');
});
// Listening for clicks on the thumbnails
items.on('click', function(e){
e.preventDefault();
// Find the position of this image
// in the collection
index = items.index(this);
showOverlay(index);
showImage(index);
showComment(index);
showScroll(index);
// Preload the next image
preload(index+1);
// Preload the previous
preload(index-1);
});
//call scroll
var arrayPageScroll = getPageScroll();
var lightboxTop = arrayPageScroll[1] + ($(window).height() / 10);
var lightboxLeft = arrayPageScroll[0];
$('body').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
// If the browser does not have support
// for touch, display the arrows
if ( !("ontouchstart" in window) ){
overlay.append(prevArrow).append(nextArrow);
prevArrow.click(function(e){
e.preventDefault();
showPrevious();
});
nextArrow.click(function(e){
e.preventDefault();
showNext();
});
}
// Listen for arrow keys
$(window).bind('keydown', function(e){
if (e.keyCode == 37){
showPrevious();
}
else if (e.keyCode==39){
showNext();
}
});
/* Private functions */
function showScroll(index){
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
}
function showOverlay(index){
// If the overlay is already shown, exit
if (overlayVisible){
return false;
}
// Show the overlay
overlay.show();
setTimeout(function(){
// Trigger the opacity CSS transition
overlay.addClass('visible');
}, 100);
// Move the slider to the correct image
offsetSlider(index);
// Raise the visible flag
overlayVisible = true;
}
function hideOverlay(){
// If the overlay is not shown, exit
if(!overlayVisible){
return false;
}
// Hide the overlay
overlay.hide().removeClass('visible');
overlayVisible = false;
}
function offsetSlider(index){
// This will trigger a smooth css transition
slider.css('left',(-index*100)+'%');
}
// Preload an image by its index in the items array
function preload(index){
setTimeout(function(){
showImage(index);
showComment(index);
}, 1000);
}
// Show image in the slider
function showImage(index){
// If the index is outside the bonds of the array
if(index < 0 || index >= items.length){
return false;
}
// Call the load function with the href attribute of the item
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
var txt1="<div class='fb-comments' data-href='http://example.com' data-width='470' data-num-posts='10' data-colorscheme='dark'></div>";
comment.appendTo($('.placeholder')).load(function(e) {
});
});
// Facebook comment code
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
// Load the image and execute a callback function.
// Returns a jQuery object
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
var comment= $('<div class="fb-comments" data-href="http://www.bluetopten.com" data-width="350" data-num-posts="10">').on('load',function(){
callback.call(comment);
});
img.attr('src',src);
}
function showNext(){
// If this is not the last image
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
//Scroll
function showScroll() {
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
};
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);