Fancybox lightbox won't open.

Report · Feb 14, 2021

Afternoon,

I have a simpel lightbox that I can't get to work. It's seems like js might be getting blocked? I've attached the html as well as a screenshot from Google elements thats showign an error.

Thanks for any help with this.

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Meta Tags -->
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  
     <!-- Page Title -->
     <title>Premier 2.0</title>
<link href="https://fonts.googleapis.com/css2?family=Taviraj:wght@100;300;400;500&display=swap" rel="stylesheet">
    <!-- Favicon -->
    <link href="https://www.premierinc.com/favicon.ico" rel="icon">
    <!-- Bundle -->
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/bundle.min.css" rel="stylesheet">
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/revolution-settings.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/jquery.fancybox.min.css" rel="stylesheet">
    <!-- Style Sheet -->
    <link href="https://www.premierinc.com/external-assets/Premier-2-Point-O/css/style.css" rel="stylesheet">
	<link rel="stylesheet" href="css/font-awesome.min.css">

<style>
	
	#welcome .single_item {
    padding-top: 30px;
    text-align: center;
}
#welcome .welcome_icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    border: 2px solid #C4C4C4;
    transition: .7s;
	padding-top:23px;
	color:#8dc7d8;
}
#welcome .welcome_icon i {
    margin-top: 25%;
    font-size: 50px;
    transition: .7s;
}
#welcome .item_list h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    transition: 0.7s;
    font-family: 'Roboto Slab', serif;
}
#welcome .item_list p {
    font-size: 14px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
	line-height: 1.5;
	font-weight: 400;
}
#welcome .item_list:hover .welcome_icon {
    background: #ffc627;
    cursor: pointer;
}
#welcome .item_list:hover .welcome_icon i {
    color: #fff;
}
#welcome .item_list:hover h4 {
    color: #ffc627;
    cursor: pointer;
}
	
	.btn-slider {
    padding: 13px 28px;
    cursor: pointer;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    font-size: 15px;
    font-family: 'Raleway', sans-serif !important;
    line-height: 17px !important;
    font-weight: bold;
    -webkit-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;
}
	.trans-btn{
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;
}
	.trans-btn:hover{
    background-color: #ffc107;
    color: #000;
    border: 1px solid #ffc107;
}</style>
	
</head>

<body data-offset="90" data-spy="scroll" data-target=".navbar">

<!--Header Start-->
<header>

    <!--Navigation-->
    <nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-box-round">
        <div class="container">
            <a href="javascript&colon;void(0)" title="Logo" class="logo scroll">
                <!--Logo Default-->
                <img src="https://www.premierinc.com/external-assets/Premier-2-Point-O/img/premier-logo-white.png" alt="logo" class="logo-light default">
                <!--Logo Sticky-->
                <img src="https://www.premierinc.com/external-assets/Premier-2-Point-O/img/premier-logo-gray.png" alt="logo" class="logo-dark">
            </a>

           

            <!--Side Menu Button-->
                <a href="javascript&colon;void(0)" class="d-inline-block sidemenu_btn" id="sidemenu_toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
        </div>
    </nav>

    <!--Side Nav-->
    <div class="side-menu hidden">
        <div class="inner-wrapper">
            <span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
            <nav class="side-nav w-100">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section1">Time For a Refresh</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section2">Why Now</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section3">What Are We Refreshing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section4">What's Up With the Mobius</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section5">What Should I expect</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#section6">When Can I Use It</a>
                    </li>
                </ul>
            </nav>

            <div class="side-footer text-white w-100">
                <ul class="social-icons-simple">
                    <li><a class="facebook-text-hvr" href="javascript&colon;void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
                    <li><a class="instagram-text-hvr" href="javascript&colon;void(0)"><i class="fab fa-instagram"></i> </a> </li>
                    <li><a class="twitter-text-hvr" href="javascript&colon;void(0)"><i class="fab fa-twitter"></i> </a> </li>
                </ul>
                <p class="text-white">&copy; 2021 Premier Inc.</p>
            </div>
        </div>
    </div>
    <a id="close_side_menu" href="javascript&colon;void(0);"></a>
    <!-- End side menu -->

</header>
<!--Header end-->

