0
JS経由でページに画像を自動読み込みしようとしています。私は本質的に多くのページとして機能することができる空白のページであるページをしたい。.imgレスポンスブートストラップクラスを使用した画像要素の生成
構造：プロジェクトと
ホームページ>プロジェクトをクリック>プロジェクトページ
しかし、私はIMG-応答画像としての私のブートストラップ・カラムにロードした画像を取得する方法を見つけ出すことはできません。
スニペットをJSとJSの両方に添付します。
注：画像は...
おかげで、現在はすべて同じで、後に変更する予定！
HOMEPAGE -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" 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>
<a class="navbar-brand" href="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works"><a href="./works.html">works</a></li>
<li name="about"><a href="./about.html">about</a></li>
<li><a href="mailto:[email protected]?subject=h o l a !">contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=praxis">
<img src="./images/praxis.png" class="img-responsive">
<h6>praxis studio</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#woodbury">
<img src="./images/woodbury.jpg" class="img-responsive">
<h6>woodbury school or architecture</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#mmr">
<img src="./images/mmr.gif" class="img-responsive">
<h6>miracle manor retreat</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#felix">
<img src="./images/felix.gif" class="img-responsive">
<h6>félix beltrán</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#wtmf">
<img src="./images/wtmf.png" class="img-responsive">
<h6>within the magnetic field</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#cargo">
<img src="./images/cargo.gif" class="img-responsive">
<h6>cargo typeface</h6>
</a>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
プロジェクトページ -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" 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>
<a class="navbar-brand" href="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works"><a href="./works.html">works</a></li>
<li name="about"><a href="./about.html">about</a></li>
<li><a href="mailto:[email protected]?subject=h o l a !">contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 column text-center">
<div id="imageContainer" class="img-responsive">
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Javaスクリプト
$(function(){
var projects = ['praxis','woodbury','mmr','felix','wtmf','cargo'];
var pages = {
'praxis': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'woodbury': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'mmr': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'felix': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'wtmf': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'cargo': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
}
var page = window.location.hash.substring(1);
page = (page) ? page:'praxis';
console.log(page);
for(var i = 0; i < pages[page].length; i++)
{
var imagePath = pages[page][i];
console.log(imagePath);
$('#imageContainer').append('<img src="./' + imagePath + '">');
}
});