페이스 북과 같은 앨범 뷰어 ​​만들기

Question

페이스 북과 같은 앨범 뷰어를 만드는 중입니다.

나는 "설정"을 만들었습니다. 사진을 볼 수 있으며, 어떤 앨범이 들어 있는지, 이제는 "다음" "이전"버튼이 작동하도록하고 싶습니다.

나는 현재를보고있는 동안 미리로드를 사용하는 것을 보았고, 나는 그런 것을 성취하고자한다.

그러나 우선, 어떻게 "다음"을 만들 수 있습니까? "다음"작업을 수행하는 절차는 무엇입니까?

이 코드는 어떻게 코딩해야합니까? 그러면 어떤 그림이 다음에 있는지 알 수 있습니까? 날짜 (날짜순)에서 정렬하고 싶으므로 다음 날짜가 현재 날짜보다 나중이어야하고 이전 날짜는 현재 날짜보다 이전이어야합니다.

내 데이터베이스는 다음과 같습니다

album 
id uID title 

album_photos 
id aID uID photo date 

원조 앨범 (앨범 ID)의 ID를 보유하고, UID는 사용자 (아이디)의 ID를 보유하고 있습니다.

나는 또한 자바 스크립트를 사용하고 싶다. 전체 페이지를 새로 고치는 대신 AJAX 요청을하십시오.

그래서 제 질문은 :

내가 어떻게 자바 스크립트가 생겼는 날짜 DESC 후 작동하게하려는 경우 다음/이전 버튼을 만드는 절차는 무엇입니까? file.php에 대한 ajax 요청은 데이터베이스에서 최신 이미지를 가져온 다음 성공하면 현재 사진을 대체하고 표시합니다. adressbar는 페이 스북 (Facebook)에서 새로운 사진을로드하는 것과 정렬됩니다.

당신이 날짜 DESC하여 사진을 분류하고 있고 다음을 수행 현재 사진의 날짜를 가지고 있다면이 만드는 절차

모든 잘 설명 대답, 대답

Answer 1

을 받아 들일 것입니다 :

• 것은 찾으려면 다음 사진 : 날짜 DESC로 사진을 주문하고 날짜가 현재 사진의 날짜보다 작은 첫 번째 사진을 선택하십시오. 첫 번째 파일 만 가져옵니다.
• 이전 사진 찾기 : 날짜 ASC로 사진을 주문하고 현재 사진의 날짜보다 큰 첫 번째 사진을 선택하십시오. 첫 번째 파일 만 가져옵니다.

직접 SQL 문을 구성하십시오.

Answer 2

여기는 ajax (다음/이전)를 사용하여 데이터베이스의 이미지를로드합니다. 가이드와 프리 로더 (여기에는 http://www.preloaders.net/)도 포함됩니다. 궁금한 점이 있으면 알려주세요.

여기 있습니다. 이 3 개 파일

1. index.php를 ... 표시 페이지
2. 이미지
3. show.php에 대한 ajax.php ... 읽기 데이터베이스 ...로드 이미지

단지 호스트, 사용자, 비밀번호를 ajax에 & databasename으로 설정하는 것을 잊지 마십시오.PHP

사본 & 다음을 붙여 넣습니다
1 index.php를

<?php 
include("ajax.php"); 
?> 



<script type="text/javascript" src="JQUERY/jquery.js"></script> 
<script> 
var ID = "<?php echo $id; ?>"; 
var inc = ID + 1; 
var dec = ID; 
var totalpages = "<?php echo $totalpages + 1; ?>"; 

$(function(){ 
    $('.loader').hide(); 

    <!-- np = next & prev button functions --> 
    $('.np').click(function() { 

     if($(this).attr('id') == "next") { 

      $(this).attr('push', inc++); 
      if($(this).attr('push')<totalpages) {    
       $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false }); 
       $('.loader').show();    
       dec = inc - 2; 
       $('#images').hide(); 
      } 
     } 


     else if($(this).attr('id') == "prev") { 

      $(this).attr('push', dec--);   
      if($(this).attr('push')>-1) { 

       $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false }); 
       $('.loader').show(); 
       inc = dec + 2; 
       $('#images').hide(); 
      } 
     } 



    }); 
}); 

<!-- this function is called after ajax send its request --> 
function AjaxFunc(return_value) { 
    $('#images').html(return_value); 
    $('.loader').hide(); 
    $('#images').show(); 
} 

</script> 

<div id="images"> 

    <!-- loads default numbers of images. whats inside here will change once you click next or prev --> 
    <?php 
     for($i=$id * $limit; $i<$limit + $id * $limit; $i++) { 
      echo $imagearray[$i]."<br/>"; 
     } 
    ?> 
</div> 


<!-- next & previous buttons --> 
<a class="np" id="prev" push="<?php echo $id; ?>" href="#">Prev</a> 
<a class="np" id="next" push="<?php echo $id + 1; ?>" href="#">Next</a> 


<!-- preloader. hidden on start. will show while images load --> 
<img class="loader" src="http://www.preloaders.net/generator.php?image=75&speed=5&fore_color=000000&back_color=FFFFFF&size=64x64&transparency=0&reverse=0&orig_colors=0&uncacher=26.066433149389923"/> 

2 ajax.php

<?php 

//id is tjhe page number. it is 0 by default. while clicking next/prev, this will not change. set it like this: file?id=0 
$id = $_GET['id']; 

//connect to the databsae 
$host="localhost"; 
$user = "username"; 
$password = ""; 
$database = "database_name"; 
$connect = mysql_connect($host, $user, $password) or die("MySQL Connection Failed"); 
mysql_select_db($database) or die ("Database Connection Fail"); 

//set your the limit of images to be displayed 
$limit = 5; 

//push images into array 
$q = mysql_query("SELECT * FROM image_table"); 
$num = mysql_num_rows($q); 
while($r = mysql_fetch_array($q)) { 
    $imagearray[] = "<img src='" 
        .$r['IMAGE_URL'] 
        ."'/>"; 
} 

//will determine total number of pages based on the limit you set 
$totalpages = ceil($num/$limit) - 1; 
?> 

3. show.php

<?php 
include("ajax.php"); 
for($i=$id * $limit; $i<$limit + $id * $limit; $i++) { 
    echo $imagearray[$i]."<br/>"; 
} 
?>