<!--Single portfolio item one-->
<section class="single-items center-block parallax m-0" id="section1" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/section1-background.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-md-12 center-col">
                <div class="area-heading text-center wow fadeInUp">
                    <h3 class="area-title alt-font text-white mb-2 font-weight-700">
                        It's time for a refresh.</h3>
                    <p class="text-white font-weight-400">Time to reinvigorate, reconnect, reinforce and redefine who we are. 
</p><div>
                            <a class="btn btn-slider trans-btn mr-2" data-fancybox="" href="http://player.vimeo.com/video/499386123">
                                Launch Video</a>
                        </div>
                   
                </div>
            </div>
			
        </div>
    </div>
 
                 
</section>

<!--Single portfolio item two-->
<section class="single-items center-block parallax" id="section2" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Doctor_GritComp_Mobius_2.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-lg-6"></div>
            <div class="col-lg-6 center-col">
                <div class="area-heading text-right wow fadeInRight">
                    <h3 class="area-title  alt-font text-309 font-weight-700">
                        Why Now?
                    </h3>
                    <p class="text-309 font-weight-400">Over the last 30 years Premier has brought together the brightest minds in 
healthcare, challenged the status quo and sought to achieve the impossible. 
 </p>
                </div>
            </div>
        </div>
    </div>
    
</section>

<!--Single portfolio item five-->
<section class="single-items center-block parallax" id="section7" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Sectiion7-Backgrounds.png)">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-8">
                <div class="area-heading text-left wow fadeInLeft">
                    <h3 class="area-title alt-font text-white font-weight-700;">
                        And if we have learned anything in just the last year, it is that together we can.
                    </h3>
                    <p class="text-white font-weight-400">Our frontline workers couldn’t wait for PPE, so we partnered with our members to ramp up domestic manufacturing.</p>
					 <p class="text-white font-weight-400">We developed AI-powered predictive analytics so doctors have a head start on diagnoses and treatment plans.</p>
					<p class="text-white font-weight-400">We didn’t do any of this for the accolades or the high-fives, we did it because we want better, smarter healthcare for everyone. </p>
					<p class="text-white font-weight-400">Many came together as one and achieved the impossible. Again. </p>
					<p class="text-white font-weight-700"><i>Together, we are one team with endless possibilities. <br>
One team driven by a mission to improve healthcare.   </i>
</p>
                   
                </div>
            </div>
        </div>
    </div>
	
</section>
	<!--Single portfolio item eight-->
<section class="single-items center-block parallax" id="section3" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Sectiion6-Background.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-md-12 center-col">
                <div class="area-heading text-right wow fadeInRight">
                    <h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-700">
                       What are we refreshing? 
                    </h3>
                    <p class="text-white">Over the next few months you will be seeing a different way of talking.</p>
                   
                </div>
            </div>
        </div>
    </div>
      <!--Start of welcome section-->
        <section id="welcome">
            <div class="container">
               
                <!--End of row-->
                <div class="row">
                    <div class="col-md-3">
                        <div class="item">
                            <div class="single_item">
                                <div class="item_list">
                                    <div class="welcome_icon">
                                        <i class="fa fa-handshake-o"></i>
                                    </div>
                                    <h4>Group Purchasing</h4>
                                    <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End of col-md-3-->
                    <div class="col-md-3">
                        <div class="item">
                            <div class="single_item">
                                <div class="item_list">
                                    <div class="welcome_icon">
                                        <i class="fa fa-cogs"></i>
                                    </div>
                                    <h4>Technology</h4>
                                    <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End of col-md-3-->
                    <div class="col-md-3">
                        <div class="item">
                            <div class="single_item">
                                <div class="item_list">
                                    <div class="welcome_icon">
                                        <i class="fa fa-users"></i>
                                    </div>
                                    <h4>Consulting</h4>
                                    <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidanso.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End of col-md-3-->
                    <div class="col-md-3">
                        <div class="item">
                            <div class="single_item">
                                <div class="item_list">
                                    <div class="welcome_icon">
                                        <i class="fa fa-commenting"></i>
                                    </div>
                                    <h4>Collaboratives</h4>
                                    <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End of col-md-3-->
                </div>
                <!--End of row-->
            </div>
            <!--End of container-->
        </section>
        <!--end of welcome section-->
