堆栈内存溢出
  繁体   English   中英

使用.img响应式Bootstrap类生成图像元素

[英]Generating Image Elements with .img-responsive Bootstrap Class

 原文  2016-11-11 07:03:19  7   3    javascript/ jquery/ twitter-bootstrap

问题描述

所以我想通过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>

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 + '">');
    }

});

3 个解决方案

解决方案1
 0  2016-11-11 07:07:23

只需使用img-responsive类创建它们： 

$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

解决方案2
 0  2016-11-11 07:11:45

img-responsive是Bootstrap中定义的类。 如果您希望附加的图像对img-responsive ，则只需在附加时将此类包含在类列表中即可。

只是改变 

$('#imageContainer').append('<img src="./' + imagePath + '">');

至 

$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

解决方案3
 0  2016-11-11 08:03:59

如果您不想使用jQuery，也可以使用Vanilla JS进行此操作。 

var element = document.createElement('img');
element.className = "img-responsive";
// Or
element.classList.add("img-responsive");

var container = document.getElementById('yourContainer');
container.appendChild(element);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用引导程序类img响应和jcarousel剪切图像 如何在JavaScript中添加img响应类 使用 css 显示图像的一部分，但使用 img-responsive 应用CSS旋转后Bootstrap 3 img响应中断 具有固定风格的img-responsive 将响应式背景图像添加到除法类引导程序 自动使所有图像引导响应类 Bootstrap：面板中的响应式图像 响应式标题图片（引导程序3/4） Bootstrap 覆盖图像无响应
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM