HebleV HebleV - 10 months ago 43
jQuery Question

Get Image name from full image path using PHP

I am trying to display an image with a caption and thumbnails. I am able to display the picture but I am finding difficult to display the image file name as caption. Kindly help me with your ideas. Below is my code.

$files = glob("images/Friends/*.*");
for ($i=0; $i<count($files); $i++)
$num = $files[$i];
echo '<div class="w3-content" style="max-width:800px;position:relative;padding-top:0px;">';
echo '<div class="w3-display-container mySlides">';
echo '<div class="col s12 m6 l12">';
echo '<div class="page4">';
echo '<img src="'.$num.'" height="750" width="780" alt="random image" class="responsive-img" >'."&nbsp;&nbsp;";
echo '</div>';
echo '</div>';
echo '<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>';
echo '<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>';
echo '</div>';
echo ' </div>';

var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex += n);
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";

Answer Source

To show caption set title attribute. And set name of image in tile attribute.

To get Image name from fullpath of Image use basename($num)

Please replace your php code with below.

echo '<img src="'.$num.'" height="750" width="780" alt="'.basename($num).'" title="'.basename($num).'" class="responsive-img" >'."&nbsp;&nbsp;"; 

To get filename without extension for every image place below code in loop. And place $filename variable where you want to display image name.

$filenamewithextension = basename($num);
$fileextenstion = pathinfo($filenamewithextension, PATHINFO_EXTENSION);
$filename = basename($num,$fileextenstion);
$filename = trim(preg_replace('/[0-9]+/', '', $filename));