jquery - より多くのコンテンツを水平に表示しますか？

Question

私は1ページのWebサイトを構築しており、ポートフォリオセクションには、プロジェクトを含むいくつかのコンテンツ（たとえば、4つのサムネイル）があり、それぞれがfancyboxを使用してhtmlコンテンツを表示します。

ですから、ポートフォリオのコンテンツをより多く表示する2つの矢印を前後に配置したいのですが、これをどのように作成すればよいかわかりません。これはポートフォリオWebサイトで非常に一般的な影響であり、コンテンツが変更されると移行が続きます。

Answer 1

すべての表示要素を 1 つdivに配置し、それdivを別の 内に配置しdivます。アウターdivはお好みのサイズoverflow: hiddenで、スタイルに合わせてください。position: relativeインナーdivを着て、アウターの幅だけ左右に動かして（アニメートして）くださいdiv。

Answer 2

Lazy Load のようなプラグインを使用できますか?

遅延ロード Jquery

コンテンツの水平フェードロードを行います:)

または、カルーセルのようなものを探している場合は、これらの例をチェックしてください

Answer 3

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.