Topic: Offline Lightbox workaround?
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
Add comment
Good day,
Excellent, thank you for the indication and response. Very simple fix!
Regards,
David
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
I am also having the same problem. Mr. Mark, Can i mail you my code ???
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
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>
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags