Colorbox 및 ListView

Question

저는 JavaScript/jQuery에 비교적 익숙하며 ASP.NET에 6 개월 미만의 경험이 있습니다. ASP.NET w/SQL Server 응용 프로그램 용 colorbox 플러그인을 사용하여 문제가 발생했습니다.

지금 현재 개발중인 PhotoGallery에서 축소판 그림을 더 크게 표시하기 위해 colorbox를 사용하고 있습니다. 모두 잘 작동하는 것, 나는 컬러 박스 디스플레이에서 함께 사진을 그룹화 할 수 있습니다.

내 ListView에 페이징이 있다는 점을 제외하면 모든 것이 작동하므로 페이지 당 40 개의 이미지 만 표시됩니다. Colorbox는 현재 ListView 페이지에있는 사진 만 그룹화합니다. 바인딩 colorbox에 대한

<ItemTemplate> 
    <td id="Td2" runat="server" style="padding:10px"> 
     <a class='colorbox' href="/Photos/AllPhotos/<%#Eval("FileName") %>" 
      title="<strong><%# Eval("Title") %></strong> photo by: <%#Eval("Name") %>"> 
     <img src="/Photos/AllPhotos/Thumbnail/<%#Eval("FileName") %>" 
      title="<%# Eval("Title") %>" /></a> 
    </td> 
</ItemTemplate> 

자바 스크립트

.ASPX 페이지 ListView (꽤 있지만 작동하지 않음) :

function pageLoad() { 
    $("a.colorbox").colorbox({ 
     rel: "gal", 
     maxWidth: "100%", 
     maxHeight: "100%" 
    }) 
}; 

내가 싶습니다에 바인딩 된 모든 사진에 colorbox 바인딩을하는 것입니다 현재 페이지뿐만 아니라 ListView. 그래서 이상적으로 사용자는 우리 갤러리의 모든 사진을 통해 축소판 중 하나를 클릭하여 페이지를 넘길 수 있으며, colorbox를 닫을 필요는 없습니다 -> 다음 페이지로 이동 -> 다시 colorbox를여십시오.

ListView에있는 모든 사진에 colorbox를 쉽게 바인딩 할 수 있습니까? 몇 가지 "해킹"방법 (예 : 숨겨진 사진을 바인딩하여 표시된 사진으로 그룹화)을 생각할 수 있지만 작업하기 좋은 응용 프로그램을 개발하려고합니다.

promising으로 보이는 항목이 있지만 이전에 JSON/SQL을 사용 해본 적이 없으므로 이런 방식으로 학습 곡선을 작성해야합니다.

도움이 될만한 점은이 포럼을 직장에서 많이 사용하므로 조언을 구하는 첫 번째 장소였습니다.

일을 얻을 수 있지만, 아마로 잘 내가 기대했던대로 (내가 놓친 경우 죄송합니다, 이것은 내 첫 번째 게시물)

편집

그럼 내가 뭔가를 알아 냈어. 내가 한 일은 결국 표시되지 않은 모든 사진으로 채워진 두 번째 배열을 만들고 숨겨진 ListView에 바인딩 한 다음 숨겨진 사진을 표시된 사진과 그룹화하는 colorbox를 만드는 것입니다. 그것은 내가 원하는 바대로 깨끗하게 작동하지 않는 것처럼 보이기 때문에 더 나은 방법 (아직 있다면)이 열려 있지만, 지금은 만족하고 있습니다.

Answer 1

여기에 datatables을 사용하고 서버의 ListView에 모든 데이터를 바인딩하고 ListView에서 페이징을 사용하지 않고 클라이언트 측에서 더 원활한 페이징을 얻을 수 있습니다. 그래도 여전히 colorbox에서 작동합니다.

ListView의 LayoutTemplate을 설정하십시오. "datatable"클래스가있는 테이블이 필요하며 jQuery를 사용하여 테이블을 선택하는 몇 가지 방법 (여기에는 id를 "tblStuff"로 만들고 거기에 있는지 확인하기 위해 datatables에 대한 thead 및 tbody가 필요합니다. runat = "server"가 아님). 또한 Visual Studio에는 테이블을 다른 테이블 안에 중첩시키는 습관이 있기 때문에 디자인보기에서 LayoutTemplate을 만든 경우주의해야합니다.이제 스크립트에

<LayoutTemplate> 
    <table id="tblStuff" class="datatable"> 
     <thead><tr><th>...(Your <th> elements go here)...</tr></thead> 
     <tbody><tr ID="itemPlaceholder" runat="server"></tr></tbody> 
    </table> 
</LayoutTemplate> 

, 당신은이 작업을 수행 할 수 있습니다 모든 작업이 완료

$(document).ready(function() { 
    $('a.colorbox').colorbox({ 
     // just how you had it before. 
    }); 

    $('#tblStuff').dataTable({ 
     // here is where you'll want to set some of the many many options for datatables. 
     // See their documentation. 
    }); 
}); 

합니다. ItemTemplate을 변경하지 않고 유지할 수 있어야합니다.