/    Sign up×
Community /Pin to ProfileBookmark

Display different images on a same spot in site.

Copy linkTweet thisAlerts:
Apr 17.2017

I want to make a site where it will show one image to users at first. After clicking a button, it will display another image exactly on that same spot of previous image. The image displayed next cannot be the same with before so I dont think I can use ‘random’ function to call that next image. So, I plan somehow I want to make that site to show image with incrementing ID, like at first the site call the image I named Pic-1, then call image named Pic-2, Pic-3 and so on.

Thanks for any response.

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulApr 17.2017 — Hi and welcome to the site.

This cannot be done in HTML. As you want the changes to be click driven, you can use JavaScript (in the browser) or PHP (on the server) to increment the url of the image. Incidentally, it is the filename that would increment, not the ID of the HTML IMG tag.
Copy linkTweet thisAlerts:
@NogDogApr 17.2017 — If you want to keep it in the client (i.e. JavaScript), you might use a cookie to track which image number you're at, and then have the script increment it as it updates to the next image.
Copy linkTweet thisAlerts:
@syazanizulauthorApr 18.2017 — can you tell me more about how to use PHP to increment url thing. Maybe you could give me link so I could read. I really don't know where to go now. Thanks btw
Copy linkTweet thisAlerts:
@SempervivumApr 18.2017 — This question is asked frequently and googling for "random image php" you find answers, e. g. here:

http://stackoverflow.com/questions/1761252/how-to-get-random-image-from-directory-using-php
Copy linkTweet thisAlerts:
@SempervivumApr 18.2017 — PS: Didn't find a satisfying solution for your request, that an image should not be repeated, therefore I created my own one:
[CODE]<?php
//phpinfo();
error_reporting(E_ALL);
ini_set('display_errors', '1');
$images = glob("images/*jpg");
shuffle($images);
$image = $images[0];
if (isset($_COOKIE['currentimage'])) {
$lastimage = $_COOKIE['currentimage'];
//var_dump($lastimage);
while ($lastimage == $image) {
shuffle($images);
$image = $images[0];
}
}
setcookie('currentimage', $image);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<?php
echo '<img src="' . $image . '" />';
?>
</body>
</html>
[/CODE]Note that the PHP code on top has to remain the first in the file.
Copy linkTweet thisAlerts:
@SempervivumApr 18.2017 — Sorry, I didn't read your posting carefully: You want to change the image when a button is clicked, not on page load. This code does this:
[CODE] <img id="changeimg"/>
<button id="newimg">Click to get new image</button>
<script>
// Read jpg images from folder "images" on server
// and store them in variable "images"
var images = <?php echo json_encode(glob("images/*.jpg")); ?>;
function getRandomImg() {
var idx = Math.floor(Math.random() * images.length);
return images[idx];
}
function newImage() {
currentImage = getRandomImg();
lastImage = localStorage.getItem("currentimage");
console.log(lastImage, currentImage);
if (lastImage) {
while (lastImage == currentImage) {
currentImage = getRandomImg();
}
}
document.getElementById("changeimg").src = currentImage;
localStorage.setItem("currentimage", currentImage);
}
newImage();
document.getElementById("newimg").addEventListener("click", newImage);
</script>
[/CODE]
×

Success!

Help @syazanizul spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...