广告中的服务器端库(php、js？、ajax)

6l7fqoea 于 2021-06-23 发布在 Mysql

关注(0)|答案(1)|浏览(256)

我在文件夹中有一些图片，在数据库中有它们的路径。我想用这些图片（上一页和下一页按钮）制作一个照片库，而不需要重新加载页面。
这里是ajax函数（如果您有任何没有ajax的想法，我将不胜感激）：

function next_img(id_add, curr_img_id){
    //alert(id_add + curr_img_id);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("recent_img").src = "<?php  echo "user_images/" . $row['Username'] . "/"?>" +this.responseText;
        }
    };
    xmlhttp.open("GET","gallerynext.php?add="+id_add + "&img="+curr_img_id,true);
    xmlhttp.send();
}

下面是下一张图片的php：

<?php
    include("inc/conectare_la_baza_de_date.php");

    $add_id = $_GET['add'];
    $img_id = $_GET['img'] + 1;
    $selectNextImgQuery = "SELECT * FROM imagini WHERE anunt_id='$add_id' AND img_id='$img_id'";
    $selectNextImgResult = mysqli_query($link, $selectNextImgQuery);
    $nextImg = mysqli_fetch_assoc($selectNextImgResult);
    $nextImgPath = $nextImg['img_path'];
    echo $nextImgPath;
?>

这是html中的图像部分：

<img id="recent_img" src=<?php echo $imgPath; ?> alt="image" />
<a class="next_img" onclick="next_img(<?php echo $row['id_anunt'] ?> , <?php echo $img_id ?>)">&#10095;</a>
<a class="prev_img" onclick="prev_img(<?php echo $row['id_anunt'] ?> , <?php echo $img_id ?> )">&#10094;</a>

好吧，问题是当我按下下一个按钮，它会给我下一个图像，但…仅此而已。我不知道如何以及在何处增加当前图像id以便能够浏览所有图像。
我还得想办法在按“下一步”时从最后一张照片跳到第一张照片，在按“上一张”时从第一张照片跳到最后一张照片。图片位于销售公告内，还有另一个“下一步”和“上一步”按钮用于更改公告。。所以这组图像也会改变。如果你能在不重新加载页面的情况下给我一个提示，我也会很感激的。希望你能理解我的问题
下面是它的实际外观：

mysql php ajax JavaScript Gallery

来源：https://stackoverflow.com/questions/51769386/server-side-gallery-inside-an-ad-php-js-ajax

1条答案

按热度按时间

wydwbb8l1#

一种可能的解决方案是使用ajax加载所有图像路径（一旦页面加载完毕），而不是在单个请求中逐个加载。一旦获得了所有图像路径，例如json格式，就可以在javascript环境中构建逻辑。例如，右键单击时递增，左键单击时递减，如果到达最后一个索引或周围的相反站点，则跳到第一个索引。
另一个可能的解决方案，没有ajax，是用php将所有图像实际输出到图库中，一旦页面加载完毕，就将图库的逻辑绑定到css类中，例如“show”和“hide”——下面是一个使用这种方法的示例实现。

window.onload = function(){
  var prevButton = document.querySelector('.prev');
  var nextButton = document.querySelector('.next');
  var galleryData = document.querySelectorAll('.gallery img');
  var imgCount = galleryData.length;
  var displayCount = 0;
  galleryData[0].setAttribute("class", "show");
  prevButton.addEventListener("click", function(_event){
    _event.preventDefault();
    displayCount--;
    if(displayCount == -1){
      displayCount = imgCount-1;
    }
    renderImages();
  });
  nextButton.addEventListener("click", function(_event){
    _event.preventDefault();
    displayCount++;
    if(displayCount == imgCount){
      displayCount = 0;
    }
    renderImages();
  });

  function renderImages(){
    for(i = 0; i < imgCount; i++){
      galleryData[i].setAttribute("class", "");
    }
    galleryData[displayCount].setAttribute("class", "show");
  }

  var myInterval = setInterval(function(){
    displayCount++;
    if(displayCount == imgCount){
      displayCount = 0;
    }
    renderImages();
  }, 2000);

}

setinterval函数只是每2000毫秒切换一次实际图像的额外功能。
评论回复：
$all\imgs\u data保存一个关联数组，其中包含来自id为1的用户的所有图像

$all_imgs = "SELECT * FROM imagini WHERE user_id = 1"
$result = mysqli_query($link, $all_imgs);
$all_imgs_data = mysqli_fetch_assoc($result);

所以像这样循环

<?php
foreach($all_imgs_data as $key => $value){
?>

<div id="gallery">
    <img src="<?php $value['something']; ?>" alt="cat">
</div>

<?php  
}
?>

赞(0）回复(0）举报 2021-06-23

我来回答

广告中的服务器端库(php、js？、ajax)

1条答案

相关问题

热门标签

最新问答