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

Forums / Project Feather / Sitefinity support for JqueryFancyBox for MVC custom widgets

Sitefinity support for JqueryFancyBox for MVC custom widgets

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

    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.

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

    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>

  3. Ridhi
    Ridhi avatar
    11 posts
    Registered:
    31 May 2016
    01 Jul
    Link to this post

    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.

     

     

    6 posts
    Registered:
    31 May 2016
    21 HOURS AGO
    LINK TO THIS POST

    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>

    6 posts
    Registered:
    31 May 2016
    21 HOURS AGO
    LINK TO THIS POST

    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>

3 posts, 0 answered