Sitefinity support for JqueryFancyBox for MVC custom widgets
I am using Sitefinity 9.1 and developing a custom widget to display a slideshow of images in a fancybox when a link/image(present in content block) is clicked.
I am using the following HTML code in my content block:
<a class="slideshow fancybox" href="javascript:;">Link to SlideShow</a>
my View.cshtml file has the below code:
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages
@Html.Script(ScriptRef.JQuery, "top", false)
@Html.Script(ScriptRef.JQueryFancyBox, "top", false)
<div>
@foreach (var imageItem in Model.ImageItems)
<a class ="fancybox" href="@Html.Raw(imageItem.MediaUrl)"><img alt="@Html.Raw(imageItem.AlternativeText)" /></a>
</div>
<script type="text/javascript">
$(document).ready(function ()
$(".@Model.LibraryName").click(function ()
alert(test);
$(".fancybox").fancybox(
padding: 0,
transitionIn: 'elastic',
transitionOut: 'elastic',
type: 'image',
changeFade: 0
);
);
);
</script>
When i click on the hyperlink on the page it displays displays the alert box, but no fancy box shows up.
Can someone please help me with this soon . I have tried various options but nothing seems to work.
Hi Ridhi. Your JS is a bit wrong for fancybox. Use this one
<script type="text/javascript"> $(document).ready(function () $(".fancybox").fancybox( padding: 0, transitionIn: 'elastic', transitionOut: 'elastic', type: 'image', changeFade: 0 ); );</script>I tried removing the click function , but still i do not see a fancybox.
I have added my jquery and stylesheets like this:
<head>
@Html.Script(ScriptRef.JQuery, "top", false)
@Html.Script(ScriptRef.JQueryFancyBox, "top", false)
@Html.StyleSheet(Url.WidgetContent("Mvc/Views/css/jqueryfancybox.css"), "top")
@Html.Script(Url.WidgetContent("Scripts/jquery.mousewheel-3.0.6.pack.js"), "top")
</head>
is this correct??
How should I ensure that the fancybox scripts and style have loaded properly? I do not see any errors in console.
I have been struggling to get a simple fancy box working.. request you to provide some solution soon.
Also, please keep in mind that I need to reference the javascript from the content block html: <a href="javascript:;" class="Slideshow">Link to SlideShow</a>
Also, there might be more than one of this widget on a page, so i need to ensure that each time the widget is displaying the images of the library which is input by the user in the designer. That is why in the html of my content block I wrote "class = Slideshow" which is the name of the image library too and I am binding the click function and fancybox to the image library name(which is also the class name) in my View.cshtml to achieve this.
Please let me know how to proceed. Only the alert box functions. I do not see any fancybox.
Can anyone help...?
Here i was trying to use fancy box jquery plugin and below is my code :
<a data-fancybox href="www.youtube.com/watch
YouTube video</a>
<a data-fancybox href="vimeo.com/191947042">
Vimeo video - custom color
</a>
My question here is no matter howmany times i add the (data-fancybox) to the above anchor link in the content block HTML, it's being removed automatically by the tool.
To initiate the fancybox effect the data-fancybox is mandate under the anchor link.
Does anyone know why does this happen...?