Topic: Problem with images
Hi,
for a few days i'm trying to set up the lightbox, but it won't work, and i have also problem with images, because in project section, and in gallery, in div fits only image from your site..if i put other images, it won't work as a responsive like divs, so if i change browser size, the size of the picture stays the same, but the size of the div changes, so the picture fits in only one resolution..
Can you please help me to solve those problems ?
P.S. I have created another name of the folder site, and when i create gallery, and another custom.js with initialisation code for lightbox, dreamweaver shows like an error because i didn't put "use strict" in code..is this js code for lightbox full code, or i need to add something else ?
Thanks !
Add comment
Hi Aleksandar,
Please share Your code with us by adding it as an answer. We'll try to fix Your issue. Do You have any errors in Your console?
Regards
Aleksandar Srbljak pro commented 7 years ago
// MDB Lightbox Init $(function () { $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); }); ps. when i share html code it won't show as text, how can i change that ?Aleksandar Srbljak pro commented 7 years ago
<!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"* <title*Material Design Bootstrap</title* <!-- Font Awesome --* <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"* <!-- Bootstrap core CSS --* <link href="css/bootstrap.min.css" rel="stylesheet"* <!-- Material Design Bootstrap --* <link href="css/mdb.min.css" rel="stylesheet"* <!-- Your custom styles (optional) --* <link href="css/style.css" rel="stylesheet"* </head* <body* <html lang="en" class="full-height"*</html* <html lang="en" class="full-height"*</html* <!--Main Navigation--* <header* <!--Navbar--* <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar rgba-stylish-strong"* <div class="container"* <!-- Navbar brand --* <a class="navbar-brand" href="#"*Sapa lights</a* <!-- Collapse button --* <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation"* <span class="navbar-toggler-icon"*</span* </button* <!-- Collapsible content --* <div class="collapse navbar-collapse" id="basicExampleNav"* <!-- Links --* <ul class="navbar-nav mr-auto smooth-scroll"* <li class="nav-item"* <a class="nav-link" href="#intro"*Home</a* </li* <li class="nav-item"* <a class="nav-link" href="#projects"*Projects</a* </li* <li class="nav-item"* <a class="nav-link" href="#gallery"*Gallery</a* </li* <li class="nav-item"* <a class="nav-link" href="#contact"*Contact</a* </li* </ul* <!-- /links --* <!-- social icons --* <ul class="navbar-nav nav-flex-icons"* <li class="nav-item"*<a href="https://www.facebook.com/Sapa-lights-108184529264091/" target="_blank" class="nav-link"*<i class="fa fa-facebook"*</i*</a*</li* <li class="nav-item"*<a href="https://www.google.rs/search?ei=R4IAW4H1JI-JmwWFrajwCA&q=sapa+lights&oq=sapa+lights&gs_l=psy-ab.3...4395.6245.0.6705.0.0.0.0.0.0.0.0..0.0....0...1.1.64.psy-ab..0.0.0....0.KrZ8cmVc6mo" target="_blank" class="nav-link"*<i class="fa fa-google"*</i*</a*</li* <li class="nav-item"*<a href="https://www.instagram.com/sapalights_rental/" target="_blank" class="nav-link"*<i class="fa fa-instagram"*</i*</a*</li* </ul* <!-- /social icons --* </div* <!-- Collapsible content --* </div* </nav* <!--/.Navbar--* <!-- Mask --* <div id="intro" class="view hm-black-strong"* <div class="container-fluid full-bg-img d-flex align-items-center justify-content-center"* <div class="row d-flex justify-content-center"* <div class="col-md-10 text-center"* <!-- Heading --* <img src="images/logo2.jpg" class="mx-auto d-block" alt="placeholder"* <hr class="hr-dark"* <h4 class="dark-text my-4"* Renting lights and grid for film production. </h4* <button type="button" class="btn btn-outline-dark"* Read more<i class="fa fa-book ml-2"*</i* </button* <!-- /Heading --* </div* </div* </div* </div* <!-- /Mask --* </header* <!--Main Navigation--* <!--Main Layout--* <main class="mt-5"* <div class="container"* <!-- Section: Best features --* <section id="best-features" class="text-center"* <h2 class="mb-4 font-weight-bold"*Best features</h2* <!--grid row--* <div class="row d-flex justify-content-center mb-4"* <!--grid column--* <div class="col-md-8"* <p class="grey-text"*Shapa lights is renting lights for film production.</p* </div* <!--/grid column--* </div* <!--/grid row--* <!--grid row--* <div class="row"* <!--grid column--* <div class="col-md-4 mb-4"* <i class="fa fa-camera-retro fa-4x elegant-color-text"*</i* <h4 class="my-4 font-weight-bold"*Experience</h4* <p class="grey-text"*Lorem ipsum color dolomit Lorem ipsum color dolomitLorem ipsum color dolomitLorem ipsum color dolomit</p* </div* <!--grid column--* <!--grid column--* <div class="col-md-4 mb-4"* <i class="fa fa-heart fa-4x elegant-color-text"*</i* <h4 class="my-4 font-weight-bold"*Happiness</h4* <p class="grey-text"*Lorem ipsum color dolomit Lorem ipsum color dolomitLorem ipsum color dolomitLorem ipsum color dolomit</p* </div* <!--grid column--* <!--grid column--* <div class="col-md-4 mb-4"* <i class="fa fa-bicycle fa-4x elegant-color-text"*</i* <h4 class="my-4 font-weight-bold"*Adventure</h4* <p class="grey-text"*Lorem ipsum color dolomit Lorem ipsum color dolomitLorem ipsum color dolomitLorem ipsum color dolomit</p* </div* <!--grid column--* </div* <!--/grid row--* </section* <!-- Section: /Best features --* <hr class="my-5"* <!-- Projects section v.4 --* <section class="text-center my-5"* <!-- Section heading --* <h2 class="h1-responsive font-weight-bold text-center my-5"*Our best projects</h2* <!-- Section description --* <p class="grey-text text-center w-responsive mx-auto mb-5"*Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p* <!-- Grid row --* <div class="row"* <!-- Grid column --* <div class="col-md-12 mb-4"* <div class="card card-image" style="background: url(images/film/JPEG/home_slider.jpg)"* <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded"* <div* <h6 class="purple-text"* <i class="fa fa-camera"*</i* <strong* Movie</strong* </h6* <h3 class="py-3 font-weight-bold"* <strong*AMANET</strong* </h3* <p class="pb-3"*Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum! </p* <a class="btn btn-secondary btn-rounded btn-md" href="http://serbianfilmfest.com/amanet.html" target="_blank"*<i class="fa fa-clone left"*</i* View project</a* </div* </div* </div* </div* <!-- Grid column --* <!-- Grid column --* <div class="col-md-6 mb-md-0 mb-4"* <div class="card card-image" style="background-image: url(images/film/JPEG/varvari.jpg);"* <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded"* <div* <h6 class="pink-text"* <i class="fa fa-eye"*</i* <strong* Movie</strong* </h6* <h3 class="py-3 font-weight-bold"* <strong*VARVARI</strong* </h3* <p class="pb-3"*Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum! </p* <a class="btn btn-pink btn-rounded btn-md" href="https://www.imdb.com/title/tt2190332/" target="_blank"*<i class="fa fa-clone left"*</i* View project</a* </div* </div* </div* </div* <!-- Grid column --* <!-- Grid column --* <div class="col-md-6"* <div class="card card-image" style="background-image: url(images/film/JPEG/led.jpg);"* <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded"* <div* <h6 class="green-text"* <i class="fa fa-eye"*</i* <strong* Movie</strong* </h6* <h3 class="py-3 font-weight-bold"* <strong*ICE</strong* </h3* <p class="pb-3"*Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum! </p* <a class="btn btn-success btn-rounded btn-md"*<i class="fa fa-clone left"*</i* View project</a* </div* </div* </div* </div* <!-- Grid column --* </div* <!-- Grid row --* </section* <!-- Section: /Projects --* <hr class="my-5"* <!-- Section: Gallery --* <section id="gallery" class="mb-5"* <h2 class="font-weight-bold my-5 text-center"*Gallery</h2* <div class="row"* <div class="col-md-12"* <div id="mdb-lightbox-ui"*</div* <div class="mdb-lightbox"* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" alt="placeholder" class="img-fluid"* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* <figure class="col-md-4"* <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067"* <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" alt="placeholder" class="img-fluid" /* </a* </figure* </div* </div* </div* </section* <!-- Section: /Gallery --* <hr class="my-5"* <!-- Section: Contact --* <section id="contact" class="mb-5"* <!-- Heading --* <h2 class="mb-5 font-weight-bold text-center"*Contact us</h2* <!-- grid row --* <div class="row"* <!--grid column --* <div class="col-lg-5 p-5 text-left"* <p*<i class="fa fa-map fa-2x mr-2 grey-text mb-4"*</i*Savnicka 24, 11000 Belgrade, Serbia</p* <p*<i class="fa fa-building fa-2x mr-2 grey-text mb-4"*</i*Mon - Fri, 8:00-22:00</p* <p*<i class="fa fa-phone fa-2x mr-2 grey-text mb-4"*</i*+381637744254 </p* <p*<i class="fa fa-envelope fa-2x mr-2 grey-text mb-4"*</i*sapalights@gmail.com</p* </div* <!--grid /column --* <!-- grid column: GOOGLE MAPS --* <div class="col-lg-7 col-md-12"* <div id="map-container" class="map-container z-depth-1-half border-box" style="height: 400px;"*<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2834.379930489986!2d20.41906581553312!3d44.73226507909923!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a721f801b0a1b%3A0x2e39c03d532ec1d0!2sSapa+Lights+-+film+rental!5e0!3m2!1ssr!2srs!4v1526926399711" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen*</iframe*</div* </div* <!-- grid /column: GOOGLE MAPS--* </div* <!-- grid row --* </section* <!-- Section: /Contact --* </div* </main* <!--Main Layout--* <!--Footer--* <footer class="page-footer font-small elegant-color pt-0 smooth-scroll"* <!--Footer Links--* <div class="container"* <!--Grid row--* <div class="row pt-5 mb-3 text-center d-flex justify-content-center"* <!--Grid column--* <div class="col-md-2 mb-3"* <h6 class="text-uppercase font-weight-bold"* <a href="#intro"*Home</a* </h6* </div* <!--Grid column--* <!--Grid column--* <div class="col-md-2 mb-3"* <h6 class="text-uppercase font-weight-bold"* <a href="#projects"*Projects</a* </h6* </div* <!--Grid column--* <!--Grid column--* <div class="col-md-2 mb-3"* <h6 class="text-uppercase font-weight-bold"* <a href="#gallery"*Gallery</a* </h6* </div* <!--Grid column--* <!--Grid column--* <div class="col-md-2 mb-3"* <h6 class="text-uppercase font-weight-bold"* <a href="#contact"*Contact</a* </h6* </div* <!--Grid column--* </div* <!--Grid row--* <hr class="rgba-white-light" style="margin: 0 15%;"* <!--Grid row--* <div class="row d-flex text-center justify-content-center mb-md-0 mb-4"* <!--Grid column--* <div class="col-md-8 col-12 mt-5"* <p style="line-height: 1.7rem"*Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p* </div* <!--Grid column--* </div* <!--Grid row--* <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;"* <!--Grid row--* <div class="row pb-3"* <!--Grid column--* <div class="col-md-12"* <div class="mb-5 flex-center"* <!--Facebook--* <a class="fb-ic" href="https://sr-rs.facebook.com/Sapa-lights-108184529264091/" target="_blank"* <i class="fa fa-facebook fa-lg white-text mr-md-4"* </i* </a* <!--Google +--* <a class="gplus-ic" href="https://www.google.rs/search?ei=R4IAW4H1JI-JmwWFrajwCA&q=sapa+lights&oq=sapa+lights&gs_l=psy-ab.3...4395.6245.0.6705.0.0.0.0.0.0.0.0..0.0....0...1.1.64.psy-ab..0.0.0....0.KrZ8cmVc6mo" target="_blank"* <i class="fa fa-google fa-lg white-text mr-md-4"* </i* </a* <!--Instagram--* <a class="ins-ic" href="https://www.instagram.com/sapalights_rental/" target="_blank"* <i class="fa fa-instagram fa-lg white-text mr-md-4"* </i* </a* </div* </div* <!--Grid column--* </div* <!--Grid row--* </div* <!--/Footer Links--* <!--Copyright--* <div class="footer-copyright py-3 text-center"* © 2018 Copyright: <a href="https://sr-rs.facebook.com/Sapa-lights-108184529264091/"* Sapa lights d.o.o </a* </div* <!--/Copyright--* </footer* <!--/Footer--* <!-- SCRIPTS --* <!-- JQuery --* <script type="text/javascript" src="js/jquery-3.2.1.min.js"*</script* <!-- Bootstrap tooltips --* <script type="text/javascript" src="js/popper.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* <!--Google Maps--* <script type="text/javascript" src="js/custom.js"*</script* <script type="text/javascript" src="https://maps.google.com/maps/api/js"*</script* </body* </html*Aleksandar Srbljak pro commented 7 years ago
I shared whole code, maybe you'll se something that i don't see..but the problem is gallery, and image in projects section, it won't accept atribute "cover", so it can't be responsive, i don't know why :/ I hope that you'll help me solve the problem, and I'm sorry if I'm a little boring, but this is new for me and i want to learn this, to get skilled, so i don't need to ask questions anymore, at least not as often as now :D Thank you !Mikołaj Smoleński staff commented 7 years ago
First of all You have 'html' tag duplicated.Aleksandar Srbljak pro commented 7 years ago
i have corrected that, thanks, but lightbox still doesn't work..Mikołaj Smoleński staff commented 7 years ago
Please send me Your zipped project to m.smolenski@mdbootstrap.com. RegardsFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
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