stackoom
  简体   繁体   中英

Generating Image Elements with .img-responsive Bootstrap Class

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

Question

So I am trying to autoload images on a page via JS. I want the page to essentially be a blank page that can act as many pages.

Structure:

Homepage with projects > Click on project > Project page

However, I cannot figure out how to get the images to load into my bootstrap columns as .img-responsive images.

I will attach snippets to both pages and JS.

NOTE: Images are currently all the same, plan to change later...

Thanks!

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: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>

Project Page- 

<!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 Script 

$(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 answers

solution1
 0  2016-11-11 07:07:23

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

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

solution2
 0  2016-11-11 07:11:45

img-responsive is a class defined in Bootstrap. If you want the appended images to be img-responsive , you just need to include this class in the class list while appending.

Just change 

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

To 

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

solution3
 0  2016-11-11 08:03:59

You can also do this with vanilla JS, in case you didn't want to bother with jQuery. 

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Images are cut off using bootstrap class img-responsive and jcarousel How to add the img-responsive class in javascript Showing a portion of an image using css but having it responsive with img-responsive Bootstrap 3 img-responsive breaks after applying css rotate img-responsive with fixed style Add a responsive background image to a division class bootstrap Making All image bootstrap responsive class automatically Bootstrap: Responsive Image in Panel Responsive header image (Bootstrap 3/4) Bootstrap Overlay image not responsive
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM