JQuery, PHP 및 MySQL을 사용하여 링크를 클릭 할 때 이미지를 표시하는 방법은 무엇입니까?

Question

회원은 기본적으로 10 개의 이미지를 표시하지만 링크는 사용자가 링크를 클릭 할 때 슬라이드 다운하여 나머지 사용자 이미지를 표시합니다.

내 질문은 기본적으로 사용자가 링크를 클릭하면 아래로 미끄러 져야하는 모든 사용자 이미지 구매를 표시 할 수 있기를 원합니다. <a>. JQuery, PHP & MySQL을 사용하여이 문제를 어떻게 해결할 수 있습니까?

Answer 1

확인이 플러그인은 당신이 무엇을 요구 아니지만, 그것의 (IMO) 더 나은 솔루션

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

BTW : 그것은 당신의 이미지에 저장하는 방법에 의존하기 때문에 PHP와 MySQL은 그 질문에 임의로 서버

Answer 2

이렇게 처리 할 것입니다.

<script> 
$(document).ready(function() { 
    $(".more").toggle(
     function() { 
      $(this).text('less'); 
      $(this).parent().children(".bottom_images").slideDown("fast"); 
        return false; 
     }, 
     function() { 
      $(this).text('more'); 
      $(this).parent().children(".bottom_images").slideUp("fast"); 
        return false; 
    }); 
}); 
</script> 
<style> 
.bottom_images { 
    display: none; 
} 
</style> 
<div class="container"> 
    <div class="top_images"> 
    <?php 
    //num images to originally display 
    $num_show=10; 
    //current position 
    $i=1; 

    //some code to get user images 
    //from database etc 
    foreach($images as $image_url) { 
     if($i==10) { 
      echo '</div><div class="bottom_images">'; 
     } 
     echo '<img src="'.$image_url.'" />'; 
     $i++; 
    } 
    ?> 
    </div> 
    <a href="#" class="more">more</a> 
</div> 

분명히 이미지를 얻을 수있는 여러 가지 방법이 있으므로 사용자 이미지를 검색하기위한 의사 코드가 있습니다. 데이터베이스 (블롭 또는 텍스트 URL), 파일 시스템 스캔, 사용자 입력 등. 또한 여러 페이지 (여러 사용자)를 한 페이지에 추가 할 수 있도록 만들었습니다.

Answer 3

다양한 측면에 따라 어떻게해야할까요? Yanick Rochon에 의해 제공

• 당신은 LazyLoading을 사용할 수 있습니다
당신은 모든 이미지를 미리로드와
가 클릭하면 간단하게 숨겨진 열을 표시 할 수 있습니다
• . 눈에 보이지 않는 이미지가 너무

이 문제를 설명 링크를 클릭 한 후이를 즉시 보여주기 위해 미리로드 - 먼저 눈에 보이는 이미지를로드하고로드하고 결국 수 AJAX

를 사용

또한로드 할 수 있습니다 추가 이미지 조금 더 깊은.