I have need to build a code just like Facebook does for pictures. Im talking about the "pop" or Lightbox they use so in the right side you can comment, in this case I would send an e+mail, and insert a random image on the bottom.
I was also thinking in colorbox, but I use a inline html and if the user want to go from previous to next pictures I will be very lost as I dont know how to do this in Colorbox (including a form and not just images),
Anyway the contact form is the same for all pictures. Each user will have 8 pictures and 1 contact form, thats already done. I need to make or build a Lightbox like the one used by Facebook.
Thats why I found inside the lightbox.js (my other option) the part where the HTML forms it self here:
Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after($('<div/>', {
id: 'lightbox'
}).append($('<div/>', {
"class": 'lb-outerContainer'
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
}))))), $('<div/>', {
"class": 'lb-dataContainer'
}).append($('<div/>', {
"class": 'lb-data'
}).append($('<div/>', {
"class": 'lb-details'
}).append($('<span/>', {
"class": 'lb-caption'
}), $('<span/>', {
"class": 'lb-number'
})), $('<div/>', {
"class": 'lb-closeContainer'
}).append($('<a/>', {
"class": 'lb-close'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))))).appendTo($('body'));
$('#lightboxOverlay').hide().on('click', function(e) {
_this.end();
return false;
});
$lightbox = $('#lightbox');
$lightbox.hide().on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-outerContainer').on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-prev').on('click', function(e) {
_this.changeImage(_this.currentImageIndex - 1);
return false;
});
$lightbox.find('.lb-next').on('click', function(e) {
_this.changeImage(_this.currentImageIndex + 1);
return false;
});
$lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
_this.end();
return false;
});
};
My question is, can I insert the form in HTML? I guess I can.
But can I use PHP include maybe to insert functions for the random image etc?
What will you use to achieve something like that? Do you know an example I can use as reference? I have really read documentation and a lot of stuff for the main stuff like Colorbox and Lightbox, also it has to be compatible with Jquery.
EDIT : WOOOOW!! : Look what i found under jquerytools. http://jquerytools.org/demos/combine/html5-form/index.html
If this is compatible on internet explorer 6 and beyond, I have a winner.