Jquery Lightbox Breaks when another script is used delegate?

Question

Its probably a lot easier if I send the URL

http://isca01.bigwavemedia.info/~staged2b/about/staff

Everything works with the light box script until the filter between categories is used.

(click Design radio then click thumbnail and lightbox does not work)

I believe i need to use .delegate or .live on the lightbox script but I can seem to get it to work.

Can anyone help that would be great :),

Thanks Brent

$(document).ready(function() {


        $("#various1").fancybox({
            'width'             : '47%',
            'height'            : '50%',    
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });

Answer 1

Try to put all your script into the same "anonymous" function ($(function() { });) like this:

<script type="text/javascript"> 

 ...

// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterType = $('#filter input[name="type"]');
  var $filterSort = $('#filter input[name="sort"]');

  // get the first collection
  var $applications = $('#applications');

  // clone applications to get a second collection
  var $data = $applications.clone();

  // attempt to call Quicksand on every form change
  $filterType.add($filterSort).change(function(e) {
    if ($($filterType+':checked').val() == 'all') {
      var $filteredData = $data.find('li');
    } else {
      var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
    }

    // if sorted by size
    if ($('#filter input[name="sort"]:checked').val() == "size") {
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return parseFloat($(v).find('span[data-type=size]').text());
        }
      });
    } else {
      // if sorted by name
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return $(v).find('strong').text().toLowerCase();
        }
      });
    }   

    // finally, call quicksand
    $applications.quicksand($sortedData, {
      duration: 800,
      easing: 'easeInOutQuad'
    });

  });
// >>>>>>>>>>>>> TO HERE >>>>>>>>>>>>>
// >>>>>>>>>>>>> TO HERE >>>>>>>>>>>>>
});

    // ----- remove this ---->
</script>
<script type="text/javascript"> 


$(function() {
    // <---- remove this -----
// <<<<<<<<<<<< MOVE THIS <<<<<<<<<<<<
    $(".imgHover")
        .live('mouseenter', function() {
            $(this).children("img").fadeTo(200, 0.85).end().children(".hover").show();
        })
        .live('mouseleave', function() {
            $(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
        });
// <<<<<<<<<<<< MOVE THIS <<<<<<<<<<<<
    // ----- remove this ---->
})(jQuery);
    // <---- remove this -----

</script>