Question

I’m creating a page where multiple links will open a facebox (lightbox style div).

For links on the page within the #artworks-col div, I want the facebox to be forced to open at 800px width; for all others, I just want it to use its default calculations.

Putting this on the page forces all links to open it as 800px wide:

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

But after multiple attempts to make it apply to only links within #artworks-col, I can still only have it apply to all or none. Is there a way of filtering this bind event to be specific to that subset of links?

The only way I’ve thought of being able to do this would be to set a temporary flag using $("a#artworks-col").click(var flag = true); and check that flag in the document-wide bind event (and clear it in the bind event after running the width modification) but that seems really messy, and there’s bound to be a better way of going about this.

Here’s the RoR view for this page (note that the script will be moved to an external file once this is working, it’s just easier to have it all in one place for now):

<div id="admin_logo">
    <%= image_tag("logo_admin.png", alt: "Administration") %>
</div>
<div id="artworks-col"><%= render partial: "artworks_list" %></div>
<div id="artists-col"><%= render partial: "artists_list" %></div>
<div id="locations-col"><%= render partial: "locations_list" %></div>
<div id="insurers-col"><%= render partial: "insurers_list" %></div>
<div id="users-col"><%= render partial: "users_list" %></div>

<div id="show-object" style="display:none;"></div>

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

The render partial’s in the erb code above just add a list of <a href>‘s for all the objects of that type in the database. Those links are the ones I want to apply this functionality to.

EDIT

As I can’t get this to work through jQuery as I wanted it to, I’m going to put a workaround in place using CSS to define a div of width 800px to be displayed when those specific links are clicked. I’d prefer to do this through jQuery because it would be used in other situations where a more dynamic approach is required, but this will have to do for now.

Answer 1

EDITED: WORKING ANSWER

I have uploaded a working version of the example here: http://fluidev.com/stack/fbox/test.html

This is how you’ll go about binding seperate click events and achieve different widths for each. Through the use of a callback function (a function that runs after the initial calling function is completed) we can achieve the illusion of different set widths, even though it happens after the facebox loads. What’s cool about this is that you can even use animations and stuff to change the widths if you want!

$(document).ready(function() {
        $("#artworks-col").bind("click", function() {
            $.facebox({ div: '#artworks-col' }, function() { $('#facebox .content').css('width', '800px'); } ); 
        });
        $("#artists-col").bind("click", function() {
            $.facebox({ div: '#artists-col' }, function() { $('#facebox .content').css('width', '200px'); } ); 
        });
    });