2010-01-07 2 views
0

대학 웹 사이트의 이미지 갤러리를 업그레이드하고 있습니다 (어느 정도는 표준을 준수해야합니다). 대부분의 갤러리는 많은 HTML 페이지입니다. 나는 jQuery 플러그인 인 Galleriffic과 내가 작성한 PHP 코드를 사용하여 멋진 페이지 매김 화랑을 생성했으며 지금까지는 멋지다. 나는 두 가지 문제가있다.큰 JQuery 이미지 갤러리를로드하는 솔루션

첫 번째 문제는 JS가 활성화되어 있어도로드하는 데 시간이 걸리는 것입니다. 내가 JS에 대해 이해 한 것부터 JS를 조작하기 위해서는 모든 요소가 JS 용 DOM에로드되어야하기 때문에 JS가 실행되기 전에 미리보기 이미지가 모두 페이지에로드되어야한다. 모든 축소판이 로딩되는 것을 방지하기 위해 무엇인가 할 수 있는가? 그것은 갤러리의 각 페이지에 하나를로드합니까? 이렇게하면로드 시간이 각 페이지에 분산됩니다.

두 번째 문제는 자바 스크립트가 사용 중지 된 경우 400 개 이상의 미리보기 이미지가 모두 페이지에로드되어야한다는 것입니다. 이것은 예상되는 동작이며 작은 갤러리에서는 잘 작동하지만 큰 갤러리에서는 잘 작동하지 않습니다. PHP로 페이지 매기기를 할 수 있습니까?하지만 JS (페이지가 활성화되어있는 경우)를 사용하여 페이지 매김을 막을 수 있습니까?

저는 JS에 능숙하지 않아서 완전히 인식하지 못한 해결책이 있었으면 좋겠다고 생각했습니다. 그리고 완전히 개편하지 않아도 구현할 수 있습니다. 그것은 당신의 경우에 의미가 있습니다 브레인 스토밍 제안의

+0

감사를 표시하는 PHP/jQuery를 사용하는 방법을 몇 가지 아이디어를 제공 HTML

// Retrieve and list images jQuery.post("wp-content/imageGallery/gallery.php", { id: itemID, page: pagenr }, function(data){ jQuery('#galleryContainer').html(data); // Here you can add other jQuery functions to interact with images }, "html"); 

희망입니다. 플러그인에서 수행하는 페이징을 비활성화하고 PHP에서 페이징을 수행하기로 결정했습니다. 이렇게하면 자바 스크립트가 없어도 페이징을 얻을 수 있습니다. 정말 플러그인의 기능을 감소 시키지만, 가장 합리적인 해결책으로 보입니다. –

답변

1

글쎄, 먼저 갤러리를로드하는 PHP 페이지를 만들 수 있습니다. 25 이미지를 한 번에. 페이지 번호 매기기 단추를 클릭하면 페이지가 다시로드되고 다음 25 개의 이미지가 표시됩니다.

꽤 간단합니다. JS/jQuery가 필요하지 않습니다.

그러면 JS 스크립트를 추가 할 수 있습니다. 예. 사용할 갤러리를 선택하는 드롭 다운 목록이 있습니다. jQuery에서 selectbox.change에 리스너를 추가했습니다.

OnChange, 나는 jQiery.post를 수행하고 같은 페이지를 다시로드하여 이제 다음 25 개의 이미지를 얻습니다. jQuery.post에서 HTML로 반환 한 목록 결과 (이미지 목록).

그럼 jQuery ('# gallery')라고 말하면됩니다 .html (data); 여기

내 gallery.php 파일에 내 코드의 일부입니다

// If Type is set to e.g. 'jquery', then we know tis page load is from a jQuery request. 
    if ((isset($_POST['type'])) && (isset($_POST['page']))) 
    { 
     //This is a jQuery request 
     $jQueryReq = 1; 
     $page   = $_POST['page']; 
    } 


<?php if($jQueryReq == 0) { ?> 
    Default html oupthere when there is no jquery request 
<?php } else if($jQueryReq == 1) { ?> 
    Here you put the code that gets the images and displays them on the page  
<?php }?> 

을 그리고 여기 의사 jQuery 코드입니다.게시물의 반환 형식을 주목하는 것은이 당신에게 당신이 이미지 갤러리에게 제안

+0

그래서 사용자에게 jQuery 갤러리를 선택할지 말지를 선택할 수있는 옵션을 제공합니다 ... 사용중인 플러그인을 포기하면이 경로를 사용할 수 있습니다. 그것은 나를 위해 페이지 매김을 수행하므로, PHP로 처리한다면 그것을 처리 할 방법을 찾아야 할 것입니다. –

+0

내 솔루션에서 사용자는 갤러리를 사용하려면 자바 스크립트를 사용해야합니다. 그러나 javascript를 지원하지 않는 장치를 사용하는 사용자 그룹을 위해 개발하는 경우 두 가지 모두를 수용해야합니다. 그러나 모든 주요 브라우저는 현재 자바 스크립트를 지원합니다. – Steven

+0

공립 대학으로서, 우리는 403c 표준을 준수해야하며, 이는 우리에게 비 JS 브라우저는 물론 IE6도 지원한다는 것을 의미합니다. 그것은 약간의 번거 로움이지만, 누군가 그것을해야합니다. –

1

비트 ...

결과의 첫 페이지를 포함하는 (PHP를 사용하여) 원래의 마크 업을 작성합니다. 이 방법을 사용하면 문서가 완성되고 JS가 적당한 시간 내에 시작될 수 있어야합니다.

페이지가 완전히로드 된 상태에서 jQuery - $ .ajax()를 사용하여 문제의 크기에 따라 필요에 따라 새로운 페이지를 모두 얻을 수 있습니다. 이것을 위해 엔지니어가되고 싶습니다.

다음으로주의하십시오. gallerific 플러그인을 올바르게 호출하는 데 방해가 될 수 있습니다. 나는 그것에 익숙하지 않고, 나는 확실히 말할 수 없다. 그렇다면 갤러리를 시작하기 전에 추가 이미지를로드하는 과정을 완료해야 할 수도 있습니다.