I am attempting to display my image's information dynamically within the data-caption attribute for fancybox3. It is quite long and I am unsure how change it so its not hideous. The specific problem is that when it grabs the information from the mysql database that may contain special characters, like ' or " the data-caption thinks it is being closed off when that is not what I would like.
I have tried separating the very long echo statement into multiple ones but that did not change anything. I tried to append strings for data-caption as such, " .$var ." and that has not worked. I have tried using mysqli_real_escape() during variable declarations and it does not change the functionality when trying to output the database information.
<table style="margin:1em auto;">
<?php
// require_once('DB_connection.php');
$j = 0;
while ($fetch_all_posts = mysqli_fetch_assoc($all_posts)) {
if ($j % 3 == 0) {
echo "<tr>";
}
$getUser = $fetch_all_posts['userName'];
$getPostID = $fetch_all_posts['postID'];
$getDateUploaded = $fetch_all_posts['dateUploaded'];
$getImg = $fetch_all_posts['img']; //dont really need
$getLocation = mysqli_real_escape_string($connection,$fetch_all_posts['location']);
$getCaption = mysqli_real_escape_string($connection,$fetch_all_posts['caption']);
$getImageMetadata = mysqli_real_escape_string($connection,$fetch_all_posts['imageMetadata']);
$getCameraGearPost = mysqli_real_escape_string($connection,$fetch_all_posts['cameraGearPost']);
$getPhotoEdit = mysqli_real_escape_string($connection,$fetch_all_posts['photoEdit']);
$getCopyright = mysqli_real_escape_string($connection,$fetch_all_posts['copyright']);
//grab user profile pic from user table
$sql_profilePic = "SELECT * FROM $dbtableUser WHERE userName = '$getUser' ";
$all_users = mysqli_query($connection, $sql_profilePic);
$fetch_all_users = mysqli_fetch_assoc($all_users);
//change data caption's userName link also incorrectly interprets ' " for datacaption
echo "<td><br/><br/><br/><br/><a data-fancybox='images' data-caption= '<h1><a href=Profile.php><img id=profpic src=$fetch_all_users[profilePic] height=auto width=100px> $getUser</a></h1> <br/> <h5>@$getLocation</h5> <hr/> <br/> <h5>$getCaption</h5> <br/> <h5>$getImageMetadata</h5> <br/> <h5>$getCameraGearPost</h5> <br/><h5>$getPhotoEdit<h5> <br/><br/><br/> <h6>PostID: $getPostID </h6> <br/>Copyrighted: $getCopyright <br/> $getDateUploaded <br/>' href ='$getImg'> <img id=postPics src='$getImg' alt='$getCaption'</a> </td>";
if ($j % 3 == 2) {
echo "</tr>";
}
$j++;
}
?>
</table>
I am expecting upon click of the image that it displays the data-caption appropriately with the special characters.
this link, https://ibb.co/QK3Nkfw , shows what the page looks like currently, the first image is the problem and I want it to be like the rest. Upon image click it should show data like this: https://ibb.co/qnTJYf3
