PHP : Jquery를 사용하여 다음 이미지 가져 오기

Question

DB의 모든 이미지를 반복하여 축소판으로 표시하는 만화 웹 사이트가 있습니다. 사용자는 viewComic.php 템플릿에서 이미지 중 하나를 클릭하여 정상 크기로 볼 수 있습니다.

사용자가 왼쪽 및 오른쪽 화살표를 눌러 이미지를 탐색 할 수있게하고 싶습니다.

그래서, 내 생각은 :

1. pagination.php 데이터베이스 결과 배열을 통해 반복에 의해 (상쇄에 의한) 올바른 페이지에 이미지 표시를 처리합니다. 사용자는 결과 (아래)를 클릭하여 viewcomic.php 템플릿의 해당 특정 이미지로 이동할 수 있습니다.

   '<br />IMG: <a href="./templates/viewcomic.php?id=' . $row['imgid'] . '&image=' . $imgpath.$row['imgname'] . '"> 
   

2. 지금 viewcomic.php에, 나는 ID와 이미지를 얻을, 이미지

   $imgid = $_GET['id']; 
   $imgpath = $_GET['image']; 
   <center><img src=".<?php echo $imgpath ?>" /></center> 
   

왼쪽 키를 누릅니다 수있는 사용자와 이미지를 탐색하기 위해 오른쪽 화살표를 표시 ... 내 목표는 어떻게 든 다음 이미지로 이동합니다 이미지 ID를 증가했다,하지만 ... 작동하지 않는 것

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(document).keydown(function (e) { 
       if (e.which == 39) { //get next image   
       <?php 
        $count = 0; 
        $count++; 
        echo "<img src=" . $imageArray[$count] . "/>"; 
       ?> 
       } 
      }); 
     }); 
    </script> 

,

아이디어가 있습니까?

편집 : pagination.php에서 전달 된 이미지 배열을 살펴 보겠습니다.

내 viewcomic.php 파일에서 jquery 스크립트 (위 참조)를 업데이트했습니다.하지만 jquery는 PHP 파일에 포함되어 있어도 포함 된 PHP를 좋아하지 않는 것 같습니다.

Answer 1

내가 무엇을 할 것이라고입니다

<center><img src="" id="theImage"/></center> 

Answer 2

에 대한 방법 : 페이지가 모든 요청에 ​​제출되어이 경우

$(document).ready(function() { 
$(document).keydown(function (e) { 
    if (e.which == 39) { 
     var nextId = $_GET['id'] + 1; 
     window.location = "./templates/viewcomic.php?id=" + nextId; 
    } 
}); 
}); 

Answer 3

것은, 당신은 또한 클라이언트에서이 문제를 처리 할 수 ​​있습니다 여기에

코드 대 페이지 소스의 사진입니다 대지.

JavaScript를 사용하여 회전 링크 데모를 보려면 링크를 클릭하십시오. :

echo $imageArray[0]; // 'imagepath/image' 

스크립트 :

<script type="text/javascript"> 
var imgArray = [<?php echo implode(',',$imageArray) ?>]; 
// now the image array have the list of all your images. 

$(document).ready(function() { 
    var img = document.getElementById("theImage"); 
    imgIndex = 0; 
    $(document).keydown(function (e) { 
     if (e.which == 39) { //get next image   
     img.src = imgArray[imgIndex++] 
     } 

     ... /* Logic to check if at the end of imageArray */ ... 
    }); 
}); 
</script> 

html로 :

는 ImagePath를 따옴표로 둘러싸여 있다고 가정 : Link Rotate using javascript 여기