Question

I am building a one-page website and for the Portfolio section I will be having some content(e.g 4 thumbnails) with projects, and each one will display html content using fancybox.

So I want to have two arrows, on each side going back and forth that will display more of the portfolio content but I am not sure how I should build this? It is a really common effect on portfolio websites, and is followed by a transition when the content changes.

Answer 1

Just a quick disclaimer… but this is certainly not the most seamless solution out there. It was just a quick solution I came up with from scratch for a problem similar to yours. Just one of the many ways to do it.

This is also based on the functionality here, but has been trimmed down quite a bit:
https://www.facebook.com/Bio35/app_201742856511228

Javascript (will need jQuery in the headers prior to this)

$(document).ready(function() {
$.ajaxSetup ({
    cache: false
});

var loadUrl = "scripts/item-loader.php";

page = 1;
total_pages = /* total number of pages, calculated dynamically or otherwise */;
prev_arow = "#left_arrow";
next_arow = "#right_arrow";

$(prev_arow).hide();
$(".hide").hide();

    $(prev_arow).click(function() {
        prev_page = page - 1;
        $("#wrapper"+page).fadeOut("normal", function() {
            $("#wrapper"+prev_page).fadeIn("slow");
        });
        if(prev_page == 1) { $(this).hide(); }
        if(page == total_pages) { $(next_arow).show(); }
        page--;
    });
    $(next_arow).click(function() {
        next_page = page + 1;
        $("#wrapper"+page).fadeOut("normal", function() {
            $("#wrapper"+next_page).fadeIn("slow");
        });
        if(page == 1) { $(prev_arow).show(); }
        if(next_page == total_pages) { $(next_arow).hide(); }
        page++;
    });

    $("#thumbs div div").click(function() {
        var my_id = $(this).attr('id');
        $("#product_wrapper").load(loadUrl, {product: my_id}, function() {});
    });
});

HTML

<div id="product_wrapper">
<!-- display format goes here -->
</div>

<div id="bottom_wrapper">
    <div id="left_arrow">
    </div>
    <div id="thumbs">
        <div id="wrapper1">
            <div id="p1"><!-- thumbnail --></div>
            <div id="p2"><!-- thumbnail --></div>
            <div id="p3"><!-- thumbnail --></div>
        </div>
        <div id="wrapper2" class="hide">
            <div id="p4"><!-- thumbnail --></div>
            <div id="p5"><!-- thumbnail --></div>
            <div id="p6"><!-- thumbnail --></div>
        </div>
        <div id="wrapper3" class="hide">
            <div id="p7"><!-- thumbnail --></div>
            <div id="p8"><!-- thumbnail --></div>
            <div id="p9"><!-- thumbnail --></div>
        </div>
    </div>
    <div id="right_arrow">
    </div>
</div>

In the jQuery, "scripts/item-loader.php" is basically the AJAX file that reflects the same format as <!-- display format goes here --> from the HTML. It simply retrieves the POST value of product, used in the AJAX call toward the end of the Javascript, and spits out the information for the selected item.

Hopefully the code speaks for itself enough. If you need clarification, let me know.