Multiple facebox popups

[joelg]

Hi everyone,

I've spent a good few hours trying to work out how to be able to have
more than one Facebox popup on a single page.

I have used Facebox to override the alert() function, and to create a
new pretty_confirm function which I use for confirms.

The problem I have now is that I am loading pages using facebox on
some pages, and these pages have functionality within them which I
need to be able to load an additional facebox to alert or confirm an
action, which should load in a new Facebox window over the others.

Just wondering if anyone else has run into this before? It currently
just closes the existing Facebox window and shows the new one.

Thanks all,

Joel

[joelg]

Well..

After not getting a reply, and needing this rather urgently, I have
spent the last 4 hours implementing this functionality myself.

I will reply back on here in the next few days explaining the code
changes to facebox.js and facebox.css to get this working, but I now
have successfully made it work with my own "test case" which is as
follows:

$.facebox("test 1");
$.facebox("test 2");
$.facebox("test 3");
$.facebox("test 4");
$.facebox("test 5");

The 5 above messages appear in separate facebox dialogs and each click
either on the close button or on the overlay closes each one in turn.

There were quite a lot of modifications to achieve this, but I think
it may be something that people may want as standard functionality for
facebox.

I certainly did some searching and looking around and questions about
this functionality have been raised without reply many times.

If anyone want's the code changes urgently let me know, otherwise
await my update in a few days.

[karim79]

Hi Joel,

I've been trying to get multiple facebox popups to work, in particular
a facebox image popup from a thumbnail that is displayed within a
facebox popup. In other words, a page loaded into a facebox via ajax:
<a href="something.html" rel="lightbox">

with image links inside it with ..rel="lightbox".. will bring up a new
facebox.

Hope that's clear enough.

What you have created sounds like it might do the trick, I would
greatly appreciate if you could pass on the modded script.

Thanks,

Karim

[joelg]

Hi Karim,

I'm more than happy to pass on the modified code and explain it, for
the benefit of yourself and anyone else hoping to have multiple
facebox windows on the same page.

The modifications may get a little complicated to explain, so I'll
start with a simple explanation of the changes to the way you must use
facebox.


CHANGES TO JS & CSS:

Firstly, there are changes to the facebox.js and facebox.css files,
which you can obtain using the following links:

- http://testbed.joelg.co.uk/facebox/facebox.js
- http://testbed.joelg.co.uk/facebox/facebox.css

Please note that I have changed the paths to image files as mine are
located at '/images/facebox/....', so you may need to change this in
the above two files to get it working for you. And you will of course
need all the other facebox files! I may have also changed some of the
settings, such as opacity.


DEMO:

I have no demo up right now, but for anyone with firebug installed,
just go to http://lasyou.com/ and run the following code:

$.facebox("Facebox 1!");
$.facebox("Facebox 2!");
$.facebox("Facebox 3!");

You'll see that three facebox windows appear on top of each other and
you close them individually.


SYNTAX CHANGES:

If you don't need control over the facebox windows, then the syntax
remains the same:

$.facebox("some content");

Facebox windows will load on top of previous windows and the close
button, clicking outside or pressing escape will close them one at a
time in the correct order.

If you want more control over your facebox windows, then you'll need
to use some new syntax:

$.facebox("content", "class name", "identifier");

Where class name is a class name for that facebox, or false for no
class name, and identifier is an id field for that particular facebox,
and this id MUST be different for all your facebox windows, otherwise
you'll end up closing two or more windows at once, since they will
refer to the same facebox.

Once you've done that, you can call $.facebox.close, which now takes a
new parameter which is that very identifier.

So, take the following example code:

$.facebox("content 1", false, "facebox1");
$.facebox("content 2", false, "facebox2");
$.facebox("content 3", false, "facebox3");

This will load 3 facebox windows over the top of each other, and you
can close them one by one, or:

$.facebox.close("facebox2"); // this will cose facebox2, and if 3
hasn't been closed yet then closing it would reveal facebox1, showing
that facebox2 was removed

$.facebox.close() with no parameters now closes ALL open facebox
windows, which may be handy at times.

Note: The way that this new method makes sure that all facebox windows
are independent when you don't specify an identifier is that it
automatically generates unique identifiers and uses those, which are
"facebox" with the current time() appended to them, so for example
"facebox1234916205582". This causes some issues.. when using the
syntax originally provided for calling ajax into a facebox:

jQuery.facebox(function() {
jQuery.get('code.js', function(data) {
jQuery.facebox('<textarea>' + data + '</textarea>')
})
})

The above code would now create two facebox windows on top of each
other. To solve this, you must give both of the facebox() functions
above the same identifier, in order to ensure that when the content
comes through via ajax it is put in that same facebox window:

jQuery.facebox(function() {
jQuery.get('code.js', function(data) {
jQuery.facebox('<textarea>' + data + '</textarea>', false,
"facebox_identifier")
})
}, false, "facebox_identifier")

This could possibly be made more elegant.


EXPLANATION OF MODIFICATIONS:

So that's the new syntax, and I'll now provide a bit of an explanation
about how I went about changing the code. I'll try and mention
everything I changed! And there may be a few little bugs.

So I looked through the facebox code, and I realised that the way
facebox works is that it essentially has two divs, one for the overlay
behind the facebox which blocks content and allows you to click it to
close the window, and another div for the facebox window itself. The
problem with the code which was in place is that it has specific id
names for these elements: "facebox" and "facebox_overlay". These two
elements are referenced throughout the code and therefore anything you
do in the future uses the same elements and so that's why when you do
a second call it is in the same window.

