Question

it’s easier to explain with a schematic

I have main div, which contains another (gray) div inside, and several divs for video thumbs (which are clickable for full-sizer videos).
What I want is to make a button (white arrow on the scheme) that changes the div with thumbs (they are marked with frame) to next “page” – another div with another set of thumbs, tho allowing visitor to browse through several pages with more then 8 thumbs.

Big picture at the top is featured video, it shouldn’t change (so if think I can put it atop of everything, not inside the gray div, because it should be replaced with another div with different thumbs set when you click on the button)

I’m not a coder, just making my first steps in html/css and a bit of java, so any help will be appreciated.

Thanks in advance!

Answer 1

I did something similar yesterday with a twitter feed to achieve this:

HTML:

<div class="twitterMask">
   <div class="twitterNav" data-id="+"></div>
   <div class="twitterNav twitterNavNext" data-id="-"></div>
   <div id="jsTwitter">
      <div class="tweet">single slide (in your example, this should contain 8 images)</div>
      <div class="tweet">single slide (in your example, this should contain the next 8 images)</div>
      <div class="tweet">single slide (in your example, this should contain another 8 images)</div>
      <div class="tweet">etc etc</div>
   </div>
</div>

CSS:

.twitterMask{width:185px; height:122px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #fff; padding: 10px; position: relative; overflow:hidden}
.twitterArrow{position: relative; background: url(../images/twitterBirdArrow.png); width:93px; height:69px; left: 109px;}

#jsTwitter{width: 780px; height: 150px; overflow: hidden; position: relative; }
#jsTwitter .tweet{overflow: hidden; position: relative; float: left; font-size: 14px; width:185px; height:122px; margin-right: 10px; color: #000; text-align: right; font-style: italic; font-family: Times;}
#jsTwitter .tweet .time{position: absolute; height: 18px; bottom:0; right: 13px; font-size: 12px;}

.twitterMask .twitterNav{position: absolute; background: url(../images/twitterArrows.png); width:10px; height:19px; display: block; z-index: 9; bottom: 8px; left: 10px; cursor: pointer}
.twitterMask .twitterNavNext{background:url(../images/twitterArrows.png) -172px 0px; right: 10px !important; left:auto}
.twitterMask .twitterNav[data-id='+']{display: none}

jQuery

$('.twitterNav').click(function(){
    var maxLeft = 0-parseInt($('#jsTwitter').width() - $('.tweet').width() - parseInt($('.tweet').css('margin-right').replace("px","")));
    $('#jsTwitter').animate({
        left: $(this).attr('data-id')+'='+($('.tweet').width()+parseInt($('.tweet').css('margin-right').replace("px",""))),
      }, 100, function() {
        var currentLeft = $('#jsTwitter').css('left');
        currentLeft = parseInt(currentLeft.replace("px",""));
        if (currentLeft <= maxLeft){
            $(".twitterNav[data-id='-']:visible").hide();
        } else {
            $(".twitterNav[data-id='-']:hidden").show();
        }
        if (currentLeft >= 0){
            $(".twitterNav[data-id='+']:visible").hide();
        } else {
            $(".twitterNav[data-id='+']:hidden").show();
        }
      });
})

Obviously, you would have to tailor the CSS to fit your template. Should be pretty straight forward though.