Quicksand + Fancybox

[dsNDesign]

Hei,

ich habe ein Problem mit Quicksand und Fancybox. Es funktioniert immer nur eins von beidem.

Hier erstmal mein Quicksand Code:

$(document).ready(function(){
// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterType = $('#content button[name="type"]');

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

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

  // attempt to call Quicksand on every form change
  $filterType.click(function(e) {
    if ($(this).val() == 'all') {
      var $filteredData = $data.find('img');
    } else {
      var $filteredData = $data.find('img[data-type=' + $(this).val() + ']');
    }

    // finally, call quicksand
    $applications.quicksand($filteredData, {
      duration: 500,
      easing: 'easeInOutQuad'
    }, function() { // callback function
		$('#albumadd').fancybox({
			helpers : {
				title : false
			}
		});
	});

  });

});
});

Ich habe auch eine Callback-Funktion gemäß der Dokumentation (http://razorjack.net/quicksand/docs-and-demos.html) eingefügt.

Zudem habe ich noch ganz normal im Header den Fancybox Aufruf drin:

	$(document).ready(function() {
		$('#albumadd').fancybox({
			helpers : {
				title : false
			}
		});
	});

Außerdem hab ich die http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js verlinkt sowie diese Datei: http://web34.server30.campusspeicher.de/Temline2012/js/jquery.quicksand.js

Bei dieser Datei vermute ich den Fehler. Denn wenn ich diese Datei nicht einbinde, funktioniert die Fancybox, Quicksand aber nicht. Wenn ich sie einbinde, funktioniert Quicksand, aber Fancybox nicht.

Noch meine php Datei:

<div id="content">
    <button class="bildertype_btn" type="button" name="type" value="all">Alle Bilder</button><button class="bildertype_btn" type="button" name="type" value="p">Freunde</button><button class="bildertype_btn" type="button" name="type" value="g">Gruppen</button><div class="shift"></div>
    <div id="latest" style="margin-top:15px; text-align:center;">
        <img class="latest_picture" data-id="3" data-type="p" src="url.png" width='160px' height='120px' />
        <img class="latest_picture" data-id="4" data-type="g" src="url.png" width='160px' height='120px' />
        <img class="latest_picture" data-id="5" data-type="p" src="url.png" width='160px' height='120px' />
    </div>
</div>

Jemand ne Idee, woran das liegt?

Gruß