When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
Related
Slick slider messing with font in complete different location on Chrome
Very weird situation.
When my slick slider goes to the next / previous image one 3-column block with red titles in them the font goes a little darker and then comes back normaly as the slider finished sliding one element.
It looks like the font ins "blinking"
What I tried:
downgrading slick back to 1.6.0
remove all classes of the 3-column block and style each element
different window-sizes
different browsers (Firefox & Internet Explorer)
Validate Source-Code (NU checker showed no errors.)
Nothing is working.
It works fine in Firefox & IE but not in Chrome - can't test in safari but somebody told me the same is happening there.
My Chrome - version: 87.0.4280.66
I really don't know what else i could do.
Here is a GIF of what's happening:
Simplified Sourcecode (In Execution | Slick already initiated)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="//cdn.componentator.com/spa.min#14.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,700">
<link rel="stylesheet" href="/widgets.css?ts=gnt3q">
<script src="//cdn.componentator.com/spa.min#14.js"></script>
<meta name="keywords" content="Node.js, eshop, ecommerce, Total.js">
<meta name="author" content="Peter Širka">
<link type="text/css" rel="stylesheet" href="/default/css/bootstrap.min.css">
<script src="/default/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/slick.css">
<script src="/default/js/slick.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/default.css">
<link type="text/css" rel="stylesheet" href="/default/css/style.css">
<script src="/default/js/default.js"></script>
<script src="/default/js/custom.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body data-jc="exec,binder,modificator">
<div data-jc="loading" class="ui-loading hidden">
<div></div>
</div>
<div data-jc="shoppingcart" data-jc-path="shoppingcart" data-jc-config="discount:0"></div>
<div data-jc="message" data-jc-config="button:Schließen" class="ui-message hidden"></div>
<div data-jc="autocomplete" class="ui-autocomplete-container hidden">
<div class="ui-autocomplete" style="max-height: 200px;">
<ul></ul>
</div>
</div>
<div class="header-spacer"></div>
<main class="main" style="min-height: 939px;">
<div class="container">
<div class="row">
<div class="col-12">
<section class="body">
<div>
<div></div>
<div class="productslider">
<div class="row slick-initialized slick-slider"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 2400px; transform: translate3d(-1280px, 0px, 0px);">
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-6" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-5" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
</div>
</div><button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
</div>
</div>
<div></div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="">
<div class="container">
<hr><br>
<div class="row" style="
font-size: 40px !important;
">
<div class="col-md-4 text-md-left text-center">
<h2>TEXT 1</h2>
</div>
<div class="col-md-4 text-md-center text-center">
<h2>TEXT 2</h2>
</div>
<div class="col-md-4 text-md-right text-center">
<h2>TEXT 3</h2>
</div>
</div>
</div>
</footer>
<div class="scrollToTop" style="display: none;"></div>
</body>
</html>
Maybe you know why this is happening / you have the same problem
Would really appreciate it,
as i already spent hours debugging this...
Give the footer position: relative; and z-index: 1;
In this way you take the element out of the stacking context, and that usually solves the problem. 😊
I am developing an app on different tv screens, everything is working fine on each and every platform except on LG 32LJ57 WebOS, the layout doesn't fit the whole screen for some reason, I've tried different things, 1) adding meta tags to fit the screen, 2) increasing resolution (noting that the default resolution is 1920x1080), but nothing is changing, also, when I tested on LG webOS emulator everything fits perfectly but not on the actual screen, appreciate your assistance
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width">
<meta name='viewport' content='height=device-height'>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Libya TV</title>
</head>
<body>
<section id="deviceready">
<div class="row h-100 align-items-center text-center">
<div class="col-xl-5 offset-xl-6">
<div class="row row1">
<div class="col-xl-4">
<a id="0" class="logo" onclick="playMedia(0)"><img
src="./img/Kids.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="1" class="logo" onclick="playMedia(1)"><img
src="./img/sport.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="2" class="logo" onclick="playMedia(2)"><img
src="./img/beauty.png" class="img-fluid"></a>
</div>
</div>
<div class="row row2">
<div class="col-xl-4">
<a id="3" class="logo" onclick="playMedia(3)"><img
src="./img/doc.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="4" class="logo" onclick="playMedia(4)"><img
src="./img/libyaTv.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="5" class="logo" onclick="playMedia(5)"><img
src="./img/movies.png" class="img-fluid"></a>
</div>
</div>
<div class="row row3">
<div class="col-xl-4">
<a id="6" class="logo" onclick="playMedia(6)"><img
src="./img/series.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="7" class="logo" onclick="playMedia(7)"><img
src="./img/kojina.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="8" class="logo" onclick="playMedia(8)"><img
src="./img/music.png" class="img-fluid"></a>
</div>
</div>
<div class="row row4">
<div class="col">
<p>
<span>NILESAT 11526 H</span>
<img src="./img/Layer%2015.png" class="img-fluid">
<img src="./img/square-twitter-256.png" class="img-fluid">
<img src="./img/app-icon21.png" class="img-fluid">
#Libyatvnetwork
</p>
</div>
</div>
<div class="row row5 ">
<div class="offset-1 ">
<img src="./img/Layer%2016.png" class="img-fluid ">
<img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
<img src="./img/Group%2010%20copy.png" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href='css/video.css'>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="toast.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/media.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
Maybe the TV can not process applications with 1080 resolution (http://webostv.developer.lge.com/discover/specifications/webos-tv-platform/supported-app-resolution/)
I guess you have configured the appinfo.json with the 'resolution': '1920x1080', but you are also setting the HTML application with the device width 1280 (content ="width=device-width") so basically the TV is trying use two different sizes
To support these televisions, you must publish two applications with two different appinfo.json , one for 1080 ("resolution": "1920x1080") and the other for 720 ("resolution": "1280x720")
this is the meta tag I use for my app, try adding viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
Please add your CSS, do you have widths on the containing row divs? Use container-fluid to contain the rows in bootstrap:
https://getbootstrap.com/docs/4.0/layout/overview/ - try wrapping the rows in a div with the class container-fluid:
<div class="container-fluid">
<div class="row h-100 align-items-center text-center">
<div class="col-xl-5 offset-xl-6">
<div class="row row1">
<div class="col-xl-4">
<a id="0" class="logo" onclick="playMedia(0)"><img
src="./img/Kids.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="1" class="logo" onclick="playMedia(1)"><img
src="./img/sport.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="2" class="logo" onclick="playMedia(2)"><img
src="./img/beauty.png" class="img-fluid"></a>
</div>
</div>
<div class="row row2">
<div class="col-xl-4">
<a id="3" class="logo" onclick="playMedia(3)"><img
src="./img/doc.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="4" class="logo" onclick="playMedia(4)"><img
src="./img/libyaTv.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="5" class="logo" onclick="playMedia(5)"><img
src="./img/movies.png" class="img-fluid"></a>
</div>
</div>
<div class="row row3">
<div class="col-xl-4">
<a id="6" class="logo" onclick="playMedia(6)"><img
src="./img/series.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="7" class="logo" onclick="playMedia(7)"><img
src="./img/kojina.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="8" class="logo" onclick="playMedia(8)"><img
src="./img/music.png" class="img-fluid"></a>
</div>
</div>
<div class="row row4">
<div class="col">
<p>
<span>NILESAT 11526 H</span>
<img src="./img/Layer%2015.png" class="img-fluid">
<img src="./img/square-twitter-256.png" class="img-fluid">
<img src="./img/app-icon21.png" class="img-fluid">
#Libyatvnetwork
</p>
</div>
</div>
<div class="row row5 ">
<div class="offset-1 ">
<img src="./img/Layer%2016.png" class="img-fluid ">
<img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
<img src="./img/Group%2010%20copy.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>
I am following online tutorial for bootstrap lightbox thumbnail. I typed exact same code multiple times but it is not working. Whenever I click on the image, it opens up in new tab instead of popping up in the same window.
Here is the code,
<title>Lightbox</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="1.jpg" alt="" class="img-thumbnail"
</div>
</div>
</div>
<!--
<script src="F:/LightBox/lightbox.js"></script>
-->
</body>
I tried adding lightbox.js file at different positions but, still not working.
You have some errors in your HTML:
Your img tag isn'g closed.
You have this inside your a tag href="1.jpg"="image=1", just
link to the image path once.
You aren't using the data-attribute for the plugin:
data-lightbox="" on your a tag either.
Review the Docs: Lightbox2
Working Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
Ok so I'm learning lightbox for the first time. I'm trying to use it with this bootstrap template I downloaded which made it easy to put in the images and customize the navbar. Right now when I click the image, it brings me to a page with JUST the image. No pop up. Right now I'm focusing on just gallery1.jpg if you look at the HTML. Am I missing something? Hope this isn't confusing, thanks.
I am trying to use fancyBox for the lightbox add on.
Do I have the javascript location typed up incorrectly? http://i.imgur.com/pCgZkKA.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>4 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/4-col-portfolio.css" rel="stylesheet">
<!-- lightbox stuff -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#F60;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs- example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../startbootstrap4/index.html"><img src="logonav.png"</a></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Gallery
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a class="fancybox" rel="group" href="images/gallery1.jpg" data-lightbox="fancybox" data- title="untitled"><img src="images/gallery1.jpg"></a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery2.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery10.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery4.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery5.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery3.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery9.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery8.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery7.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery6.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery11.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery12.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
»
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You are loading jQuery twice:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
and at the end
<script src="js/jquery.js"></script>
remove the second one.