콘텐츠를 가로로 표시 하시겠습니까?

Question

한 페이지 웹 사이트를 만들고 포트폴리오 섹션에서 프로젝트와 함께 일부 콘텐츠 (예 : 4 개의 미리보기 이미지)를 가져올 것이며 각각 하나의 fancybox를 사용하여 html 콘텐츠를 표시합니다.

두 개의 화살표를 사용하여 각면에서 앞뒤로 이동하면 포트폴리오 내용이 더 많이 표시되지만 어떻게 작성해야할지 모르겠습니다. 이는 포트폴리오 웹 사이트에 실제로 나타나는 공통적 인 영향이며, 콘텐츠가 변경되면 전환이 뒤 따른다.

Answer 1

그냥 빨리 면책 조항을 내용 :

을 수평 페이드로드를 체크 아웃 않습니다 ...하지만이 확실히 거기에 가장 완벽한 솔루션이 아닙니다. 나는 당신과 비슷한 문제에 대해 처음부터 생각해 낸 빠른 해결책이었습니다. 여러 가지 방법 중 하나 일뿐입니다.

이

도 여기에 기능을 기반으로하지만, 꽤 아래로 손질되었습니다
https://www.facebook.com/Bio35/app_201742856511228

자바 스크립트 (이전이의 헤더에 jQuery를해야합니다)

$(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() {}); 
    }); 
}); 

을

JQuery와에

<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> 

1,363,210, "scripts/item-loader.php"은 기본적으로 HTML에서 <!-- display format goes here -->과 같은 형식을 반영하는 AJAX 파일입니다. 단순히 product의 POST 값을 가져오고, 자바 스크립트 끝으로 AJAX 호출에 사용되며, 선택한 항목에 대한 정보를 출력합니다.

코드가 충분히 자신있게 말하면 좋겠다. 설명이 필요하면 알려주세요.

Answer 2

모든 디스플레이 요소를 하나의 div에 넣고 div을 다른 div 안에 넣습니다. div 바깥 쪽은 원하는대로 크기를 조정해야하며 스타일은 overflow: hidden이어야합니다. position: relative을 내부 div에 놓고 외부 div의 너비만큼 왼쪽 또는 오른쪽으로 움직입니다 (움직입니다).

Answer 3

지연로드와 같은 플러그인을 사용할 수 있습니까?

Lazy Load Jquery

그것은 또는 당신이 회전 목마처럼 뭔가를 찾고 있다면 것은 These examples