CODEWITHSUNDEEP
javascriptphpjqueryhtmlgallery
per källström
per källström

Reputation: 169

need a push in the right direction with js/php gallery

I'm trying to create an image gallery. Most of it is working as intended, however, the thing I want to change on this gallery is so that when I click on the next picture or previous picture, I want the thumbnails to show the next 8 pictures. At the moment it's showing the next picture

PHP code:

<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
    rsort($pics);
    foreach($pics as $pictures) {
        echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
    }
    echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">&#10094;</div></a>';
    echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">&#10095;</div></a>';
    echo '</div>';
    echo '<div class="thumbs_container">';
    foreach(array_slice($pics, 1) as $thumbs)
        if ($thumb++ < 8){
            echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
        }
    } else {
        echo "Sorry, no images to display!";
    }
    ?>

The code is showing 1 thumbnail which updates correctly, but I want 8 thumbnails at least..

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("Gallery");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 

var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);

function plusThumbs(t){
showThumbs(thumbIndex += t);
}

function showThumbs(t){
    var g;
    var getThumb = document.getElementsByClassName("thumbs");
    if (t > getThumb.length) {thumbIndex = 1}
    if (t < 1) {thumbIndex = getThumb.length};
    for (g = 0; g < getThumb.length; g++){
        getThumb[g].style.display = "none";
    }
getThumb[thumbIndex-1].style.display = "block";
}
}

Any ideas on how I achieve this?

Upvotes: 1

Views: 67

Answers (1)

Neckster
Neckster

Reputation: 96

I hope, I understood your idea and what you want to do. Anyway here is my advises. At first I would like to say, that building html tags using php is not even a good idea. It's always a better way to separate code, instead of making some kind of mix. So, I'll advice you to use your php script only to find all images and send an array of src to client side (in JSON format). When you get an array of src, you could make a gallery only using javascript or jQuery. With jQuery you could make a simple GET Ajax Request, in order to get an array of img's src. Then you could init your gallery.

The gallery you can make in this way: enter image description here

So you have an id an change it by clicking prev or next buttons. After clicking you regenerate the current image and thumbs container.

Here is the working example (jQuery):

<!DOCTYPE html>
<html>
<head>
	<title>Test App</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<div class="galery">
		<div class="image_wrapper">
			<button class="prev">Prev</button>
			<img src="" alt="curr_image" class="curr_image" />
			<button class="next">Next</button>
		</div>
		<div class="thumbs_wrapper"></div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			var fakeSrc = 
			['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11'];

			var cId = 0;

			var thumbs_wrapper = $('.thumbs_wrapper');
			var curr_image = $('.curr_image');
			var prev = $('.prev');
			var next = $('.next');
			var updateThumbs = function() {
				var max = ( (cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9;
				thumbs_wrapper.html('');

				for (var i = cId+1; i < max; ++i) {
					var img = document.createElement('img');
					img.className = 'thumb_image';
					var src = fakeSrc[i];
					img.alt = src;
					img.src = src;

					thumbs_wrapper.append(img);
				}
			}

			var setCurrImg = function() {
				curr_image.src = fakeSrc[cId];
				curr_image.prop('src', fakeSrc[cId]);
				curr_image.prop('alt', fakeSrc[cId]);
			}

			var updateGalery = function() {
				setCurrImg();
				updateThumbs();
			}

			prev.click(function() {
				--cId;
				if (cId < 0) cId = 0;
				updateGalery();
			});

			next.click(function() {
				++cId;
				if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1;
				updateGalery();
			});

			updateGalery();
		});
	</script>
</body>
</html>

Hope, that I've helped you to find the solution.

Upvotes: 1

Related Questions