So to enable multiple facebox windows, I have had to firstly introduce
a new parameter for the $.facebox function:

$.facebox = function(data, klass, id) {
if (id == undefined) {
ts = new Date()
ts = ts.getTime()
id = "facebox"+ts
}
$.facebox.settings.id = id
$.facebox.loading()

if (data.ajax) fillFaceboxFromAjax(data.ajax)
else if (data.image) fillFaceboxFromImage(data.image)
else if (data.div) fillFaceboxFromHref(data.div)
else if ($.isFunction(data)) data.call($)
else $.facebox.reveal(data, klass)
}

As you can see, if the id is not specified then it creates one using
the current timestamp.

This now means that each facebox is unique, and all that had to be
done now was to change the code to enable this to work.

Ids are for single elements, whereas classes are for multiple elements
which are similar, so naturally it made sense to change the id named
"facebox" to a class named "facebox" and the id named
"facebox_overlay" to a class named "facebox_overlay".

So now every facebox has the two elements: the facebox_overlay and the
facebox itself. But now they have a unique identifier, and the class
"facebox_overlay" and "facebox".

The CSS has been changed to reflect this, and I have given the link
above for this.

So throughout the content there are references such as:

$('#facebox .content') and $('#facebox .body')

which are now:

$('#'+$.facebox.settings.id+' .content') and $('#'+
$.facebox.settings.id+' .body')

As you can see, I've made a new item in the settings called id.

The next problem was with the events and the closing of the facebox. I
needed to make all events refer to and close their own facebox only.

So I made the close() and hideOverly() functions accept the id I
created above, and changed the events to send those id's
appropriately:

close: function(id) {
$(document).trigger('close.facebox', [id])
return false
}

The binding triggered above is:

$(document).bind('close.facebox', function(e, id) {
$(document).unbind('keydown.facebox')
if(id != undefined) {
$('#'+id).fadeOut(function() {
$('#'+id+' .content').removeClass().addClass('content')
hideOverlay(id)
$('#'+id+' .loading').remove()
})
}
else{
$('.facebox').fadeOut(function() {
$('.facebox .content').removeClass().addClass('content')
hideOverlay()
$('.facebox .loading').remove()
})
}

})

So there you have it, that is my solution anyway, and I do think that
this kind of functionality as standard may well be desired by a lot of
people, so shout up people if that includes you!

I have to say.. the facebox plugin is fantastic and so easy to style,
and my changes may well not be too elegant, but they show that this
functionality is possible to fit into the current code. I would be
happy if it was looked over and changed (some things could be more
elegant) and then included, maybe not as default functionality but
certainly as an option.

If anyone has any problems getting these modifications working then
don't hesitate to leave a message and I'll see if I can help as soon
as I can.

Joel

[joelg]

And just to note, Karim:

It looks like in your case, as you have <a href="something.html"
rel="lightbox">text/image</a>

With my modifications you'll need to:

Change your links to have an id: <a href="something.html"
id="something" rel="lightbox">text/image</a>

This id must be unique for every link you have.

Then, in your $(document).ready you'd have something like this:

$('a[rel*=lightbox]').livequery(function(e){

var el = $(this);
var url = el.attr("href");
var id = el.attr("id");

$(this).click(function(e){
e.preventDefault();
$.facebox(function(){
$.get(url, function(data){
$.facebox(data, false, "facebox_"+id);
});
}, false, "facebox_"+id);
});
});


Good luck!

Joel

On Feb 18, 12:40 am, joelg <jga...@gmail.com> wrote:
> Hi Karim,
>
> I'm more than happy to pass on the modified code and explain it, for
> the benefit of yourself and anyone else hoping to have multiple
> facebox windows on the same page.
>
> The modifications may get a little complicated to explain, so I'll
> start with a simple explanation of the changes to the way you must use
> facebox.
>
> CHANGES TO JS & CSS:
>
> Firstly, there are changes to the facebox.js and facebox.css files,
> which you can obtain using the following links:
>
> -http://testbed.joelg.co.uk/facebox/facebox.js

> -http://testbed.joelg.co.uk/facebox/facebox.css

>
> Please note that I have changed the paths to image files as mine are
> located at '/images/facebox/....', so you may need to change this in
> the above two files to get it working for you. And you will of course
> need all the other facebox files! I may have also changed some of the
> settings, such as opacity.
>
> DEMO:
>
> I have no demo up right now, but for anyone with firebug installed,

> just go tohttp://lasyou.com/and run the following code:

> ...
>
> read more »

[Karim Salman]

Hi Joel,

Thank you so much for your detailed & comprehensive reply! 

I devised a workaround just to meet my deadline (instead of opening popup in new facebox window it's just ajaxed into the same window) but I'll certainly be applying the new & improved facebox you have developed, which is what I consider to be the ideal solution, possibly in the next couple of days. I'll send a more detailed reply once I've gotten my hands dirty, furthermore I will help you rally support to have this functionality included  as part of the standard distribution!

Thanks again!

Karim

[hari haran]

Hi Joelg,
Thaks for your update but , that link you have shared with us is not working. Can you pass the facebox jquery and facebox css.

Thanks & Regards
Hariharan