SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive image container height.

    Responsive image container height.

    Hi all

    I have a demo here - http://www.ttmt.org.uk/gallery/

    It's a responsive thumbnails carousel and image slideshow.

    The thumbnails load underneath the main image before the slideshow starts.

    All the images have the same dimensions so I have set the min-height of the main image container
    to the height of the images so the thumbnails load in the correct position.

    My problem is when the window is sized the main image's height changes but the thumbnails stay in
    the same position.

    I would like the thumbnails to start in the correct position below the main image and then move up with the main image when it's height changes.

    If I set the image container to max-height the thumbnails start in the wrong position but follow the height of the main images when the window is resized.

    http://www.ttmt.org.uk/gallery-2/

    How can I load the thumbnails in the correct position and move them when the window is resized.

    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
          text-align:center;
        }
        #spinner,
        .arrow{
          display:none;
        }
        #controls{
          opacity:0;
        }
        #spinner{
          position:absolute;
          top:10px;
          left:50%;
        }
        section#wrap{
          max-width:915px;
          border-left:40px solid #fff;
      	  border-right:40px solid #fff;
          margin:0 auto;
        }
      	#bigImg{
          margin:70px 0 0px 0;
          min-height:606px;
      	}
        #bigImg img{
          max-width:100%;
          height:auto;
          text-align:center;
        }
        #controls{
          margin:3px 0;
          /*border-top:1px dotted #eee;*/
        }
        #controls ul{
          list-style:none;
        }
        #controls ul li{
          display:inline-block;
          height:25px;
          width:25px;
          text-indent:-999em;
          background:url('images/controls.png') 0 0 no-repeat;
        }
        #controls ul li:hover{
          cursor:pointer;
        }
        #controls ul li#back{
          background-position:0px 0px;
        }
        #controls ul li#back:hover{
          background-position:0px -25px;
        }
        #controls ul li#stop{
          background-position:-25px 0px;
        }
        #controls ul li#stop:hover{
          background-position:-25px -25px;
        }
        #controls ul li#play{
          display:none;
          background-position:-50px 0px;
        }
        #controls ul li#play:hover{
          background-position:-50px -25px;
        }
        #controls ul li#forward{
          background-position:-75px 0px;
        }
        #controls ul li#forward:hover{
          background-position:-75px -25px;
        }
        
        #thumbWrap{
          max-width:100%;
          background:#fff;
          margin:0 25px;
          position:relative;
        }
        .thumbs{
          overflow:hidden;
          white-space: nowrap;
          margin:0 5px;
        }
        .thumbs ul{
          position:relative;
          float:left;
        }
        .thumbs ul li{
          display: inline-block;
        }
        .thumbs ul li a{
          display:block;
          float:left;
        }
        .thumbs ul li a img{
          display:none;
          opacity:.6;
        }
        .thumbs ul li a img:hover{
          opacity:1;
        }
        .arrow{
          font-size:1.5em;
          padding:0 5px;
          color:#aaa;
          position:absolute;
          margin:5px 0 0 0;
        }
        .arrow:hover{
          cursor:pointer;
          color:blue;
        }
        .left{
          top:0;
          left:-30px;
        }
        
        .right{
          right:-30px;
          top:0;
        }
            
        @media only screen and (max-width:400px){
         section#wrap{
            border-left:5px solid #fff;
        	  border-right:5px solid #fff;
            margin:0 auto;
          }
          #bigImg,
          #controls{
            display:none;
          }
          .arrow{
            color:#fff;
            position:static;
            display:none;
          }
          #thumbWrap{
             max-width:100%;
             background:#fff;
             margin:0;
             position:relative;
             border: 1px solid #999;
           }
           .thumbs{
             overflow:auto;
             white-space: normal;
             margin:0 5px;
           }
           .thumbs ul{
             position:static;
             float:none;
           }
           .thumbs ul li{
             display:block;
             max-width:100%;
           }
           .thumbs ul li a{
             display:block;
             float:none;
           }
           .thumbs ul li a img{
             width:380px;
             display:none;
             opacity:.6;
           }
           .thumbs ul li a img:hover{
             opacity:1;
           }
        }
      </style>
      
      </head>
      
    <body>
      
      <section id="wrap">
        <img id="spinner" src="images/ajax-loader.gif" alt="loader" />
        
        <div id="imgWrap">    
          <div id="bigImg">
            <img src="" alt="" />
          </div>
        </div><!-- #imgWrap -->
        
        <div id="controls">
          <ul>
            <li id="back">Back</li>
            <li id="stop">Stop</li>
            <li id="play">Play</li>
            <li id="forward">Forward</li>
          </ul>
        </div>
        
        <div id="thumbWrap">
          <a class="arrow left">&larr;</a>
          
            <div class="thumbs">
              <ul>
                <li><a href="images/01.jpg" id="0"><img src="images/01_th.jpg" /></a></li>
                <li><a href="images/02.jpg" id="1"><img src="images/02_th.jpg" /></a></li>
                <li><a href="images/03.jpg" id="2"><img src="images/03_th.jpg" /></a></li>
                <li><a href="images/04.jpg" id="3"><img src="images/04_th.jpg" /></a></li>
                <li><a href="images/05.jpg" id="4"><img src="images/05_th.jpg" /></a></li>
                <li><a href="images/06.jpg" id="5"><img src="images/06_th.jpg" /></a></li>
                <li><a href="images/07.jpg" id="6"><img src="images/07_th.jpg" /></a></li>
                <li><a href="images/08.jpg" id="7"><img src="images/08_th.jpg" /></a></li>
                <li><a href="images/09.jpg" id="8"><img src="images/09_th.jpg" /></a></li>
                <li><a href="images/10.jpg" id="9"><img src="images/10_th.jpg" /></a></li>
                <li><a href="images/11.jpg" id="10"><img src="images/11_th.jpg" /></a></li>
                <li><a href="images/12.jpg" id="11"><img src="images/12_th.jpg" /></a></li>
                <li><a href="images/13.jpg" id="12"><img src="images/13_th.jpg" /></a></li>
                <li><a href="images/14.jpg" id="13"><img src="images/14_th.jpg" /></a></li>
                <li><a href="images/15.jpg" id="14"><img src="images/15_th.jpg" /></a></li>
              </ul>
            </div>
        
         <a class="arrow right">&rarr;</a>
        </div><!-- #thumbWrap-->
        
        
      </section>  
      
      
      <script src="js/imagesLoaded.js"></script>
      
      <script src="js/test.js"></script>
      
      
    </body>
    
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why don't you just supply a real default image with its width and height attributes in place and the space will be held open.

    e.g.
    Code:
    <div id="bigImg"> <img src="http://www.ttmt.org.uk/gallery-2/images/01.jpg" alt="" width="915" height="600" /> </div>

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thought that was going to work but inbetween the image loading the thumbnails jump upto the top again.

    http://www.ttmt.org.uk/gallery-4/

    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
          text-align:center;
        }
        #spinner,
        .arrow{
          display:none;
        }
        #controls{
          opacity:0;
        }
        #spinner{
          position:absolute;
          top:10px;
          left:50%;
        }
        section#wrap{
          max-width:915px;
          border-left:40px solid #fff;
      	  border-right:40px solid #fff;
          margin:0 auto;
        }
      	#bigImg{
          margin:70px 0 0px 0;
          width:100%;
          background:#fff;
      	}
        #bigImg img{
    		width:915px;
          max-width:100%;
          height:auto;
          text-align:center;
        }
        #controls{
          margin:3px 0;
          /*border-top:1px dotted #eee;*/
        }
        #controls ul{
          list-style:none;
        }
        #controls ul li{
          display:inline-block;
          height:25px;
          width:25px;
          text-indent:-999em;
          background:url('images/controls.png') 0 0 no-repeat;
        }
        #controls ul li:hover{
          cursor:pointer;
        }
        #controls ul li#back{
          background-position:0px 0px;
        }
        #controls ul li#back:hover{
          background-position:0px -25px;
        }
        #controls ul li#stop{
          background-position:-25px 0px;
        }
        #controls ul li#stop:hover{
          background-position:-25px -25px;
        }
        #controls ul li#play{
          display:none;
          background-position:-50px 0px;
        }
        #controls ul li#play:hover{
          background-position:-50px -25px;
        }
        #controls ul li#forward{
          background-position:-75px 0px;
        }
        #controls ul li#forward:hover{
          background-position:-75px -25px;
        }
        
        #thumbWrap{
          max-width:100%;
          background:#fff;
          margin:0 25px;
          position:relative;
        }
        .thumbs{
          overflow:hidden;
          white-space: nowrap;
          margin:0 5px;
        }
        .thumbs ul{
          position:relative;
          float:left;
        }
        .thumbs ul li{
          display: inline-block;
        }
        .thumbs ul li a{
          display:block;
          float:left;
        }
        .thumbs ul li a img{
          display:none;
          opacity:.6;
        }
        .thumbs ul li a img:hover{
          opacity:1;
        }
        .arrow{
          font-size:1.5em;
          padding:0 5px;
          color:#aaa;
          position:absolute;
          margin:5px 0 0 0;
        }
        .arrow:hover{
          cursor:pointer;
          color:blue;
        }
        .left{
          top:0;
          left:-30px;
        }
        
        .right{
          right:-30px;
          top:0;
        }
            
        @media only screen and (max-width:400px){
         section#wrap{
            border-left:5px solid #fff;
        	  border-right:5px solid #fff;
            margin:0 auto;
          }
          #bigImg,
          #controls{
            display:none;
          }
          .arrow{
            color:#fff;
            position:static;
            display:none;
          }
          #thumbWrap{
             max-width:100%;
             background:#fff;
             margin:0;
             position:relative;
             1border: 1px solid #999;
           }
           .thumbs{
             overflow:auto;
             white-space: normal;
             margin:0 5px;
           }
           .thumbs ul{
             position:static;
             float:none;
           }
           .thumbs ul li{
             display:block;
             max-width:100%;
           }
           .thumbs ul li a{
             display:block;
             float:none;
           }
           .thumbs ul li a img{
             width:380px;
             display:none;
             opacity:.6;
           }
           .thumbs ul li a img:hover{
             opacity:1;
           }
        }
      </style>
      
      </head>
      
    <body>
      
      <section id="wrap">
        <img id="spinner" src="images/ajax-loader.gif" alt="loader" />
        
        <div id="imgWrap">    
          <div id="bigImg">
            <img src="images/01.jpg" alt="" width="915" height="600" />
          </div>
        </div><!-- #imgWrap -->
        
        <div id="controls">
          <ul>
            <li id="back">Back</li>
            <li id="stop">Stop</li>
            <li id="play">Play</li>
            <li id="forward">Forward</li>
          </ul>
        </div>
        
        <div id="thumbWrap">
          <a class="arrow left">&larr;</a>
          
            <div class="thumbs">
              <ul>
                <li><a href="images/01.jpg" id="0"><img src="images/01_th.jpg" /></a></li>
                <li><a href="images/02.jpg" id="1"><img src="images/02_th.jpg" /></a></li>
                <li><a href="images/03.jpg" id="2"><img src="images/03_th.jpg" /></a></li>
                <li><a href="images/04.jpg" id="3"><img src="images/04_th.jpg" /></a></li>
                <li><a href="images/05.jpg" id="4"><img src="images/05_th.jpg" /></a></li>
                <li><a href="images/06.jpg" id="5"><img src="images/06_th.jpg" /></a></li>
                <li><a href="images/07.jpg" id="6"><img src="images/07_th.jpg" /></a></li>
                <li><a href="images/08.jpg" id="7"><img src="images/08_th.jpg" /></a></li>
                <li><a href="images/09.jpg" id="8"><img src="images/09_th.jpg" /></a></li>
                <li><a href="images/10.jpg" id="9"><img src="images/10_th.jpg" /></a></li>
                <li><a href="images/11.jpg" id="10"><img src="images/11_th.jpg" /></a></li>
                <li><a href="images/12.jpg" id="11"><img src="images/12_th.jpg" /></a></li>
                <li><a href="images/13.jpg" id="12"><img src="images/13_th.jpg" /></a></li>
                <li><a href="images/14.jpg" id="13"><img src="images/14_th.jpg" /></a></li>
                <li><a href="images/15.jpg" id="14"><img src="images/15_th.jpg" /></a></li>
              </ul>
            </div>
        
         <a class="arrow right">&rarr;</a>
        </div><!-- #thumbWrap-->
        
        
      </section>  
      
      
      <script src="js/imagesLoaded.js"></script>
      
      <script src="js/test.js"></script>
      
      
    </body>
    
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I don't see any jump now in Firefox or chrome. Where do you see a jump?

    There isn't actually anywhere for the thumbnails to jump because the image is holding the space open which is what the image attributes do. The browsers allocates the space in the image attributes so even while the image is loading the space will be held open.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see a jump between each large image loading - the spinning loader comes on and the thumbnails jump to the top of the page.

    Once the images have loaded it stops but if the cache is cleared and the images are loading first time there is a definite jump.

    I'm using Mac - Chrome, Safari and Firefox.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi.

    I checked on a mac and I can see its jumping in Chrome on the Mac but Firefox seems to be ok.

    It's probably because your script is hiding the image rather than just setting it to visibility:hidden and letting it take space up on the page.

    You could try adding a duplicate image just to hold the page open if you can't change the script.

    e.g.
    Code:
     <div id="imgWrap" style="position:relative">    
          <div id="bigImg">
            <img src="http://www.ttmt.org.uk/gallery-4/images/01.jpg" alt="" width="915" height="600" />
          </div>
    <img style="position:absolute;top:0;left:0" src="http://www.ttmt.org.uk/gallery-4/images/01.jpg" alt="" width="915" height="600" />
        </div><!-- #imgWrap -->
    Inline styles for example only but you should use a class if it works.

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the problem - I was hiding the image in the javascript until it loaded then fading it in

    I thought hiding it would just hide it and not remove it.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post
    I found the problem - I was hiding the image in the javascript until it loaded then fading it in
    .
    Yes that's what I said

    It's probably because your script is hiding the image rather than just setting it to visibility:hidden and letting it take space up on the page.

    Glad you got it working anyway.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •