Question

I’ve just downloaded the nailthumb project from http://www.garralab.com/nailthumb.php but I cant call this function from asp.net mvc 3 of js.

the functions in the examples are called as follow:

 <script type="text/javascript">
   jQuery(document).ready(function() {
   jQuery('.nailthumb-container').nailthumb({
   width:100,height:100,method:'resize',fitDirection:'top left'});
   });
</script>

I’ve tried:

<script type="text/javascript">
    $(document).ready(function () {
    $('#nailthumb-container').nailthumb({
       width: '100',
       height: '100' 
       });

   });
</script>

The js file loads but I cant figure out how to call this functions.
Any Ideas?

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.css" type="text/css"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<style type="text/css" media="screen">
    .square-thumb {
        width: 150px;
        height: 150px;
    }
</style>

<div class="nailthumb-container square-thumb">
 <img alt='' src='@Url.Action("Show", "ConsultorioImagenes", new { id = Model.ID})' />
</div>

Answer 1

You’re using the id selector (#) when you’re assigning it a class.

This line:

<div class="nailthumb-container square-thumb">

..assigns the nail-thumb-container class. You need to use the class selector (.) in your jQuery call:

<script type="text/javascript">
    $(document).ready(function () {
        $('.nailthumb-container').nailthumb({
           width: '100',
           height: '100' 
         });
   });
</script>