I'd like to get this random background image coding to work: http://css-tricks.com/snippets/php/randomize-background-image/
I've double checked file names, paths, all the code and the instructions. I think there's something I don't understand.
You can see the page here:
http://agentboris.com/newwebsite/index.html
Thanks for your help.
Your file at http://agentboris.com/newwebsite/index.html is in .html, it should be in .php for you be able to use php code from tutorial.
Try with this simple code (don't forget to save your index file as php extension):
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<!DOCTYPE html>
<html>
<head>
<title>Tests purposes</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<body>
</body>
</html>
Related
On my main page website, I have 6 tiles and I would like to change the background on the hover effect. I found PHP script below but something is not working properly
In my index.php file below tag, U put below code
<?php
$bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
and in my CSS file, I use the below code
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
}
Do I miss something?
That css code does not work in css file.
because there is some php code in there.
so if you want to run it, you must use css code in the php/html file.
example.php:
<html>
<head>
...
<style>
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
}
</style>
</head>
<body>
so your index.php page could be like this:
<html>
<head>
<?php
$bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<style>
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
}
</style>
</head>
<body>
This code will show you a new background image whenever you refresh the page.
If you want to show a new image in every hover without needing to refresh the page, so you have to either use javascript code or javascript + ajax(for fetch new images as live).
EDITED:
for that purpose first build a page named rmdimage.php
<?php
$bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
echo $selectedBg;
and you index.php file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").hover(function(){
$.get("[path-to-php-folder]/rmdimage.php", function(data, status){
$("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").css('background', 'url(images/bg/' + data +') no-repeat;');
//alert("Data: " + data + "\nStatus: " + status);
});
});
</script>
</head>
<body>
<div class="my-element" style="width:100px; height:100px;">this is my fav element!</div>
you must change [path-to-php-folder] to relation rmdimage.php file.
in the rndimage.php file you can dynamically moderate image array ($bg)
you can fetch them from mysql or a folder , ...
I am building a site on Magento2 platform.
I need to add images for painting done by Artists for sale.
what is required is that in addition to image being uploaded, I want to add 2-3 pre-defined background images to the painting.
for example - Dining Room, Living Room.
I am able to change background image on per page load(randomly) using this code.
<head>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<?php
$bg = array('SET_A_01_Living.jpg', 'SET_A_02_Bed.jpg', 'SET_A_03_Study.jpg', 'SET_A_04_Dining.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
but how I add the background to the image and in Magento Gallery, I am not able to make out.
some guidance/hint on this will help me achieve, what I am trying to do.
you have to write php above the head tag like below :-
<?php
$bg = array('SET_A_01_Living.jpg', 'SET_A_02_Bed.jpg', 'SET_A_03_Study.jpg', 'SET_A_04_Dining.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>
<head>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
I want my website to have a random background every time it is refreshed, but after someone logs in, I want this background to stay the same the rest of the session. I have found the following code for the random background:
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg', 'bg-08.jpg', 'bg-09.jpg', 'bg-10.jpg', 'bg-11.jpg', 'bg-12.jpg', 'bg-13.jpg');
$n = mt_rand(0, count($bg)-1);
$selectedBg = "$bg[$n]";
?>
For your interest: this is how I made sure the selected bg was truly the background of the page (this is put in the <head> section):
<style type="text/css">
body{
background: url(../afbeeldingen/<?php echo $selectedBg; ?>) ; background-size: 100%; background-attachment: fixed;
}
</style>
This works fine. but now I want to put the output in a session. At first i thought this would work:
$_SESSION['background']= "$selectedBg";
This does put a random number in a session but that number is not the same as outputted with the mt_rand before. I have also been struggling with the following JavaScript
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 100) + 1;
</script>
but I could not match the output to $bg array presented before.
I am still a beginner in PHP.
Do it like this,
session_start();
if(!isset($_SESSION['logged_in'])){
$selectedBg = "bg-".rand(1, 13).".jpg";
$_SESSION['background'] = $selectedBg;
echo $_SESSION['background'];
}else{
echo $_SESSION['background'];
}
When the guest is here, they will get a new background and you can use rand() function rather than the array you have, it will help you,
And second you check if the user is logged in you give them the last background they got, if not, change the background.
I hope this helps you,
I've created a simple PHP script which reads .txt files (1.txt, 2.txt etc which each contain dummy text: "Test~Test test test test test test") and produces a html output of each file's content with a little html formatting.
<html>
<head>
<style type="text/css">
body {background-color: #80B2FF; font-family: arial,sans-serif;}
.content {background-color: #ffffff; margin: 35px auto; max-width: 75%; padding: 35px;}
</style>
</head>
<body>
<?php
for ($number = 3; $number>=1; $number--){
$article = $number.".txt";
$data = file_get_contents($article); //read the file
$convert = explode("~", $data); //create array separate by new line
echo '<div class="content">'.$convert[0].'<br/><br/>'; //write value by index 0
echo $convert[1].'<br/><br/>'.'</div>'; //write value by index 0
}
?>
</body>
</html>
This currently works just fine. The problem is that if I was to create the file 4.txt, I would have to hard code the $number variable to 4.
I have tried to automatically initialise $number to the highest number.txt. I need help creating a loop which would use the file_exists() function to test if a file x.txt exists, if it does then increment x and test again. If it doesn't exist, the loop should instead break out and hence I could just say $number=x.
I hope this explanation is clear enough, thank you for your time.
Use glob(), your method is pretty bad:
http://php.net/glob or http://www.w3schools.com/Php/func_filesystem_glob.asp
What you want to do is $arr = glob("*.txt"); and then loop through that array.
Am trying to set the path for an image to be changed according to a php variable that gets determined by reading a cookie for window.innerWidth ( which is set in the head of the file)
The problem is that the cookie is not being read correctly on the first render by the browser, i have to refresh the browser x 2 to get the correct image.
Could anybody point me in the right direction please ? is there a method in php to get the cookie to always be read correctly the first time - at present it looks like it is being cached, or something like that.
Thank you
Example here : http://markaprice.co.uk/2012dev/r-img-set/image-test-ht.php
html below:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>document.cookie = "device_dimensions=" + window.innerWidth;</script>
<link rel="stylesheet" type="text/css" href="css/img-styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<?php require_once('deliver-images.php'); ?>
<img class="ri" src="<?php echo $imgPath ?>the-landscape.jpg" alt="the landscape">
<img class="ri" src="<?php echo $imgPath ?>the-landscape-b.jpg" alt="the landscape">
php script(deliver-images.php) is below:
<?php
$device_width = 0;
$imgPath='';
// Read the device viewport dimensions
if (isset($_COOKIE['device_dimensions'])) {
$device_width = $_COOKIE['device_dimensions'];
echo($device_width);
}
if ($device_width > 0) {
// Low resolution image
if ($device_width <= 480) {
$imgPath = 'images/mobile/';
}
// Medium resolution image
else if ($device_width <= 1024 && $device_width > 480) {
$imgPath = 'images/tablet/';
}
else {
$imgPath = 'images/desktop/';
}
} else {
$imgPath = 'images/desktop/';
}
?>
This following line of yours sets the cookie.
<script>document.cookie = "device_dimensions=" + window.innerWidth;</script>
And this php file is where you check this cookie to make the decision about from which folder you are going to serve images.
<?php require_once('deliver-images.php'); ?>
Looking at your code it seems like you are thinking it that way.
First your script tag run and cookie got set
And then your PHP who use that cookie set in previous step to do some precessing
But that's wrong PHP is processed first on the server and then that page is sent to browser and your script runs.
Conclusion : First time when you open the page your cookies were not set because the script will run after the php code runs.