使用.img-responsive Bootstrap类生成图像元素
Generating Image Elements with .img-responsive Bootstrap Class
所以我试图通过JS在页面上自动加载图像。我希望这页基本上是一个空白页,可以作为许多页。
结构:
项目主页>点击项目>项目页面
然而,我不知道如何让图像加载到我的引导列作为.img-responsive
图像。
我将附加片段到页面和JS。
注意:图像目前都是相同的,计划稍后更改…
谢谢!
首页-
<!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:la@philesq.com?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:la@philesq.com?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>
<<p> Java脚本/strong> $(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 + '">');
}
});
用img-responsive
类创建它们:
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');
img-responsive
是在Bootstrap中定义的类。如果您想要附加的图像是img-responsive
,您只需要在附加时在类列表中包含这个类。
只改变
$('#imageContainer').append('<img src="./' + imagePath + '">');
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');
如果你不想使用jQuery,你也可以用普通的JS来做这件事。
var element = document.createElement('img');
element.className = "img-responsive";
// Or
element.classList.add("img-responsive");
var container = document.getElementById('yourContainer');
container.appendChild(element);
相关文章:
- Wordpress自定义元框多图像上传
- 如何在上传前在浏览器中去除图像元数据(javascript)
- 是否有javascript机制来修改图像的EXIF元数据信息
- JavaScript 使用 url 上传图像(图像已经在互联网上,不同的域)
- 在 Javascript 中使用多个图像帧的 3D 旋转效果 - 如何在某些帧上触发元素淡入/淡出
- 使用JavaScript更改背景图像图像以进行图像幻灯片
- 从HTML5 FileApi加载的图像中检索EXIF图像元数据
- 上传前无法显示图像图像
- 无法使用exif获取图像元数据的属性
- JavaScript-从DOM元素数组设置图像宽度
- 像元srcset响应图像翻转
- 编辑图像/图像详细信息-替换按钮缺失
- 如何通过悬停一个li元素来改变body背景图像
- 在缩略图上更改滑块图像.图像改变一秒钟,然后恢复
- 在jQuery中移动图像(图像裁剪)
- 使用JavaScript编写图像元数据
- 如何在Javascript中提取本地图像的元数据?
- 在Angular JS中使用:before pseudo元素来插入具有动态路径的图像
- Cycle2 -向图像标签添加元数据
- 单击鼠标,通过将类名从一个元素传递到下一个元素来更改图像