CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapimage-size
user3120861
user3120861

Reputation: 185

Bootstrap and conditional image sizes

With desktop images that span the width of the browser, we'd like to display smaller images for the slider in our Bootstrap/Classic ASP site. The site is currently resizing the hi-res image using Bootstrap's built-in 'img-responsive' class, but we feel we could improve the experience if we loaded smaller images for viewports under 768 pixels and the existing images for 768 pixels and above.

Here's the basic markup for the slider:

<div class="item active">
    <a href="#">
        <img src="img/slide_001_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">First slide</a></h3>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="img/slide_002_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">Second slide</a></h3>
        </div>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="img/slide_003_1900x650.jpg">
        <div class="carousel-content">
            <h3><a href="#">Third slide</a></h3>
        </div>
    </a>
</div>

Rewriting the src doesn't appear to be as good of an idea as it seems, since it essentially processes double the HTTP requests. Adaptive Images requires PHP and this site is built using Classic ASP, so I'm trying to find out if there's possibly a jQuery script that can leveraged that would work similar to Adaptive Images.

Upvotes: 1

Views: 1247

Answers (2)

VJP
VJP

Reputation: 34

    <div class="item active">
            <div class="carousel-content">
                <h3><a href="#">First slide</a></h3>
            </div>
         <div class="img_disp" style="display:none">
             <img src="img/slide_001_1900x650.jpg" height="15px" width="15px">
         </div>
    </div>
    <div class="item">
            <div class="carousel-content">
                <h3><a href="#">Second slide</a></h3>
            </div>
           <div class="img_disp" style="display:none">
             <img src="img/slide_002_1900x650.jpg" height="15px" width="15px">
           </div>
    </div>
    <div class="item">
            <div class="carousel-content">
                <h3><a href="#">Third slide</a></h3>
            </div>
          <div class="img_disp" style="display:none">
              <img src="img/slide_003_1900x650.jpg" height="15px" width="15px">
          </div>

    </div>
//this is the jquery part
    <script>
    $(document).ready(function(){
       $(document).on('click','h3>a',function(event){
               event.preventDefault();
               $(this).parents('.item').find('.img_disp').show();
         });
    });
    </sript>

the image sizes can be varied by changing the height and the width of your desire. Try this code.

Upvotes: 1

millhouse
millhouse

Reputation: 10007

You don't need any server-side or JavaScript support at all for this. You just need to change your images to be CSS background-images instead of inline in the HTML, then let CSS and the browser determine what you need.

Step 1 - Remove inline img tags

<div class="item active">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">First slide</a></h3>
    </div>
  </a>
</div>
<div class="item">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">Second slide</a></h3>
    </div>
  </a>
</div>
<div class="item">
  <a href="#">
    <div class="carousel-content">
        <h3><a href="#">Third slide</a></h3>
    </div>
  </a>
</div>

Step 2 - Use CSS background-image to reinstate images

You might have to use background-position to position them how you'd like.

div.item {
  height: 8em;
  width: 36em;  
  background-image: url("http://www.thecatman.info/wp-content/uploads/2014/06/five-cute-kittens.png")   
}

Step 3 - Add a responsive version

Too many kittens when we drop below 768px? No problem; add this:

@media all and (max-width: 768px) {
  div.item {
    width: 18em;
    background-image:url("http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=44246076")
  }
}

Here's a JSFiddle to demonstrate it.

Upvotes: 1

Related Questions