slideshow simple pour MVC 4 Razor site

Question

Je viens de commencer mon premier (désolé si cela est une question fondamentale) application MVC en sélectionnant de nouvelles MVC 4 app Razor VS 2012.

Dans la maison \ Index .cshtml J'ai besoin d'un diaporama de 5 images. Seule la fonctionnalité limitée requise et donc il semble que snook.ca example devrait fonctionner correctement.

J'ai ajouté mes images comme suit:

<div class="fadein"> 
      <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" /> 
      <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" /> 
      <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" /> 
      <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" /> 
      <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" /> 
     </div> 

Dans la page site.css J'ai ajouté les éléments suivants:

.fadein { position:relative; width:300px; height:300px; } 
.fadein img { position:absolute; left:0; top:0; } 

Au bas de la page Index.cshtml (après le </ol>, j'ai ajouté ce qui suit:

<script> 
$(function() { 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function() { 
     $('.fadein :first-child').fadeOut() 
      .next('img').fadeIn() 
      .end().appendTo('.fadein'); 
    }, 
     3000); 
}); 
</script> 

Quand je lance l'application, tous les les images sont affichées en même temps - réparties sur toute la page qui coule les unes après les autres. Il semble que la fonction n'est pas en cours d'exécution. Ma question est comment puis-je l'exécuter?

Answer 1

Le problème a été causé par le fait que je tentais d'utiliser JQuery avant qu'il ait été chargé, réponse trouvée ici: SO Answer