+1-888-365-2779
Try Now
More in this section

Forums / Project Feather / How to add Sitefinity's built in JQuery and JqueryFancyBox in custom MVC Widget's View.cshtml file.

How to add Sitefinity's built in JQuery and JqueryFancyBox in custom MVC Widget's View.cshtml file.

6 posts, 0 answered
  1. Ridhi
    Ridhi avatar
    11 posts
    Registered:
    31 May 2016
    30 Jun
    Link to this post

    I am using Sitefinity ver 9.1 and I want to use fancybox jquery plug in my custom widget.

    I am putting an image from the sitefinity Image Library on the page content block and using the widget I want all the other images of the gallery to open up in a fancybox when the user clicks on the single image present on the page. For this I am have written a jquery click function inside the script tag in my view.cshtml file.

    I am unable to get the fancybox working.  I tested if my program is hitting the jquery click function by putting an alert box and it works fine, but the fancybox does not show up. 

    I am currently using Jquery ver 1.6.1and I downloaded it from the Nuget manager. The fancybox and jquery JS files are in the Script folder of my project and I am referencing them in my View.cshtml file using "<script type="text/javascript" src="~/Scripts/jquery.fancybox.js"></script>".

    I read "http://docs.sitefinity.com/feather-refer-to-resources-inside-views documents" to add built in JQuery in my project at it says I need to use @Html.Script(ScriptRef.JQuery) but when I write this line in my View file, it gives an error saying  the HtmlHelper<dynamic> does not contain a definition of script.

    I read that Sitefinity 9.1 has jquery version 1.12.1 and I want to use the Sitefinity buit in jquery in my project. Please let me know how to do this .

  2. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    30 Jun in reply to Ridhi
    Link to this post

    Hi Righi. To make it works, just add this using at the beginning of your view file

    @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
    @using Telerik.Sitefinity.Modules.Pages

    and you can use built in jquery like that

    @Html.Script(ScriptRef.JQuery, "top", false)
  3. Ridhi
    Ridhi avatar
    11 posts
    Registered:
    31 May 2016
    30 Jun
    Link to this post

    Thanks Victor. I added jquery and jquery fancybox this way.  

    Does this automatically add the fancybox.css too? I want to use jquery-easing.js and jquery-mousewheel.js too. How do I add these? 

  4. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    01 Jul in reply to Ridhi
    Link to this post
    No. You need to add references to css manually with this method @Html.StyleSheet(...
  5. Ridhi
    Ridhi avatar
    11 posts
    Registered:
    31 May 2016
    01 Jul in reply to Victor Leontyev
    Link to this post

    Can you please provide the full line of code to add the stylesheet?  I am not sure as to where the css file is located if I need to give the path, I am fairly new to Sitefinity .

     

    Also, how to add the mousewheel.js and easing.js? Do I have to download it locally and add to a scripts folder in my project or Sitefinity has built in for these too?

     

  6. Tom
    Tom avatar
    0 posts
    Registered:
    03 Jun 2014
    09 Aug in reply to Ridhi
    Link to this post
    I am also very interested in seeing a complete post that describes what is needed to be done step by step.  I have not yet seen a post that describes the steps to incorporate this functionality into Sitefinity.  The openoriginalimageonclick function is horrible at best and we need to be able to style this function or use the Fancybox function.  Please help Telerik.  Thank you.
6 posts, 0 answered