</section>
	
	<!--Single portfolio item five-->
<section class="single-items center-block parallax" id="section4" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Sectiion4-Background.png)">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-8">
                <div class="area-heading text-left wow fadeInLeft">
                    <h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-700">
                       What’s up with the Mobius? 
                    </h3>
                    <p class="text-white">Mobius</p>
                   
                </div>
            </div>
        </div>
    </div>
</section>
	<!--Single portfolio item eight-->
<section class="single-items center-block parallax" id="section5" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Sectiion3-Background.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-md-12 center-col">
                <div class="area-heading text-right wow fadeInRight">
                    <h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-700">
                      What should I expect?</h3>
                    <p class="text-white">Brand Resource Hub, Templates, social enablement, swag (for the most excitement)</p>
                   
                </div>
            </div>
        </div>
    </div>
    
</section>
	
	<!--Single portfolio item five-->
<section class="single-items center-block parallax" id="section6" style="background: url(https://www.premierinc.com/external-assets/Premier-2-Point-O/img/Sectiion8-Backgrounds.png)">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-8">
                <div class="area-heading text-left wow fadeInLeft">
                    <h3 class="area-title alt-font text-309 font-weight-700">
                        When can I use it?</h3>
                    <p class="text-309">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet est id ipsum vehicula luctus. Ut imperdiet et diam et eleifend.</p>
                   
                </div>
            </div>
        </div>
    </div>
</section>




<!--Footer Start-->
<section class="bg-light text-center">
    <h2 class="d-none">hidden</h2>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="footer-social">
                    <ul class="list-unstyled">
                        <li><a class="wow fadeInUp" href="https://www.facebook.com/premierhealthcarealliance" target="_blank"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
                        <li><a class="wow fadeInDown" href="https://twitter.com/PremierHA" target="_blank"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a class="wow fadeInDown" href="https://linkedin.com/company/6766" target="_blank"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li>
                        <li><a class="wow fadeInUp" href="https://www.instagram.com/premierha/" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
                <p class="company-about fadeIn">© 2021 Premier</p>
            </div>
        </div>
    </div>
</section>
<!--Footer End-->

<!--Scroll Top-->
<a class="scroll-top-arrow" href="javascript&colon;void(0);"><i class="fas fa-angle-up"></i></a>
<!--Scroll Top End-->

<!-- JavaScript -->
<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/bundle.min.js"></script>
<!-- Plugin Js -->

<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/jquery.fancybox.min.js"></script>
<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/parallaxie.min.js"></script>


<!-- SLIDER REVOLUTION EXTENSIONS -->

<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/revolution.extension.layeranimation.min.js"></script>

<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/revolution.extension.parallax.min.js"></script>

<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/revolution.extension.video.min.js"></script>
<!-- custom script -->
<script src="https://www.premierinc.com/external-assets/Premier-2-Point-O/js/script.js"></script>
	

	

</body>
</html>

Report · Feb 14, 2021

Hi @wesw17337953,

I can't tell if your scripts are complete. It's impossible to guess from what's posted here. It looks like Bootstrap layout but I don't see any Bootstrap JS or jQuery JS. And Fancybox cannot work without jQuery's core library.

The best way to get help in this technical forum is to to upload your test page and assets to a web server you control and post the URL here.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 14, 2021

Hi nancy,

No idea why I would nee to upload to a server with a test page. The html file can be viewed in a browser. All my assets and js, css are housed on a server. You can see all the .js references in the body so the core library seems to be there. It seems something is missing or not loading (I attached a screenshot).

Report · Feb 14, 2021

As fellow product users & unpaid forum volunteers, we cannot see what you see on your local computer. Without a URL to your online site, we cannot help you. Sorry.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 15, 2021

You don't get it. I understand you can't see our local comuter. The html file has all the css and js linked. It's not locally housed. [Personal remarks removed by moderator.]

Report · Feb 15, 2021

@wesw17337953,

Rest assured, you'll never receive another reply from me. Goodbye and good luck!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 14, 2021

Thank you I figured it out. It seems there was some security on the server the js was housed in and was getting blocked. I housed it on another server and it works now.

Fancybox lightbox won't open.

1 Correct answer