Home/ Questions/Q 8229435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:47:39+00:00

I am trying to present an Image Slider in a liquid layout (parent) and

  • 0

I am trying to present an Image Slider in a liquid layout (parent) and I do not like to limit the height and with of the images while they can be requested by big screen monitors (27″) to smalls one like 11″ or even less.
Can you please let me know if there is plugin to help me to fix this issue?
Right now I am using a slider(plugin – Nivo) which has a fixed layout and I am not able to change it to liquid
Here is the Code which I have:
HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>GALLERY</title>
 </head>
 <body>
 <div id="row_1">
 <div class="container"></div>
 </div>
 <div id="row_2">
 <div class="container">
 <div id="slideshow"> 
 <div id="slider"> 
 <img  src="img/1.jpg" title="" style="" /></div>      
 <img  src="img/2.jpg" title="" style="" /></div> 
 <img  src="img/3.jpg" title="" style="" /></div> 
 <img  src="img/4.jpg" title="" style="" /></div>      
 </div> 
 </div>  
 </div>
 </div>
 <div id="row_3">
 <div class="container"></div>
 </div>
 </body>
 </html>

CSS

 * {
    margin: 0;
    padding: 0;
    }
 html{
    height:100%;
    width: 100%;
   }
 body {
  background-color: #272321;
  height:100%;
  width: 100%; 
  }
 #row_1 {
  position:relative;
  height:15%;
  width: 100%;
 }
 #row_2{
   position:relative;
   height:77%;
   width: 100%;
  }
  #row_3{
   position:relative;
   height:8%;
   width: 100%;
   background-color: #151110; 
   }
  .container{
   position:relative;
   margin: 0 auto;
   height:100%;
   width: 80%;
  }

Do you think if it is a good idea that I use several layouts for different screen size? Is there any way to fix this things with Jquery?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know about pre-canned plug-ins, but it’s not much of your own code to handle this.

    You can attach an event handler to window resize, check the size of your container div and use your own javascript to select new image sizes for the slideshow based on the new container size.

    Using a slight delay to prevent the code running hundreds of times during a resize, it could look like this:

    (function() {
    var pauseTimer;

    $(window).resize(function() {
        // clear any previous timer running
        if (pauseTimer) {
            clearTimeout(pauseTimer);
        }
        // set new timer
        pauseTimer = setTimeout(function() {
            // user finished or paused resizing, 
            // so now we can recalculate slideshow size
            pauseTimer = null;
            // examine the size of your container div
            // select a new size image for your slideshow and load those images here
        }, 500);
    })
})();

    Here’s a demo: http://jsfiddle.net/jfriend00/Tucf2/

    • 0