Johannes Botéus Johannes Botéus - 1 month ago 6
Javascript Question

How to display images in fullscreen from an already called image from mysql with JavaScript?

I want to be able to view the pictures I display out of my MySQL as a full screen picture with JavaScript and without refreshing the page. How can I grab that dynamically inserted picture and give it a class which is unique so not every picture get loaded when clicked? I just can't get my head around how to do so :/

This is the code which I came up with but I want like I said to be able to display the pictures which get display here in full screen when someone clicks on them. The code below is a gallery where only the pictures of the logg in user are being displayed.

<?php
$mysqlHost='localhost';
$mysqlUser='user123';
$mysqlPassword='mypassword';
$mysqlDatabase ='mydb';

$mysqli = NEW MySQLi($mysqlHost, $mysqlUser, $mysqlPassword, $mysqlDatabase);

$resultSet = $mysqli->query("SELECT pictureID FROM styles WHERE userID ='$userID'");

if($resultSet->num_rows != 0){
while($rows = $resultSet->fetch_assoc())
{
$pictureID = $rows['pictureID'];
echo '<div class="sBox"><img class="sImg" src="userarchive/' . $userID.'/pictures/mystyles/'.$pictureID.'.jpg" /></div>';
}
}
?>

Answer

The question is probably too broad for Stack Overflow, since it requires JavaScript but does not feature any JavaScript in the question, and thus any answers would need for someone to write the whole thing. Nevertheless, here are some pointers that may help you. I recommend you tackle them in order.

  1. You are not using database parameter binding at present, and you may be susceptible to SQL injection. MySQLi does support this - just look up "mysqli prepare" to find examples in the manual.
  2. Your username/password query is definitely vulnerable, and can be bypassed by a moderately skilled attacker.
  3. Passwords should never be stored in plain text - this makes your users vulnerable to password re-use attacks on their other internet accounts.
  4. I suggest using AJAX to fetch images belonging to the user, so when you click previous/next, an HTTP request is used to get an image name to inject into your <img>. This is one viable approach.
  5. However, it looks like you are rendering all images to the screen belonging to the user. Instead of using AJAX you could hide all of these using JavaScript and unhide on depending on the current image (so if you have arrow controls, on each click, hide one and unhide the next/previous one).

It may be worth giving these things a go - feel free to update your question as you make progress.