Rails 3 & FancyBox

Je viens juste de commencer à essayer d'apprendre JS, donc j'excuse si cela semble être une question stupide, mais je suis un peu perdu. J'ai un ensemble d'images que je ramasse sur ma page Flickr, j'ai décidé d'ajouter une boîte à lumière pour essayer d'acquérir de l'expérience avec JS, alors je l'ai installé à partir de la page GitHub et j'ai suivi les instructions à ajouter à l'application. Js:

//= require jquery //= require fancybox

Et pour ajouter à mes custom.css:

 /* *= require_self *= require fancybox *= require_tree . */

J'ai alors:

 <script type = "text/javascript"> $(document).ready(function() { /* This is basic - uses default settings */ $("a.flickr_photo").fancybox({'type': 'image'}); }); </script>

En partie, appeler un ensemble d'images créées:

 <%= link_to(image_tag(p.url, :class => 'flickr_photo', :title => p.title, :border => 0), p.url_photopage) %>

Maintenant, je suis un peu bloqué, ça ne fait vraiment rien, mais ce n'est pas une erreur, donc toute aide sera vraiment géniale!

Vous obtenez probablement un conflit sur l'identifiant $ de Prototype (je suppose que vous n'avez pas éliminé le code standard de RoR Prototype). Prototype est une bibliothèque Javascript similaire à jQuery et est livré avec RoR. Le problème, c'est qu'il utilise aussi le $ , tout comme jQuery, alors ce qui finit par se produire est que chaque $ est essayé comme une fonction ou une variable Prototype. C'est ainsi que je l'ai corrigé dans mon application, qui a utilisé un curseur jQuery pour certaines images:

Ajoutez jQuery.noConflict(); Dans un endroit où il sera chargé en avance sur un autre code jQuery, mais après le fichier jquery.js réel. Regardez lequel de vos fichiers .js de jQuery est chargé en premier et placez-le au début du fichier.
Ensuite, chaque bit de code jQuery que vous avez doit être modifié de l'utilisation de $ à l'aide de jQuery . Utilisez une recherche / remplacement dans votre éditeur de texte préféré sur vos fichiers .js jQuery pour y parvenir.
Assurez-vous que tous les futurs jQuery utilisent jQuery au lieu de $ (c.-à jQuery("#id_of_element").show(); au lieu de $("#id_of_element").show(); )

Comme vous le verrez peut-être, cela modifie l'identifiant jQuery de $ pour jQuery , qui débarrasse le conflit de Prototype. Si j'avais raison dans le diagnostic, cela devrait résoudre votre problème!