Clash Royale CLAN TAG#URR8PPP

Server side gallery inside an ad (php, js?, ajax)

I have some pictures in a folder and their paths in a database. I want to make a photo gallery with those images (with previous and next buttons) without reloading the page.

Here is the AJAX function (if you have any idea of doing this without AJAX I would be grateful):

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();



Here is the php for next image:

<?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;
?>


And here is the part of the html where the image is:

<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 ?>)">❯</a>
<a class="prev_img" onclick="prev_img(<?php echo $row['id_anunt'] ?> , <?php echo $img_id ?> )">❮</a>


Well, the problem is that when I press the next button it gives me the next image but...that's all. I can't figure it out how and where to increment the current image id in order to be able to go through all the images.

I also have to find a way to jump from the last photo to the first one when pressing "next" and from the first to the last one when pressing "previous".
The pictures are inside a sales announcement and there are another next and prev buttons for changing the announcement .. so the set of images changes too. If you could give a hint about doing this without reloading the page, I would also be grateful. Hope you'll understand my problem

Here's how it actually looks:

1 Answer
1

one possible solution would be to load all image paths with ajax (once the page has finished loading) instead of one by one each in a single request. once you got all the image paths in, for example, json format you can build your logic in your javascript environment. for example, incrementing on right click, decrementing on left click and jumping to the first index if you've reached the last one or the opposite site arround.

another possible solution, without ajax, is to actually output all images with php into the gallery and once the page finished loading you bind your logic for the gallery to css classes, for example "show" and "hide" - here is an example implementation with this approach.

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);




the setInterval function is just a bonus to switch the actual image every 2000 milliseconds.

response to comment:

$all_imgs_data holds an associative array with all the images from user with id 1

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


so just loop through it like

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

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

<?php

?>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.