Как добавить гиперссылку в JQuery Fancybox - PullRequest
Новая
       24

Как добавить гиперссылку в JQuery Fancybox

0 голосов
/ 10 февраля 2019

У меня есть следующий фрагмент: При открытии изображения в галерее есть такие необычные параметры, как «Общий доступ», «Закрытие», «Полный экран». При этих настройках я хотел бы добавить параметр, чтобы открыть URL-адрес изображения в новой вкладке с помощью * 1001.* .Пожалуйста, помогите мне достичь этого с помощью fancybox или альтернативным способом.

At Marked Point

https://js.do/code/284664

<html>
    <head>
        <title>{{ project_name }}</title>

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

            <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
            <!------ Include the above in your HEAD tag ---------->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
            <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style>
*{
    padding:0;
    margin:0;
}

/*  general */

section{
    padding: 50px 0;
}

/*  gallery */

.gallery-title{
    font-size: 36px;
    color: #3F6184;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.filter-button{
    font-size: 18px;
    border: 2px solid #3F6184;
    padding:5px 10px;
    text-align: center;
    color: #3F6184;
    margin-bottom: 30px;
    background:transparent;
}
.filter-button:hover,
.filter-button:focus,
.filter-button.active{
    color: #ffffff;
    background-color:#3F6184;
    outline:none;
}
.gallery_product{
    margin: 0px;
    padding:0;
    position:relative;
}

.gallery_product .img-responsive{
    height: 400px;
    width: 500px;
}

.gallery_product .img-info{
    position: absolute;
    background: rgba(0,0,0,0.5);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    overflow:hidden;
    color:#fff;
    top:0;
    display:none;
       -webkit-transition: 2s;
    transition: 2s;
}

.gallery_product:hover .img-info{
    display:block;
   -webkit-transition: 2s;
    transition: 2s;
}

/*  end gallery */


</style>

   <script>
    /*  gallery */
$(document).ready(function(){

$(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all")
    {
        $('.filter').show('1000');
    }
    else if(value == "category3")
    {
        $('.filter')
    }
    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');

    }

    if ($(".filter-button").removeClass("active")) {
        $(this).removeClass("active");
        }
            $(this).addClass("active");
        });
});
/*  end gallery */

$(document).ready(function(){
$(".fancybox").fancybox({
    openEffect: "none",
    closeEffect: "none"
});
});



    </script>

    </head>

    <body>
        <a href="/" class="btn-danger btn-sm">DASHBOARD</a>
            <section class="portfolio" id="portfolio">
                <div class="container-fluid">
                    <div class="row">

                        <hr><hr>

                        <div align="center">
                            <button class="filter-button btn-primary btn-sm" data-filter="all">All</button>
                            <button class="filter-button btn-primary btn-sm" data-filter="category1">Designing</button>
                            <button class="filter-button btn-primary btn-sm" data-filter="category2">Development</button>
                            <button class="filter-button btn-primary btn-sm" data-filter="category3">Graphics</button>
                        </div>

                        <br/>
                        <div class="gallery_product col-sm-3 col-xs-6 filter category-all">
                            <a class="fancybox" rel="ligthbox" href="https://cdn.shopify.com/s/files/1/0533/2089/files/img-url-filter.jpg">
                                <img class="img-responsive col-xs-12" alt="" src="https://cdn.shopify.com/s/files/1/0533/2089/files/img-url-filter.jpg"/>
                                <div class='img-info'>
                                    <h4></h4>
                                    <p></p>
                                </div>
                            </a>
                        </div>


                        <div class="gallery_product col-sm-3 col-xs-6 filter category-all">
                            <a class="fancybox" rel="ligthbox" href="https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_1024x.jpeg">
                                <img class="img-responsive col-xs-12" alt="" src="https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_1024x.jpeg"/>
                                <div class='img-info'>
                                    <h4></h4>
                                    <p></p>
                                </div>
                            </a>
                        </div>




                    </div>
                </div>
            </section>


    </body>
</html>
...