Create photo gallery (no mysql or widget)

A

Anonymous

Guest
I have images for properties already loaded on my server in specific folders for each property.
I'm trying to find out if it's possible, just using PHP, to create a gallery to display the images (all known set sizes) with next/previous arrows/chevrons.
I'd like to set the image order to display and image text (not from camera) such as: Living Room, Bedroom, Bathroom.
The gallery code could sit in each required folder but would mean multiple entries of the same code or code be called by an include() with a gallery variable to identify which property image folder is required.

Most of what I found so far reference images stored in a database or using some third party tool and an upload process so if it is possible to achieve using just PHP any direction to a starting point would be greatly appreciated.
 
I found this but was hoping for something more dynamic that could automatically pick up the image files from a designated folder:

https://www.w3schools.com/howto/howto_js_slideshow.asp
 
Yes it's possible, it will require some planning to make life easy for yourself.

Assuming you already have the property selection process sorted, I suggest that you read the folder contents and code your filenames to provide information required, e.g. 'din-1', 'liv-1', 'bed_1-1' etc.. so for these they would translate as Dinning Room, image 1; Living Room, image 1; Bedroom 1, image 1.

By reading the folder, it will auto update by just uploading or removing images, how you want to tackle captions in another matter and will require some discipline, you could for instance have an include file which contains all or one of the captions as you can keep the filenames separate just by using the filename extension.

So it is all down to the planning stage really as there are several ways of tackling this.
 
OK I've looked at things like scandir() but I don't think I really need this as I already know where the images are located.
From day 1 I've stored images under a key system so we know 'bth_.' = bathroom, 'bed_..' = bedroom, lr_.. = living room etc. So we can derive an image caption from a single file referenced by an include().

I looked at some code just to display images in a folder while developing. It works but would be nicer to define image types rather than looping for each image extension.
Code: 
<?php
//from https://www.phpweb.info/php/get-list-images-folder-using-php
$images = preg_grep('/\.(jpg|jpeg|png|gif)(?:[\?\#].*)?$/i', $files);

/*if ($handle = opendir('/var/www/project/foldername')) { */
if ($handle = opendir('../gallery')) {
 
    while (false !== ($entry = readdir($handle))) {
        $files[] = $entry;
    }
    $images = preg_grep('/\.jpg$/i', $files);
 
    foreach($images as $image)
    {
      echo $image.'<br/>'; // List all Images
    }
	$images = preg_grep('/\.gif$/i', $files); //added by me but also need jpeg/png
 
    foreach($images as $image)
    {
      echo $image.'<br/>'; // List all Images
    }
    closedir($handle);
}
echo '<br><br>';
?>

So I'm ready to plan. I mocked up something from w3schools but it's static although the look and feel is quite nice.
Code: 
<?php // https://www.w3schools.com/howto/howto_js_slideshow.asp ?>

<!DOCTYPE html>
<html>
<head>
<title>w3schools: slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
/*  max-width: 1000px;*/
  max-width: 600px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>


 
<div class="slideshow-container">

  
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>

    <img src="img1.JPG" style="width:600px">
    <div class="text">Property ID: ORLGR4H009</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>

    <img src="img2.JPG" style="width:600px">
    <div class="text">Pool and Spa</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>

    <img src="img3.JPG" style="width:600px">
    <div class="text">Bedroom</div>
  </div>

  
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>


<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div> 

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>
 
So I've implemented your response. The extension is case sensitive.
Code: 
<?php
echo '20200129-02: from php forum<br>';

define('IMAGEPATH', '../gallery/');
foreach(glob(IMAGEPATH.'*.JPG') as $filename){ //extension is case sensitive.
	echo basename($filename) . '<br>';
}
foreach(glob(IMAGEPATH.'*.gif') as $filename){ //extension is case sensitive.
	echo basename($filename) . '<br>';
}
echo '<br><br>';
?>
Is there a method to display multiple image types like in this preg_grep() example which list all the image types and is not case sensitive?
Code: 
$images = preg_grep('/\.(jpg|jpeg|png|gif)$/i', $files);
Like this works with only one foreach()
Code: 
<?php
$images = preg_grep('/\.(jpg|jpeg|png|gif)(?:[\?\#].*)?$/i', $files);
if ($handle = opendir('../gallery')) {
    while (false !== ($entry = readdir($handle))) {
        $files[] = $entry;
    }
    $images = preg_grep('/\.(jpg|jpeg|png|gif)$/i', $files);
    foreach($images as $image)
    {
      echo $image.'<br/>'; // List all Images
    }
    closedir($handle);
}
?>
 
