Can't run any jQuery plugin inside my ASP.NET MVC application, what would be the cause?

Question

These days I went through difficult times, I tried to implement a jQuery plugin called elevate zoom but couldn't succeed thought this might be the problem with jQuery plugin and switched to implement Cloud Zoom but had no luck yet. I placed all the scripts needed by this plugin into my view and also the CSS as you can see my view code:

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



    <title>Cloud Zoom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Include jQuery. -->
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="~/Content/cloudzoom.css" />

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="~/Scripts/cloudzoom.js"></script>

    <!-- Call quick start function. -->
    <script type="text/javascript">
        $(function(){CloudZoom.quickStart();})
    </script>

    <!-- Setup the zoomImage property to point to the big image. -->
    <img class="cloudzoom" src="~/images/small/image1.jpg"
         data-cloudzoom="zoomImage: '~/images/large/image1.jpg'" />

Layout code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Final Generated HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">






    <title>Cloud Zoom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Include jQuery. -->
    <script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="/Content/cloudzoom.css" />

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="/Scripts/cloudzoom.js"></script>

    <!-- Call quick start function. -->
    <script type="text/javascript">
        $(function(){CloudZoom.quickStart();})
    </script>

    <!-- Setup the zoomImage property to point to the big image. -->
    <img class="cloudzoom" src="/images/small/image1.jpg"
         data-cloudzoom="zoomImage: '~/images/large/image1.jpg'" />





        <hr />
        <footer>
            <p>&copy; 2016 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c6cb955b8169466e9a82c8082a334502"}
</script>
<script type="text/javascript" src="http://localhost:6214/1d36907a16cf4beea1f3582a362b6719/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

@NaserDostdar , My pleasure if its working for you that's great I will write the code for the files in the answer please accept that as answer if it works for you — Heemanshu Bhalla
– Heemanshu Bhalla, Commented Feb 17, 2016 at 14:45
@NaserDostdar , Can you please accept my accept if it worked — Heemanshu Bhalla
– Heemanshu Bhalla, Commented Feb 17, 2016 at 15:15

Anton · Accepted Answer · 2016-02-17 14:34:52Z

1

Well, at first look it occurs to me that you actually nested <html> inside of the <body> tag. That is simply wrong.

Also look at this part of your code:

data-cloudzoom="zoomImage: '~/images/large/image1.jpg'"

The image URL remains untranslated, the tilda charcter ~ stays in the final generated HTML which is wrong. It should be probably:

<img class="cloudzoom" src="@Url.Content("~/images/small/image1.jpg")"
         data-cloudzoom="zoomImage: '@Url.Content(~/images/large/image1.jpg")'" />

