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 , ...
Related
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'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>
I am making a website that has two background images, one of them is always the same i.e.:
background-image: url("../images/centre-image.jpg");
and the other is generated via php to show a background image at random:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.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
?>
<img src="images/background-images/<?php echo $selectedBg; ?>" class="bg">
Making the first background the full size of the DIV no matter what size of the screen was easy enough:
div.centre-options {
background-size: 100% auto;
}
however if I try to add similar CSS to the random generated image it doesn't work (just shows it at its full jpg size and then repeats) and not sure show to solve the problem.
As far as i can tell the image generated isn't set as a background but as a image to display, therefore you can't apply background styling to it.
There is 2 things you can do either apply styling directly to the image tag i.e.
img.bg{
width:100%;
height:100%;
}
or alternatively create an element and add the generated image to it's styling
would look somthing like this:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.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.bg{
background-image: url("images/background-images/<?php echo $selectedBg; ?>");
background-size: 100% auto;
}
</style>
<div class="bg"></div>
Preferable put the styling between the head tags
I have this code which I am using to display random images. But the images show up at the top left corner of the site. I want to be able to position the image as I wish. What are the changes I have to do in the code order to the above mentioned.
Here's the code--
/*
* Name your images 1.jpg, 2.jpg etc.
*
* Add this line to your page where you want the images to * appear: <?php include"randomimage.php"; ?>
*/
// Change this to the total number of images in the folder
$total = "2";
// Change to the type of files to use eg. .jpg or .gif
$file_type = ".jpg";
// Change to the location of the folder containing the images
$image_folder = "sample.url.com";
// You do not need to edit below this line
$start = "1";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";
?>
Thanks in advance
This would be a CSS solution, PHP can't position images. With CSS you can position things in many different ways:
Using margins (e.g., margin: top right bottom left;)
Using paddings (e.g., padding: top right bottom left;)
Using floats (e.g., float: right or left;)
Using positions (e.g., position: absolute or relative; and then using top/left and bottom/right to position).
For example, you can center your image to the middle of the page using margins. Add this to the top of your page:
<style type="text/css"> /*Initializing CSS code*/
img { margin: 0 auto; }
</style>
Or you can float the image to the far right of your page using a float, assuming the parent object has a width of 100%:
<style type="text/css"> /*Initializing CSS code*/
img { float: right; }
</style>
Or using an absolute position to position it at the bottom right:
<style type="text/css"> /*Initializing CSS code*/
img {
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
You may want to read a CSS tutorial to learn the differences between all the positioning techniques and when to use them and where + little hacks, annoyances and incidents that come when you use each of them.
http://www.google.com/search?q=css+tutorial
You need to modify your html code.
In your case you need to change value of this string:
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";
Like this:
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ style=\"Your css style goes here\"/>";
Please learn some of the basics before asking on Stack Overflow.
http://www.w3.org/Style/CSS/learning.en.html css guides.
While the CSS answers are good, not every project will need or want CSS. This alternative solution, given your code, works just fine within the PHP tags:
(I had to put a space after the first < or it wouldn't display properly on this page. Just remove that space from each line to make it work)
Align Right:
< right>
< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";
< /right>
Align Center:
< center>
< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";
< /center>
Align Left:
< left>
< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";
< /left>
This is technically an HTML solution, but since it works within PHP tags you can use this to effectively position anything you like.