Slide between frames using JQuery?

Question

I'm trying to build a site like http://justinouellette.com/. The only problem here is I'm confused with the code. I'd like to use JQuery instead of MooTools.

Can somebody here be an angel and write up a demo? I'd like to be able to switch between frames using hyperlinks. A frame would be a class.

Thanks!

Answer 1

As far as I understand your question, what you want is a Carousel, there's a great JQuery Plugin called JCarousel that you can use. Demo Here...

Answer 2

The jQuery plugin Cycle can do this if you specify elements (like the arrow images) for the next and prev option settings.

Someone else that asked a question recently was achieved a similar effect on their site (which you can see by following the link in their question) with EasySlider 1.7.

As far as occupying the entire window, you can see in Firebug that the sample site has bound a function to window.resize, refigure(), which sets the height and width of each frame to the size of the window. Translating that to jQuery should be possible - perhaps something like this:

$(document).ready(function() {
    $(window).resize(refigure());
});

and

function refigure() {
    $('.frame').height($(window).height);
    $('.frame').width($(window).width);
}

The original code's refigure method is setting the dimensions of several additional elements - I think to accommodate the particular requirements of that page and possibly the code module performing the transition animations.

Answer 3

This is the closest out-of-the-box Jquery plugin I can find that's close to your needs: Step Carousel Viewer v1.8

The details are on that page, here is what you might be interested (each frame/panel is a css class):

Sample Step Carousel HTML:

<div id="mygallery" class="stepcarousel">
  <div class="belt">

    <div class="panel">
      Panel 1 content here...
    </div>

    <div class="panel">
      Panel 2 content here...
    </div>

    <div class="panel">
      Panel 3 content here...
    </div>

  </div>
</div>

The tricky part is how to have each panel occupy the whole page while the stepping buttons float over them. More of a CSS issue I will say. Good luck!