this seems to work fine.
Code: 
foreach(glob(IMAGEPATH."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE) as $filename){
	echo basename($filename) . '<br>';
}
 
OK making progress but stuck on a function to display a sub-division name (where property is located). Might just be fatigue.

No matter where in the images directory path I run this code $sub_div_abb is always: GR

image path directory structure:
..training/gallery/....my test images
..training/gallery/glenbrook_resort/....my images
..training/gallery/high_grove/....my images

Code: 
<?php
	//Function to define sub division abbreviation text:
	function sub_div_text(){
		global $sub_div_abb;
		if ($sub_div = 'glenbrook_resort') {
			$sub_div_abb = 'GR';
		} else if ($sub_div = 'high_grove') {
			$sub_div_abb = 'HG';
		} else if ($sub_div = 'gallery') {
			$sub_div_abb = 'GALLERY';
		}
		else $sub_div_abb = 'NOTGR';
		return $sub_div_abb;
	}
?>

<?php 
	//Function to identify the property sub-division from directory path characters using preg_match():
	function pid_text() {
		global $pid_text;
		sub_div_text();
		global $sub_div_abb;
		echo 'function pid_text()<br>';
		$property_text = 'Property ID: '; //deliberate space before closing comment.
		$psc = 'ORL'; //Property System Code.
		$str = getcwd();
		$sub_div = 'gallery';
		echo $sub_div . '<br>';
		echo 'Looking for ' . $sub_div . ' in ' . $str . ' using preg_match()';
		echo '<br>';		
		// The i at the end of regular expression changes regular expression to be case-insensitive, if not required it can be left out.
		if(preg_match("/{$sub_div}/i", $str)) {
			echo $sub_div .  ' / true and strtoupper(): ' . strtoupper($sub_div);
			echo '<br>';
			//$sub_div_abb value always returns 'GR' regardless to directory path.
			$psc = $psc . $sub_div_abb . strtoupper(basename(__DIR__)); //sub_div_abb already defined in UPPERCASE.
			$pid_text = $property_text . $psc; //strtoupper($psc);
			echo $pid_text;
		} else {
			echo $sub_div . ' does not exist in the cwd().';
		}
		echo '<br>';
		return $pid_text;
	}
	pid_text(); // call the function.

?>
 
Whenever $sub_div in function pid_text() is set to one of the values in function sub_div_text()

Using '=' always returns the first 'if($sub_div =' value.
Using '==' always returns the 'else $sub_div_abb = 'text'.

This is regardless to the path as that doesn't form part of this function.

$sub_div will always be defined and will always be a known value. Each will be allocated a $sub_div_abb code. This is manual as two sub-divisions may well have the same name but be in entirely different geographic locations so identifying from the path may result in an incorrect $sub_div_abb being displayed.

Should I be looking at switch and case for this functionality?
 
I don't understand the first part of your post?

Should I be looking at switch and case for this functionality?
Click to expand...
Probably be the easiest way for you to do it.
 
OK that's what I've done and it works. I had the switch code and some script in the same include file which stumped me for a bit as the code wouldn't work if all placed at the start or all at the end of a page. It would be nice to get an explanation as to why so I don't try it again in the future:

This is the content of ctrl_gallery_body.php which runs at the start of gallery pages.
Code: 
<?php	
	echo '<br>';
	function sub_div_text() {
		global $sub_div;
		global $sub_div_abb;
		switch ($sub_div) {
			case "gallery":
				$sub_div_abb = 'GALLERY';
//				echo "fnt sub_div_text(): Your selected sub_div is : " . $sub_div_abb;
				break;
			case "glenbrook_resort":
				$sub_div_abb = 'GR';
//				echo "fnt sub_div_text(): Your selected sub_div is : " . $sub_div_abb;
				break;
			case "high_grove":
				$sub_div_abb = 'HG';
//				echo "fnt sub_div_text(): Your selected sub_div is : " . $sub_div_abb;
				break;
			default:
				$sub_div_abb = 'NotInFunction';
//				echo "fnt sub_div_text(): Your selected sub_div is not listed: " . $sub_div_abb;
		}
		return $sub_div;
		return $sub_div_abb;
	}
?>

This is the content of ctrl_gallery_script.php which runs at the end of gallery pages. Images are set manually:
Code: 
<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

So this is the latest version of one of the gallery pages:
Code: 
<?php
	// $sub_div and $sub_div_abb defined as global in incleded file.
	include ($_SERVER['DOCUMENT_ROOT'] . '/training/gallery/ctrl_gallery_body.php');
?>

<?php 	
	//Function to identify the property sub-division from directory path characters using preg_match():
	function pid_text() {
		global $sub_div;					//  ) All MUST BE
		global $sub_div_abb;				//  }   inside         
		global $pid_text;					//  )  function!
		echo 'Start: function pid_text()<br>';
		echo '$sub_div value set as parameter in function: ' . $sub_div . '<br>';
		echo 'echo\'s from the the called function sub_div_text(): <br>';
		sub_div_text(); // located in include file.
		echo 'The $sub_div_abb value for: ' . $sub_div . '  = ' . $sub_div_abb . '<br>';
		$property_text = 'Property ID: '; //deliberate space before closing comment.
		$psc = 'ORL'; //Property System Code.
		echo $property_text . $psc . '<br>';
		$str = getcwd();
		echo 'Looking for ' . $sub_div . ' in ' . $str . ' using preg_match()<br>';	
		// The i at the end of regular expression changes regular expression to be case-insensitive, if not required it can be left out.
		if(preg_match("/{$sub_div}/i", $str)) {
			echo $sub_div .  ' / true and strtoupper(): ' . strtoupper($sub_div) . '<br>'; //Not required for $pid_text.
			$psc = $psc . $sub_div_abb . strtoupper(basename(__DIR__)); //sub_div_abb already defined in UPPERCASE.
			$pid_text = $property_text . $psc; //strtoupper($psc);
		/* Not required as will only be run from folder with known images.
		} else {
			echo $sub_div . ' does not exist in the cwd().';
		*/
		}
		return $pid_text;					//Return value AFTER IF statement.
	}
	//echo 'call the function: sub_div_text($sub_div = \'glenbrook_resort\'):<br>';
	pid_text($sub_div = 'glenbrook_resort');					// Set the $sub_div value and call the function.
	echo $pid_text . '<br>';
?>

<?php
	//get cwd().
	echo 'getcwd(): ' . getcwd() . '<br>';
?>

<div align="center">
    <?php
		// Count the total number of image files in the folder:
		//define('IMAGEPATH', '../foldername/'); //make this dynamic from current server folder.
		// basename(__DIR__) will not work for counter as path is required.
		define('IMAGEPATH', dirname(__FILE__).'/');		// '/' is required.
//		$str_dname = dirname(__FILE__) . '/';
//		echo '<br>$str_dname: ' . $str_dname;
		
		$img_total = 0;
		foreach(glob(IMAGEPATH."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE) as $filename){
		$img_total ++;
		}		
	?>

    <?php		
		/* Use $pid_text and $psc that have already been defined.
		// Convert directory folder to UPPERCASE for image text descriptions:
		$str_FOLDERNAME = basename(__DIR__);
		$str_FOLDERNAME = strtoupper($str_FOLDERNAME);
//		echo '<br>basename(__DIR__) converted to UPPERCASE: ' . $str_FOLDERNAME;
		$pid = 'Property ID: ORL' . $sub_div_abb . $str_FOLDERNAME; //Property ID text.
		echo '<br>' . $pid . '<br>';
		*/
		echo '<br>' . $pid_text . '<br>';
		echo 'code test point: line: ' . __LINE__ . '<br>';
	?>
</div>


<div class="slideshow-container">
    <?php
		//start the image counter control:
		$img_counter = 0;
		
		// Image extension may NOT be case sensitive!!!
		$img_height = 'height: 400px'; // defailt image height for gallery.
		$img_width = 'width: 600px'; // defailt image width for gallery.
	?>

    
    <div class="mySlides fade">
        <div class="numbertext">
            <?php
				$img_counter ++;
				echo $img_counter . ' / ' . $img_total;
			?>
        </div>
		<?php
			echo '<img src="ext_front.jpg" style="' .  $img_width . '">';
		?>
        <div class="text">
			<?php
				// Using function pid_text() for image text:
				echo $pid_text;
			?>
        </div>
    </div>
    
    <div class="mySlides fade">
        <div class="numbertext">
            <?php
				$img_counter ++;
				echo $img_counter . ' / ' . $img_total;
			?>
        </div>
        <?php
			echo '<img src="ext_rear.jpg" style="' .  $img_width . '">';
		?>
        <div class="text">Exterior rear</div>
    </div>
    
    // Currently manually repeated for all images as required.
         
      
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
      
</div>

<div>
    <?php
		  $img_counter_last = $img_counter;
		  echo 'The last image counter value is: ' . $img_counter_last;
		  echo '<br>The total number of image files in the folder is: ' . $img_total;
	  ?>
</div>
<?php
	// Script include needs to be run at end of page including it.
	include ($_SERVER['DOCUMENT_ROOT'] . '/training/gallery/ctrl_gallery_script.php');
?>

So to make this a dynamic feature I now need to identify all the images names from the current folder and reference them to a file to get their required image text name. It would be useful if the reference files could also determine the display sort order.

Example (basic idea):
Code: 
function GetImageNames(){
  global $pid_text; //from gallery calling page.
  global $img_sort_order;
  $image_sort_order = 0;
  $image_name = $pid_text; //default image name.
  For each $imagename as $img_name (){
    if (imagename == 'ext_front') {
        $image_name = $pid_text;
        $img_sort_order ++
    } else if (imagename == 'ext_rear') {
      $image_name = 'Exterior Rear';
      $img_sort_order ++
    } else if (imagename == 'rm_living') {
      $image_name = 'Living Room';
      $img_sort_order ++
    } else if (imagename == 'bed_m1') {
      $image_name = 'Master Bedroom One';
      $img_sort_order ++
      } else if (imagename == 'bth_m1') {
      $image_name = 'Master Bathroom One';
      $img_sort_order ++
    } else if (imagename == 'bed_m2') {
      $image_name = 'Master Bedroom Two';
      $img_sort_order ++
    } else if (imagename == 'bth_m2') {
      $image_name = 'Master Bathroom Two';
      $img_sort_order ++
    }
    return $img_name, $img_sort_order;
  }
}

Or should the image name text and sort orders be defined in a switch code. Bear in mind for image name I am looking to see if the image name contains certain characters rather then being an exact match, = / ==?
 
This is turning into spaghetti code.

The use of global variables is considered bad practice, the correct use functions will mean that you do not need to use them.
Code: 
<?php
function sub_div_abb($sub_div) {

switch ($sub_div) {
	case "gallery":
		return 'GALLERY';
		break; // breaks are not needed if you return the value as that will break out of the function
	case "glenbrook_resort":
		return 'GR';
	case "high_grove":
		return = 'HG';
}
//	default:
return 'NotInFunction';

//return $sub_div;
//return $sub_div_abb; this line would not have executed as the script would have already returned
}

# and to execute it

$abb = sub_div_abb('glenbrook_resort');

It's important that you understand what's going on in this function, instead of passing $sub_div as a global variable, you are passing it as a parameter to the function. By passing the value as global variable, you run the risk of it being changed inadvertantly by code such as
Code: 
if ($sub_div = "gallery")
which is the problem you had before.
 
OK I had a version working but your example is far neater. With the global setting it's back to an original query of parameters/arguments I guess.

So this is my working version for the abbreviated sub-division characters. It's located in an include() and works fine.:
Code: 
<?php
	# Funtion to define the sub-division abbreviated characters:
	function sub_div_abb($sub_div) {
		switch ($sub_div) {
			case "test_subdiv":
				return 'TESTSUBDIV';
				//break; // breaks are not needed if you return the value as that will break out of the function
			case "glenbrook_resort":
				return 'GR';
			case "high_grove":
				return 'HG';
			case "gallery":
				return 'GALLERY';
		}
		//	default:
		return 'NotInFunction';
	}
?>

This is the code i'm working on just to get a better understanding of how various code works. There's a lot of commenting and echoes for my benefit. The issue I'm having is that I cannot see $pid_text later in the coding without setting $pid_text as global. I tried putting $pid_text in pid_text(), if only it was that simple!

Code: 
<?php
	# Function to identify the property sub-division from directory path characters using preg_match()
	# and create a Property ID Text:
 	function pid_text($sub_div) {		//Need parameter/s in function():
	       
		global $pid_text;					//  Need to code without global setting!
		
		echo 'Start: function pid_text()<br>';
		echo '$sub_div value set as parameter in function: ' . $sub_div . '<br>';
		echo 'echo\'s from the the called function sub_div_text(): <br>';
		$sub_div_abb = sub_div_abb($sub_div); //20200220 code
		echo 'The $sub_div_abb value for: ' . $sub_div . '  = ' . $sub_div_abb . '<br>';
//		$property_text = 'Property ID: '; //deliberate space before closing comment.
		$psc = 'ORL'; // Start of Property System Code.
		echo constant("PROPERTY_TEXT") . $psc . '<br>';
		$str = getcwd();
		echo 'Looking for ' . $sub_div . ' in ' . $str . ' using preg_match()<br>';		
		// The i at the end of regular expression changes regular expression to be case-insensitive, if not required it can be left out.
		if(preg_match("/{$sub_div}/i", $str)) {
			echo $sub_div .  ' / true and strtoupper(): ' . strtoupper($sub_div);
			echo '<br>';
			echo '$sub_div_abb = ' . $sub_div_abb;
			echo '<br>';
			$psc = $psc . $sub_div_abb . strtoupper(basename(__DIR__)); //sub_div_abb may already defined in UPPERCASE.
			$pid_text = constant("PROPERTY_TEXT") . $psc; //strtoupper($psc);
			echo $pid_text . ' May not be correct as include() may not be in cwd().'; //Output is what's expected here.
		}
		return $pid_text;					//Return value AFTER IF statement. IS THIS WORKING WITHOUT global?
	}
	
	echo 'getcwd(): ' . getcwd() . '<br>';
	pid_text($sub_div = 'test_subdiv'); // call the function.
?>

Then when this code is run later $pid_text displays when set as a global in the function but not when I remove it:
Code: 
<div class="mySlides fade">
        <?php
			$img_style = 'style="' .  $img_width . '"'; // only needs to be set once here.
        ?>
        <div class="numbertext">
            <?php
				$img_counter ++;
				echo $img_counter . ' / ' . $img_total;
			?>
        </div>
		<?php
			$img_src = "ext_front.jpg";
//			$img_style = 'style="' .  $img_width . '"'; // only needs to be set once here.
			echo '<img src="' . $img_src . '" ' . $img_style . '>';
			$img_name = pathinfo($img_src, PATHINFO_FILENAME);
		?>
        <div class="text">
			<?php
				// Using function pid_text() for image text on this one only to test:
				echo $pid_text . ' / ' . $img_name; //$pid_text doesn't display if not set as a global in function pid_text($sub_div)
			?>
        </div>
    </div>
 
You're calling the function without recieving the return value:
Code: 
pid_text($sub_div = 'test_subdiv');

A function does not need to return a value, and you do not need to set the calling instruction to receive a value, but there's no point returning a value if you do not need it, so in answer to your question - you should do this:
Code: 
$pid_text=pid_text($sub_div = 'test_subdiv');
No global required.
 
I removed the global and tried that. I didn't get any value back. As there was already $pid_text in the code I changed the example to this:
Code: 
$pid_text1 = pid_text($sub_div = 'test_subdiv');
echo '<br>This is $pid_text1: ' . $pid_text1;  //no content for $pid_text1 returned
But still no content.
 
You'll run into problems if you duplicate variable names or make slight alterations to it, if you already had a value for $pid_text and made it global, then changed the value in a function, you would change the value of it from the calling script.

You can do this:
Code: 
echo pid_text($sub_div = 'test_subdiv');
rather than assign it to a variable to output it later.
Code: 
echo pid_text($sub_div). ' / ' . $img_name;
 
Don't code when tired. I was using pid_test instead of pid_text in my test code :( All is working fine.

I now have the image labels being set from an include file:
Code: 
	function img_label($img_name) {
		switch ($img_name) {
			case stristr($img_name, "bed_1"):
				return 'Bedroom 1';
			case stristr($img_name, "bed_m1"):
				return 'Master Bedroom 1';
			case stristr($img_name, "bth_2"):
				return 'Bathroom 2';
			case stristr($img_name, "and plenty more examples"):
				return 'more examples';
		}
		//	default:
		return 'No image label set!';
	}
With the manual setting of image sources as displayed earlier in this query the image display and the image labels are correct.
I'm now trying to dynamically display the images but just getting the 'No image label set' text as no images are displaying.
Code: 
<?php
	function get_images(){
		foreach(glob(IMAGEPATH."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE) as $imagename){
			echo '<div class="mySlides fade">';
				echo '<div class="numbertext">';
					$img_counter ++;
					echo $img_counter . ' / ' . $img_total;
				echo '</div>';
				$img_src = $imagename;
				echo '<img src="' . $img_src . '" ' . $img_style . '>';	
				echo '<div class="text">';
					echo $pid_text . '<br>' . img_label($img_name=$img_src);
				echo '</div>';
			echo '</div>';
		}
	}
?>


<div class="slideshow-container">
    <?php
		$img_style = 'style="' .  $img_width . '"'; // only needs to be set once here.
		
		get_images(); // call the function to get all the images in the current folder.
     ?>
     
      
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
      
</div>
Am I heading in the right direction or on the wrong path?
 
I have updated the code to now automatically create the gallery based on the images found in the folder the code is being run from. All this works fine but the order is whatever the order is they are found in the folder.
Code: 
<div class="property_text-container">
	<?php echo 'Gallery for ' . $pid_text; ?>
</div>


<div class="slideshow-container">
<?php
	define('IMAGEPATH_15', dirname(__FILE__).'/'); // '/' is required.
	$img_height = 'height: 400px'; // default image height for gallery.
	$img_width = 'width: 600px'; // default image width for gallery.
	$img_counter_15 = 0;
	$img_style_15 = 'style="' .  $img_width . '"'; // only needs to be set once here.
	
	$img_total_15 = 0;
	// Calculate total number of images before displaying <div>
	// If calculated inside foreach() $img_counter always equaks $img_total.
	$myVar = count(glob(IMAGEPATH_15."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE)); 
	$img_total_15 = $myVar;
	
	/* //Alternate way of calculating number of images:
	foreach(glob(IMAGEPATH_15."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE) as $var){
		$img_total_15 ++; // Calculate total number of images before displaying <div>.
	} */
		
	foreach(glob(IMAGEPATH_15."*.{jpg,png,gif,JPG,PNG,GIF}", GLOB_BRACE) as $filename_15){
		// $img_total_15 ++; // Needs to be calculated outside foreach().
		$img_name_15 = pathinfo($filename_15, PATHINFO_FILENAME);
		$img_src_15 = basename($filename_15);
		
		echo '<div class="mySlides fade">';
			echo '<div class="numbertext">';
			$img_counter_15 ++;
			echo $img_counter_15 . ' / ' . $img_total_15;
			echo '</div>';
			
			//$img_src = "ext_front.jpg";
			// echo '<img src="' . $img_src . '" ' . $img_style . '>';
			echo '<img src="' . $img_src_15 . '" ' . $img_style_15 . '>'; // May need backlash before closing chevron.
			
			echo '<div class="text">';
				echo $pid_text . '<br>' . img_label($img_name=$img_src_15);
			echo '</div>';
		echo '</div>';
	}
?>

    
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>  

</div>
<br>

<div class="dot-container">
    
    <div style="text-align:center">
        <?php
			$slide_counter = 0;
			while ($slide_counter < $img_total_15) {
				$slide_counter ++;
				echo '<span class="dot" onclick="currentSlide(' . $slide_counter . ')"></span> ';
			}
		?>
    </div> 
</div>
Is there a way of setting a specific sort order depending on the opening sequence of characters of the image name?

Example:
ext_f: displays all front of property
ext_r: displays all rear of property
ext_p: displays pool/spa
rm_l: living room
rm_d: dining room
etc

I already have the elements in $filename.
 
You must log in or register to reply here.
Back
Top