I'm learning Framework7 now, but I'm stuck in this problem. I have created two pages, this is the file
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab7">
<title>Ciptaloka Editor</title>
<link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/framework7.material.min.css">
<link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="theme-teal">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<!-- off canvas -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
a
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel" data-panel-left>
<i class="icon material-icons">menu</i>
</a>
</div>
<div class="center">
Custom T-Shirt
</div>
<div class="right">
<a class="link">
Done
</a>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#produk" class="link tab-link active">
<i class="icon material-icons">dashboard</i>
<span class="tabbar-label">Produk</span>
</a>
<a href="#image" class="link tab-link">
<i class="icon material-icons">add_a_photo</i>
<span class="tabbar-label">Image</span>
</a>
<a href="#text" class="link tab-link">
<i class="icon material-icons">text_fields</i>
<span class="tabbar-label">Text</span>
</a>
<a href="#clipart" class="link tab-link">
<i class="icon material-icons">photo_filter</i>
<span class="tabbar-label">Clipart</span>
</a>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
<div class="tabs">
<div class="tab active" id="produk">
Go home 2
</div>
<div class="tab" id="image">
Image
</div>
<div class="tab" id="text">
Text
</div>
<div class="tab" id="clipart">
Clipart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>
index2.html
<div data-page="index2" class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel">
<a href="index.html">
<i class="icon material-icons">back</i>
</a>
</a>
</div>
<div class="center">
Custom Case
</div>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
Success direct page
</div>
</div>
</div>
When I'm click 'go home 2' at index.html, its succesfully direct to index2.html, content is shown, but not with the navbar, its only shown a background, but the text is hidden. This my screenshoot :
Why this is happen? Is I miss something?
your navbar is inside your data-page
you switch to index2 and all page change.
let navbar outside -> view-main -> navbar and then the data-page
sorry my bad english.
Related
For the html pages where the external javascript does not work, I put the js code in internally in the HTML file and it worked but what's the problem with the pages that can't do it without applying javascript in the HTML pages. The only page it works externally is in contact.html below. After that code is the sample1.html file where it does not work externally but only internally? What can I do to make it work externally? (javascript file is in the same folder)
contact.html
` <!--contact us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">Contact Us</title>
</head>
<body>
<!--header-->
<section class="header3">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Sponsor Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Contact Us</h1>
</div>
</section>
<!--inquiry box inspired from w3schools.com-->
<section class="box">
<div class="row">
<div class="box-col">
<form action="/action_page.php">
<div class="container">
<h1>Have Any Inquires?</h1>
<p>Fill out the form and our team will get back to you as soon as possible</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="inquiry"placeholder="Inquiry" name="name" required>
<p class="rq">*Required Field </p>
<input type="text" id="email2" placeholder="Email address" name="mail" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button1">Submit</button>
</div>
</form>
</div>
<div class="box-col">
<form name="form1" action="/action_page.php" onsubmit="required"()>
<div class="container">
<h1>Get A Estimated Quote</h1>
<p>This is just a estimate and our team will send a email with more detailed information</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="text" placeholder="Name" name="name3" required>
<p class="rq">*Required Field </p>
<input type="text" id="email" placeholder="Email address" name="mail3" required>
<p class="rq">*Required Field </p>
<input type="text" id="classNum" placeholder="How many different classrooms would you need" name="classrooms3" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button">Submit</button>
</div>
</form>
</div>
</div>
</section>
<!--end-->
<!-- offices(portion)-->
<section class="portion">
<h1>Our Offices</h1>
<div class="row">
<div class="portion-col">
<img src="images/city1.jpg">
<h3>Toronto Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city2.jpg">
<h3>Montreal Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city3.jpg">
<h3>Brampton Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>About Us</h1>
<br>
<br>
Learn More
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html>` </strike>
sample1.html page that doesn't work externally
<!--about us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">ClassPass An Interactive Classroom</title>
</head>
<body>
<!--header-->
<section class="header">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks" >
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Support Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Class Pass</h1>
<p>An Interactive Classroom</p>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
<script>
var icon2 = document.getElementById("icon2");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData=="light"){
icon2.src== "images/moon.png";
document.body.classList.remove("dark-mode");
}
else if(localData=="dark"){
icon2.src== "iamges/sun.png";
document.body.classList.add("dark-mode");
}
icon2.onclick = function(){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
icon2.src="images/sun.png";
localStorage.setItem("theme","dark");
}
else{
icon2.src="images/moon.png";
localStorage.setItem("theme","light");
}
}
</script>
<!--sideblock-->
<section class="sideblock">
<div class="row">
<div class="side-col">
<h1>Our Mission</h1>
<p>Here at Class Pass we wanted to bring the classroom into the homes of students and teachers. We re-imagined the way students can interact with their classmates and teachers away from school. ClassPass is designed to offer students a wide varity of learning material through artifical intelligence based reccomended resources. At Class Pass we believe the future starts with the classroom. Important features: </p>
<div class="list">
<ul>
<br>
<li>AI Powered Resources</li>
<br>
<li>Interactive Online Community</li>
<br>
<li>Direct Communication To Teachers</li>
</ul>
</div>
</div>
<div class="side-col">
<img src="images/class1.jpg">
</div>
</div>
</section>
<!-- sub moving cards-->
<section class="sub">
<h1>Specififc features</h1>
<div class="row">
<div class="sub-col">
<img src="images/infopic1.png">
<div class="layer">
<h3>AI Powered Resources</h3>
<p>Class Pass uses the power of Artifical Intelligence to curate specialized resources to each student and teacher</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic2.jpg">
<div class="layer">
<h3>Interactive Online Community</h3>
<p>Students can communicate with their classmates and interact with cards work together</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic3.jpg">
<div class="layer">
<h3>Direct Communication To Teachers</h3>
<p>Parents and students can ask their teachers any questions anytime of the day</p>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>Interested In Our Vision?</h1>
<br>
<br>
Support Us
Contact Us
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html> </strike>
I am newbie in CSS and Bootstrap and was trying to create a image gallery using Bootstrap Grid In which I am using One row class and under which i am using col-lg-4 class for 3 columns in the container and if i am using 2 separate rows then the grid is working as i want.
but if i am using only one row class then the first 3 images are arranged properly as i want and if i am adding the fourth image in the same row then the image should automatically move into the second row and it is moving in second row too but in the second column not the first. Due to this reason the images are not correctly positioned. Any one can explain? and tell me what i am doing wrong?
below is the html code.
body {
font-family: "Bebas Neue";
}
.navbar-brand {
letter-spacing: 2px;
}
.nav {
letter-spacing: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Linking Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!-- LINKING JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- Linking Bootstrap JAVASCRIPT -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet"/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Image Gallery</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-nav-demo"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<strong>J.Photography</strong>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>The Image gallery</h1>
<p>A bunch of beautiful Pictures from Around the Globe!</p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
</body>
</html>
I think the images you added have different height, try give your image a fixed height to get aligned equally.
Here is a simple dropdpwn popup example from semantic-ui which fails to work:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="example">
<div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colors</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
<a class="item">
<i class="cart icon"></i>
Checkout
</a>
</div>
</div>
<div id="web_content">
</div>
<div id="web_footer">
</div>
</form>
<script type="text/javascript">
$('.example .menu .browse').popup({
inline: true,
hoverable: true,
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
</script>
</body>
when I click/hover on browse nothing happens. i don't know enough about jquery selectors tough. thanks for reading.
I have js fiddle which works fine,
I tried to replicate it on my local system, where slider(menu icon) neither appears nor works. Here is my jsfiddle and source code, can anyone tell me what I missed.
Jsfiddle: https://jsfiddle.net/karimkhan/nzxd5r3r/10/
source code on local system:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="css/materialize.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</script>
</head>
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="js/init.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
You have to wait until the DOM has been initialized (document has been fully loaded). Wrap your slider code in something like this:
$(function() {
//code
});
Also, you're using an old version of jQuery in the code you posted which is incompatible with Materialize.js. Please use the latest version of jQuery 1.x (check here: https://developers.google.com/speed/libraries/#jquery)
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.