How to add Sitefinity's built in JQuery and JqueryFancyB

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 "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 .

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

and you can use built in jquery like that

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? 

No. You need to add references to css manually with this method @Html.StyleSheet(...

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?

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.

Try this:

@Html.StyleSheet(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"), "head")

For Scripts the Script Helper has ScriptRef, why isn't there something for StyleSheet especially considering something like Kendo where you have a JS component and CSS component. In fact that would apply to quite a few plugins in jQuery. 

@Ben - do you know the best way to figure out the full Assembly path to various embedded resources? I.e. if I'm looking for the Kendo CSS files? 

You could use JustDecompile on Telerik.Sitefinity.Resources.dll