How do I use fancybox to display image gallery in MVC

Question

0.00/5 (No votes)

See more:

I created an mvc project
then install Fancybox from NuGet
add js and css file of Fancybox in layout page
add a controller by name fancy
add view for this controller
according to this link i used data attributes but when I click the image it opens in new url not in fancy box

Razor

<a href="/0TestFancyBox/flowers.jfif" data-fancybox="group" data-caption="Caption #1">
    <img src="/0TestFancyBox/flowers.jfif" alt="" width="50" />
</a>
<a href="/0TestFancyBox/orang.jfif" data-fancybox="group" data-caption="Caption #2">
    <img src="/0TestFancyBox/orang.jfif" alt="" width="50" />
</a>

What I have tried:

Razor

<!--_Layout.cshtml-->
<pre><!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")
<link href="~/Content/jquery.fancybox.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">
                    
                    
                    
                </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>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script src="~/Scripts/jquery.fancybox.js"></script>
    <script src="~/Scripts/jquery.fancybox.pack.js"></script>
</body>
</html>

Posted 8-Dec-21 22:34pm

4L4K1

Updated 9-Dec-21 7:36am

Add a Solution

Comments

Richard Deeming 9-Dec-21 4:46am

Check your browser's developer console for errors.

4L4K1 9-Dec-21 5:06am

there are no errors

Richard Deeming 9-Dec-21 5:39am

Try adding data-type="image" to your links, in case it doesn't recognise the jfif extension.

4L4K1 9-Dec-21 8:39am

adding type even use png images not working

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

4L4K1 · Accepted Answer · 2021-12-09T07:36:00

I used this sample code at this link

Razor

<div>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_0.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_0.jpg" />
    </a>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_1.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_1.jpg" />
    </a>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_2.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_2.jpg" />
    </a>
</div>

C#

$(document).ready(function () {
    $(".fancy-photo").fancybox({
        cyclic: true,
        onUpdate: function () {
            $(".fancybox-nav span").css({
                visibility: "visible"
            });
            return;
        },
        afterClose: function () {
            $(".fancybox-nav span").css({
                visibility: "hidden"
            });
            return;
        }
    });
});

How do I use fancybox to display image gallery in MVC

1 solution

Solution 1

Add your solution here

Preview 0

How do I use fancybox to display image gallery in MVC

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us