Layout should look like this: Please, notice the @RenderSection calls.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("stylesheets", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

View should look like this: Please, notice the sections.

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section stylesheets {
    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="~/Content/cloudzoom.css" />
}

@section scripts {
    <!-- Include jQuery. -->
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="~/Scripts/cloudzoom.js"></script>
}

<!-- Call quick start function. -->
<script type="text/javascript">
    CloudZoom.quickStart();
</script>

<!-- Setup the zoomImage property to point to the big image. -->
<img class="cloudzoom" src="@Url.Content("~/images/small/image1.jpg")"
         data-cloudzoom="zoomImage: '@Url.Content("~/images/large/image1.jpg")'" />

edited Feb 17, 2016 at 14:34

answered Feb 17, 2016 at 13:36

Anton

2,6862 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5731805 Over a year ago

didn't worked! See updated question if you mean like that.

Anton Over a year ago

@NaserDostdar, I would love to help you but I need more than "didn't work" feedback. Any errors in the browser console? Have you checked in the browser's developer tools whether all the JS files and CSS files were loaded? Are you sure that jQuery was not loaded twice? Did the images loaded?

user5731805 Over a year ago

The images loaded successfully and i don't get any error but the main function which is zooming is not working at all. i mean when i mouse over on the image it is not zooming

user5731805 Over a year ago

and jquery loaded once not twice.

user5731805 Over a year ago

Couldn't get it working even now, i suppose there is fatal error which can't get this running, heemo sent me a working solution i'll change my solution regarding to that then will update. Many many thanks for your effort bro. wish me best of luck.

Heemanshu Bhalla · Accepted Answer · 2016-02-17 18:04:57Z

0

Solution :

_Layout.cshtml Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="~/Content/js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0px;padding:0;list-style-type:none;}
body{background:#E9F0F5;font-family:Arial, Helvetica, sans-serif;font-    size:13px;margin:0px;padding:0px;}
html{background-color:#E9F0F5;}
img{border:none;}
h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color:#333;letter-    spacing:1px;margin-top:10px;margin-bottom:10px;}
p{margin-bottom:10px;margin-top:10px;line-height:22px;}
.demo{margin:0 auto;width:600px;}
.tickul li{line-height:24px;}
/* zoom-section */
.zoom-section{clear:both;margin-top:20px;}
*html .zoom-section{display:inline;clear:both;}
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
</style>

<link href="~/Content/css/cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="~/Content/js/cloud-zoom.1.0.2.min.js"></script>
    <div class="demo">


                @RenderBody()
     </div>
</body>

Zoom.cshtml View Code

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="zoom-section">        
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="~/Content/images/smallimage.jpg" alt='' title="Optional title display" /></a></div>
    <div class="zoom-desc">
        <h3></h3>       
        <p><a href='~/Content/images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: '~/Content/images/smallimage.jpg' "><img class="zoom-tiny-image" src="~/Content/images/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='~/Content/images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' ~/Content/images/smallimage-1.jpg'"><img class="zoom-tiny-image" src="~/Content/images/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
        <a href='~/Content/images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: '~/Content/images/smallimage-2.jpg' "><img class="zoom-tiny-image" src="~/Content/images/tinyimage-2.jpg" alt = "Thumbnail 3"/></a></p>

</div>
</div><!--zoom-section end-->
  <div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage03.jpg' class='cloud-zoom' rel="tint:'#ff0000',tintOpacity:0.5,smoothMove:5,zoomWidth:480,adjustY:-4,adjustX:10"><img src="~/Content/images/smallimage-3.jpg" title="Optional Title Text" alt='' /></a>
    </div>
    <div class="zoom-desc">

<div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage04.jpg' class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4"><img src="~/Content/images/smallimage-4.jpg" title="Your caption here" alt=''/></a>
    </div>
    <div class="zoom-desc">

</div>
</div><!--zoom-section end-->

<div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage01.jpg' class='cloud-zoom' title="Your caption here" rel="softFocus: true, position:'anypos', smoothMove:2"><img src="~/Content/images/smallimage-1.jpg" alt='' /></a>
    </div>
    <div class="zoom-desc" style="position:relative">
        <div id="anypos" style="position:absolute;top:-128px; left: 128px;width:356px;height:256px;"></div>

</div>
</div>

HomeController.cs Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Cloudzoom.Controllers
{
 public class HomeController : Controller
{

       public ActionResult Zoom()
    {
        return View();
    }




    }
}

CloudZoom Function is called in cloud-zoom.1.0.2.min.js File

$(document).ready(function(){$('.cloud-zoom, .cloud-zoom-    gallery').CloudZoom()});

edited Feb 17, 2016 at 18:04

answered Feb 17, 2016 at 14:52

Heemanshu Bhalla

3,8201 gold badge31 silver badges57 bronze badges

7 Comments

user5731805 Over a year ago

Thanks, Would you be available if i get any question about this?

user5731805 Over a year ago

Where did you call the Cloud zoom function?

Heemanshu Bhalla Over a year ago

@NaserDostdar was on commute to home ,Yes sure I am available , please ask your question . Let me check for cloud zoom function

Heemanshu Bhalla Over a year ago

Ok Sure , I suggest you to create new question for that so that I also help other user with relevant title and details . I am in IST time that's why its late here . i will make that solution and will send that to you son tomorrow

user5731805 Over a year ago

Did it bro, Thanks for your efforts. just got ready to go with my application.

|

Collectives™ on Stack Overflow

Can't run any jQuery plugin inside my ASP.NET MVC application, what would be the cause?

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related