Topic: Offline Lightbox workaround?

Mark Outermans pro asked 6 years ago


Hey there, I am actually using mdbootstrap to work on a website that should be accessible offline (on location). However I get an httprequest load error whenever using the lightbox. Is there any way to avoid it? I checked the code, when I upload it online it works perfectly fine. (http://met-mark.nl/journeyman/user-stories-personas.html - lightbox is at the bottom). But as I said, I'm trying to get around having to use it online. Any help is appreciated. Kind regards, Mark

baybossgiant1 pro answered 5 years ago


Good day, Excellent, thank you for the indication and response. Very simple fix! Regards, David

Rafał Rogulski free answered 5 years ago


Hi, I found a solution for this error. .load() - function use AJAX wich is a little buggy in localhost environment. The solution is simple, use webserver like xampp or standalone apache server. Regards

baybossgiant1 pro answered 5 years ago


Having the same issue/error message, was this ever resolved?

Michal Szymanski staff answered 6 years ago


Hi, send it to me: m.szymanski@mdbootstrap.com

mafi020 free answered 6 years ago


I am also having the same problem. Mr. Mark, Can i mail you my code ???

Mark Outermans pro answered 6 years ago


Thanks Michal, I'll e-mail you the files soon. Mark

Michal Szymanski staff answered 6 years ago


Hi Mark, can you please send me all your files that I can look at it and identify a problem? my email: m.szymanski@mdbootstrap.com

Mark Outermans pro answered 6 years ago


Hi Michal, Thanks for your reply. I actually decided to change my design and instead of using a lightbox went with three cards that in turn link to a different page. So I've got a solution for now. But this was the error code that I got: jquery-2.2.3.min.js:4 XMLHttpRequest cannot load file:///Users/Outermans/Desktop/Exploration-journeyman/Website/mdb-addons/mdb-lightbox-ui.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery-2.2.3.min.js:4 3mdb.min.js:7 Uncaught TypeError: Cannot read property 'firstChild' of undefined I attached a screenshot: http://imgur.com/HMG9x47 And this is the code in my lightbox-test.html file:
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href='https://fonts.googleapis.com/css?family=Raleway:800,800italic|Noto+Sans:400,400italic,700italic,700' rel='stylesheet' type='text/css'>
    <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
    <link rel="icon" href="icon.ico" type="image/x-icon">
    <title>Verkenning van de markten</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.css" rel="stylesheet">

    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <header>

            <!-- Sidebar navigation -->
        <ul id="slide-out" class="side-nav fixed default-side-nav light-side-nav">

            <!-- Logo -->
            <div class="logo-wrapper">
                <a href="index.html"><img src="img/logo-journeyman.png" class="img-fluid"></a>
            </div>
            <!--/. Logo -->

            <!-- Side navigation links -->
            <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-light"><i class="fa fa-file-text"></i>Over Journeyman en Blink</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="centrale-vraag.html" class="waves-light small-nav">Centrale vraag en introductie</a></li>
                            <li><a href="blink-en-mijn-rol.html" class="waves-light small-nav">Blink en mijn rol</a></li>
                            <li><a href="overzicht-problematiek.html" class="waves-light small-nav">Overzicht van de problematiek</a></li>
                            <li><a href="overzicht-context.html" class="waves-light small-nav">Overzicht van de context</a></li>
                            <li><a href="overzicht-oplossingen.html" class="waves-light small-nav">Overzicht van de oplossingen</a></li>
                            <li><a href="samenvattende-conclusie.html" class="waves-light small-nav">Samenvattende conclusie</a></li>
                        </ul>
                    </div>
                </li>
               <li><a class="collapsible-header waves-light"><i class="fa fa-user-secret"></i>De docent in beeld</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="docent-als-wereldverbeteraar.html" class="waves-light small-nav">Docenten als wereldverbetaars</a></li>
                            <li><a href="focusgroepen.html" class="waves-light small-nav">Focusgroepen, vrijheid en controle</a></li>
                            <li><a href="sociale-druk.html" class="waves-light small-nav">Sociale druk en andere problemen</a></li>
                            <li><a href="motivatie-zelfdeterminantie.html" class="waves-light small-nav">Motivatie en zelfdeterminatie</a></li>
                            <li><a href="socratisch-motiveren.html" class="waves-light small-nav">Socratisch motiveren</a></li>
                            <li><a href="user-stories-personas.html" class="waves-light small-nav">User stories en persona's</a></li>
                        </ul>
                    </div>
                </li>
                    <li><a class="collapsible-header waves-light"><i class="fa fa-key"></i>Gebiedverkenning</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="verkenning-markten.html" class="waves-light small-nav">Verkenning markten</a></li>
                            <li><a href="identiteit-tone-of-voice.html" class="waves-light small-nav">Identiteit en tone of voice</a></li>
                            <li><a href="system-overload.html" class="waves-light small-nav">System overload</a></li>
                            <li><a href="ideo-nieuw-schoolsysteem.html" class="waves-light small-nav">IDEO: een nieuw schoolsysteem</a></li>
                            <li><a href="society-of-wisdom.html" class="waves-light small-nav">Society of Wisdom</a></li>
                            <li><a href="personalized-failure.html" class="waves-light small-nav">De fail van personalized learning</a></li>
                            <li><a href="love-hate-triangle.html" class="waves-light small-nav">The love/hate triangle</a></li>
                        </ul>
                    </div>
                </li>
                      <li><a class="collapsible-header waves-light"><i class="fa fa-flask"></i>Memorabel ontwerpen</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="the-kidney-heist.html" class="waves-light small-nav">The kidney heist</a></li>
                            <li><a href="emotie-en-herinnering.html" class="waves-light small-nav">Emotie en herinnering</a></li>
                            <li><a href="storytelling-te-pas-en-onpas.html" class="waves-light small-nav">Storytelling te pas en te onpas</a></li>
                        </ul>
                    </div>
                </li>
                        <li><a class="collapsible-header waves-light"><i class="fa fa-gavel"></i>Succes en oplossingen</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="van-probleem-tot-principes.html" class="waves-light small-nav">Van probleem tot principles</a></li>
                            <li><a href="functies-en-gedrag.html" class="waves-light small-nav">Functies en gedrag, ultiem doel</a></li>
                            <li><a href="kansen.html" class="waves-light small-nav">Kansen</a></li>
                            <li><a href="prototype-this.html" class="waves-light small-nav">Prototype this!</a></li>
                            <li><a href="visueel-ontwerp.html" class="waves-light small-nav">Vormstudies, visueel ontwerp</a></li>
                            <li><a href="andere-avenues.html" class="waves-light small-nav">Andere avenues</a></li>
                            <li><a href="zelfvertrouwen-vervolgtraject.html" class="waves-light small-nav">Zelfvertrouwen en vervolgtraject</a></li>
                            <li><a href="afsluitende-conclusie.html" class="waves-light small-nav">Afsluitende conclusie</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--/. Side navigation links -->
        </ul>
        <!--/. Sidebar navigation -->

        <!-- Navbar-->
        <nav class="navbar navbar-fixed-top scrolling-navbar double-nav rgba-grey-slight z-depth-0 defheight">

            <!-- SideNav slide-out button -->
            <div class="pull-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
            </div>

            <!-- Breadcrumb-->
      
            <div class="pull-right">
             <ol class="breadcrumb">
        <li><a href="index.html">Journeyman</a></li>
        <li class="active">Verkenning markten</li>
    </ol>
</div>

     
        </nav>
        <!-- /.Navbar-->

    </header>

    <!-- Main layout-->
    <main>

        <div class="main-wrapper">
            <div class="container-fluid">
                       <h1>Verkenning van de markten</h1><br>
                   <!--  <img src="img/placeholder.jpg" class="figure-img img-fluid" alt="Something or other"><br><br> -->
                    <!--Navigation links with a Smooth SCroll effect-->
                    <h5>Inhoudsopgave</h5>
                    <ul class="smooth-scroll section-title st-mdb">
                        <li><h6><a href="#inleiding">Ervaring</a></h6></li>
                        <li><h6><a href="#sad">It's a sad, sad situation.</a></h6></li>
                        <li><h6><a href="#vier-fronten">Verkenning vanuit vier fronten</a></h6></li>
                        <li><h6><a href="#voordelen-nadelen-digital">Wat zijn nou voordelen of nadelen van digitaal werken?</a></h6></li>
                        <li><h6><a href="#design-thinking-en-doelen">Design Thinking en doelen stellen</a></h6></li>
                    </ul>
                       
                       <h3 id="inleiding">Lightbox test</h3>
                         <div class="row">
                          <div class="col-md-8">
                            Lightbox test

                            <div class="row">
                                <div class="col-md-12">

                                    <div id="mdb-lightbox-ui"></div>

                                    <div class="mdb-lightbox no-margin">

                                        <figure class="col-md-4">
                                            <a href="http://mdbootstrap.com/images/regular/nature/img%20(4).jpg" data-size="1600x1067">
                                                <img src="http://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(4).jpg" class="img-fluid">
                                            </a>
                                        </figure>

                                        <figure class="col-md-4">
                                            <a href="http://mdbootstrap.com/images/regular/nature/img%20(2).jpg" data-size="1600x1067">
                                                <img src="http://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(2).jpg" class="img-fluid" />
                                            </a>
                                        </figure>

                                        <figure class="col-md-4">
                                            <a href="http://mdbootstrap.com/images/regular/nature/img%20(3).jpg" data-size="1600x1067">
                                                <img src="http://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(3).jpg" class="img-fluid" />
                                            </a>
                                        </figure>
                                    </div>

                                </div>
                            </div>

                         </div>
                          <div class="col-md-4"></div>
                        </div><!--  einde rij  -->
            </div> <!-- einde container fluid -->
        </div> <!-- einde main wrapper -->
    </main>
    <!-- /.Main layout-->

    <!--Footer-->
    <!--Footer-->
    <footer class="page-footer center-on-small-only">

        <div class="footer-journeyman">
            <div class="col-xs-12">
                <nav>
                    <ul class="pager">
                        <li class="pager-prev"><a class="btn btn-primary-pager z-depth-0" href="user-stories-personas.html" role="button"><i class="fa special fa-arrow-circle-left left"></i> User stories en persona's</a></li> 
                        <li class="pager-next"><a class="btn btn-primary-pager z-depth-0" href="identiteit-tone-of-voice.html" role="button">Identiteit en tone of voice <i class="fa special fa-arrow-circle-right right"></i></a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2016 Copyright: <a href="http://met-mark.nl/journeyman"> Mark Outermans </a>
            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/Footer-->
    <!--/Footer-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>

    <script>
        // SideNav Init
        $(".button-collapse").sideNav();
        // Tooltips init        
        $('[data-toggle="tooltip"]').tooltip()
    </script>

    <script>
        // MDB Lightbox Init
        $(function () {
        $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
    });
    </script>

</body>

</html> 
Any help is appreciated, thank you so far! Mark

Michal Szymanski staff answered 6 years ago


Hi Mark, I have tried to reproduce your error but everything seems to work fine for me even offline. Any more info about errors/bugs/warning which can help us identify a problem?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags