Home » Javascript » the lightbox is working on my other page but not on my home page

the lightbox is working on my other page but not on my home page

Posted by: admin November 1, 2017 Leave a comment

Questions:

I’m doing lightbox but whenever I click it does not do anything. I don’t know what I am doing wrong. I copied and pasted the code from a different page on my website but it won’t work on my homepage.

Here is all of my code. I have the javascript working on my on my other page but wont work on my home page link to see it here.

html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Photo Grid</title>
<style>
ul.rig {
list-style: none;
font-size: 0px;
margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
width: 22.5%; /* this value + 2.5 should = 25% */
}
@media (max-width: 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.rig li {
width: 100% !important; /* over-ride all li styles */
margin: 0 0 20px;
}
}
.trim {
overflow: hidden;
height: 500px;
}
</style>
<link href="/student/webdesign/2017/02_03/Tinker/photoGrid/lightbox2-master/dist/css/lightbox.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="rig columns-3">
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/buck.png" data-lightbox="image-2"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/buck.png" /></a>
<h3>Buck</h3>
<p>Born and Raised in Montreal, Sebastien Côté is a highly pragmatic person who enjoys simple mechanical devices over the high tech arsenal employed by other operators. The Skeleton Key, an under-barrel mounted 12 gauge shotgun, allows Côté to swiftly breach and target hostiles, by changing hand positions on his assault rifle.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/mute.png" data-lightbox="image-3"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/mute.png" /></a>
<h3>Mute</h3>
<p>A veteran of Britain's Government Communications Headquarters (GCHQ) unit, Mark Chandar’s exceptional work as a signals intelligence (sigint) specialist has made him a valuable addition to Rainbow. 
He brings with him a Signal Disruptor from his former career, which allows Chandar to jam all communications in a set area, preventing remote detonations and the use of drones. The GC90 “Moni”, blocks the signal from a remote detonator or control from reaching any device within range.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/cav.png" data-lightbox="image-4"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/cav.png" /></a>
<h3>Caveira</h3>
<p>Known as a brutal interrogator, Taina “Caveira” Pereira’s makes for a fearless Operator on the field. Originally from a small town on the outskirts of São Paulo, her life could have taken a turn for the worst when she was arrested at 16 on robbery charges. Her promising profile allowed for an exception, giving her the option between entering a juvenile reformatory and working with BOPE.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/jager.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/jager.png" /></a>
<h3>Jager</h3>
<p>A veteran of GSG9 anti-piracy ops in the Indian Ocean, Marius Streicher has seen action as a helicopter operator and technology advisor. 
He can secure areas against airborne explosives using his active defense system or "Magpie", capable of neutralizing any projectiles on approach.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/glaz.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/glaz.png" /></a>
<h3>Glaz</h3>
<p>Timur Glazkov is an expert marksman with experience in the South Ossetian conflict and years of VIP protection duty. 
As Rainbow's sniper, he is the squad member with the most expertise in long range scoped weaponry. Glaz can use a magnifier scope to transform his Dragunov into a deadly long-range riffle.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/fuze.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/fuze.png" /></a>
<h3>Fuze</h3>
<p>Growing up in a military family in Samarkand, Uzbekistan, Shuhrat Kessikbayev emigrated to Russia shortly before the fall of the Soviet Union. He is an expert tinkerer and master craftsman, more at ease with the workings of machines than people. 
He carries a cluster charge of his own invention, which when planted on a wall or floor, bores a hole through it, releasing a group of small fragmentation grenades.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/chanka.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/chanka.png" /></a>
<h3>Tachanka</h3>
<p>Alexsandr Senaviev is an iconoclast who came of age in a pre-glasnost red army family and has retained an interest in soviet machinery and weaponry. 
During operations, he deploys a signature vintage mounted machine gun that he has restored and maintained with loving care.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/kapkan.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/kapkan.png" /></a>
<h3>Kapkan</h3>
<p>Born and raised in Kovrov, Basuda is the son of factory workers. To escape a life in the factory, he enlisted with the Ministry of Internal Affairs and was sent to a small port town on the Barents Sea. Basuda became an avid hunter and trapper during his time in the Arctic Circle. 
This expert in lures and traps carries into battle a trap equipped with a laser trip for windows and doors certain to impede any foe (or friend) caught in its blast.</p>
</li>
<li>
<a href="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/pulse.png" data-lightbox="image-1"><img src="/student/webdesign/2017/02_03/Tinker/photoGrid/photos/pulse.png" /></a>
<h3>Pulse</h3>
<p>Jack Estrada's work with the FBI biometrics program allowed him to blend his background in communications and biochemistry to a powerful effect. 
Moving from the lab to active duty in 2010, his ability to read people made him a natural negotiator. He wields a heartbeat sensor capable of detecting enemies or allies at a distance.</p>
</li>
</ul>
<script src="/student/webdesign/2017/02_03/Tinker/photoGrid/lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>
</body>
</html>
style css
@charset "UTF-8";
/* CSS Document */
#container{
margin: 0 auto;
max-width: 1200px;
}
header {
width: 94%;
padding: 3%;
background-color: #647FFF;
}
header #title {
font-size: 50px;
color: #CB0003;
}
nav {
width: 97%;
background-color: #647FFF;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5% ;
}
nav ul li a {
text-decoration: none;
color: #CB0003;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}
#content {
float: left;
padding: 3%;
width: 64%;
}
aside {
float: right;
padding: 3%;
width: 24%;
background-color: #eee;
}
footer{
width: 94%;
padding: 3%;
background-color: #647FFF;
border-top: 5px solid #647FFF;
color: #fff;
text-align: center;
}
@media all and (max-width : 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#content {
width: 94%;
padding: 3%;
}
#sidebar {
width: 94%;
padding: 3%;
border-top: 3px solid #E64A19;
}
}
@media all and (max-width : 530px) {
nav ul li {
display:block;
width: 94%;
}
header #title {
font-size: 25px;
color: #CB0003;
}
}
.clearfix {
overflow: auto;
}
/* https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
.topnav {
background-color: #2147FF;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
reset css
@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
other css
ul.rig {
list-style: none;
font-size: 0px;
margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
width: 22.5%; /* this value + 2.5 should = 25% */
}
@media (max-width: 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.rig li {
width: 100% !important; /* over-ride all li styles */
margin: 0 0 20px;
}
}
.trim {
overflow: hidden;
height: 500px;
}
Answers: