Question

I’m using Media Box Advanced as a layover tool, which is very powerful and convenient because it accepts any media, and takes any list and automatically reads the number of <li> and their order.

I have introduced a draggable functionality to these lists, reordering them using jquery .draggable. They can also be dragged from one UL to another. However, when I then click on these to pop up the lightbox, the order has not changed. My question is the following:

1) How do I get the page to read these changes in real time and reorder the lightbox?

2) Is there a way to make these changes permanent?

3) The lightbox categorizes galleries by the <a> tags within the <li> (<a rel="lightbox[category]"). Is there a way to change the setting of the <li> when they are dragged from one <ul> to another? Like if they are dragged from UL1 to UL2, how do I update the <a rel> tag to reflect that?

Here is the web page: http://www.senseculture.com/timeline_new.html

Here is the draggable code I’m using:

<script>
  $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content"
        }).disableSelection();
    });
</script>

Thanks!

Answer 1

1) This was solved by reading through the .js of the lightbox (mediaboxadvanced) and finding the function that loads the UL’s into a lightbox. Each time the lists are ordered, the lightbox is recalculated:

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
});

2) This can be done with PHP: jQuery Connected Sortable Lists, Save Order to MySQL

3) Same as 1), on “receive”, make each lightbox list attach a “rel” argument to each “a” tag. To prevent it from changing the “rel” tag of non sortable list items, I’ve added a function to make sure their “rel” tags remain empty.

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
receive: function(event, ui) {

        $(".timeline_content").each(function(i) {
        $(this).find("a").attr("rel", "lightbox[set" + (i+1) + "]");
        });
        $(".non_sortable").each(function(i) {
        $(this).find("a").attr("rel", ""); 
        });
}
});