prettyPhoto breaks document.ready()

Question

I'm trying to get prettyPhoto to work, but I seem to be running into an issue. Whenever I load prettyPhoto.js, it fails silently. I get no console warnings, and everything claims to be loaded just fine.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript" />

<script type="text/javascript">
    $(document).ready(function(){
        alert('test1');
        $("a[rel^='prettyPhoto']").prettyPhoto();
        alert('test2');
});
</script>

None of the alerts fire unless I remove the <script src="Scripts/jquery.prettyPhoto.js" type="text/javascript" />.

If anyone has an idea on how fix this, I'd be very greatful. I'd also accept a good alternative to prettyPhoto as an answer. Thanks.

Answer 1

use the jQuery keyword instead of the dollar sign, sometimes it creates a conflict. Don't forget to pass through the '$'.

jQuery(document).ready(function($){
    // Your code
});