I'm just a persistent beginner and I've met another obstacle in my way, so I hope that you'll help me one more time... :) I've got that HTML:
<div class='hold'><?php include 'image.php'; ?></div>
<div class='refresh'>Get new image</div>
And that PHP code:
<?php
$dir = 'images/';
$img = array();
if(is_dir($dir)) {
if($od = opendir($dir)) {
while(($file = readdir($od)) !== false) {
if(strtolower(strstr($file, '.'))==='.jpg') {
array_push($img, $file);
}
}
closedir($od);
}
}
$id = uniqid();
$smth = array_rand($img, 1);
echo '<img src=' . $dir.$img[$smth] . '?' . $id . ' width="200px" height="50px" />';
echo '<input type="hidden" value=' . $id . ' />';
?>
So now when I'm looking at my page I see in the <div class='hold'></div> my img from the folder images, and it's allright. BUT when I click on the <div class='refresh'></div> I obviously want to get another img from my folder, but I dunno how to accomplish that trick correctly.
I know that first answer will be USE AJAX, and I know that I can do something like
function loadGraphic() {
$('.hold').load('image.php');
};
loadGraphic();
and then $('.refresh').click(loadGraphic); but when I'm trying to do that in response from server I get TWO THINGS: image.php and, of course, something like car.jpg?573c4e010c7f6... But I very-very wanna get just ONE looking like
car.jpg?573c4e010c7f6
or
image.php?573c4e010c7f6 - I don't care...
So... I hope you've got my concept... maybe I'm asking for miracle - I dunno! Any, absolutely any help will be appreciated :)
Try it the following way:
JS function:
function loadGraphic() {
$.get("image.php", function(data) {
$(".hold").html(data);
});
};
Html:
<div class='refresh' onclick='loadGraphic()'>Get new image</div>
Related
I need to have a working remote IMG display using PHP, let's say like this:
<img src='$src' />
And I need to fetch the remote URL based on $id, where
<?php
$id = "brown_fox";
$url = "http://exampl.com/$id";
get_remote_img($url) {
// some code to get image which SRC is dynamic:
<img id="pic" src="sjf5d85v258d.jpg" />
$src="sjf5d85v258d.jpg";
return $src
}
?>
I hope I explained it understandably.
If I understand you correctly then you can do something like this:
<?php
...
get_remote_img($url) { ...
$src = get_remote_img($url);
// Concatenating the result to the elements src attribute:
echo '<img src='.$src.' />';
?>
What you're looking for is something like this:
<?php
$id = "brown_fox";
$url = "http://exampl.com/" . $id;
...
function get_remote_img($url) {
// some code to get image which SRC is dynamic:
$src="sjf5d85v258d.jpg";
echo "<img id=\"pic\" src=" . "\"" . $src . "\"" . "/>";
return $src;
}
?>
Also, if you want to send and receive query parameters in the URI dynamically through a form, you can take a look at GET Request in PHP.
I am using library https://github.com/flatlogic/awesome-bootstrap-checkbox for adding pretty checkboxes/radiobuttons to my site and it looks well on it. But when I am trying to do a screenshot of a div block with html2canvas library, then I get some weird things on the generated image .
HTML code:
<div class="checkbox checkbox-warning checkbox-circle">
<input type="checkbox" id="checkbox5" class="test-checkbox" checked="checked">
<label for="checkbox5"></label>
</div>
JS code:
var element = $('#body-details');
html2canvas(element, {
onrendered: function(canvas) {
var img = canvas.toDataURL();
var url = $('#image-url').val();
$.post(url, {data: img}, function () {});
}
});
PHP code:
$data = Yii::$app->request->post('data');
$file = time() . '.jpg';
$dirPath = './' . Yii::$app->session->get('userFolder') . '/';
// remove "data:image/png;base64,"
$uri = substr($data, strpos($data, ",") + 1);
// save to file
if (!file_exists($dirPath)) {
mkdir($dirPath, 0777, true);
}
file_put_contents($dirPath . '/' . $file, base64_decode($uri));
Maybe there are other ways how to do screenshot of the div without canvas but I did not find them.
Thanks everyone in advance
There was only one solution that I found.
I have to remove bootstrap style from checkboxes before making screenshot with html2canvas. After screenshot was made and request was sent to server I set the style back. It is not so nice as it could be but I did not find any better solution.
so far I've successfully moved an uploaded image to its designated directory and stored the file path of the moved image into a database I have.
Problem is, however, is that the img src I have echoed fails to read the variable containing the file path of the image. I've been spending time verifying the validity of my variables, the code syntax in echoing the img src, and the successful execution of the move/storing code, but I still get <img src='' when I refer to the view source of the page that is supposed to display the file path contained in the variable.
I believe the file path is stored within the variable because the variable was able to be recognized by the functions that both moved the image to a directory and the query to database.
My coding and troubleshooting experience is still very adolescent, thus pardon me if the nature of my question is bothersomely trivial.
Before asking this question, I've searched for questions within SOF but none of the answers directly addressed my issue (of the questions I've searched at least).
Main PHP Block
//assigning post values to simple variables
$location = $_POST['avatar'];
.
.
.
//re-new session variables to show most recent entries
$_SESSION["avatar"] = $location;
.
.
.
if (is_uploaded_file($_FILES["avatar"]["tmp_name"])) {
//define variables relevant to image uploading
$type = explode('.', $_FILES["avatar"]["name"]);
$type = $type[count($type)-1];
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$rdn = substr(str_shuffle($chars), 0, 15);
//check image size
if($_FILES["avatar"]["size"] > 6500000) {
echo"Image must be below 6.5 MB.";
unlink($_FILES["avatar"]["tmp_name"]);
exit();
}
//if image passes size check continue
else {
$location = "user_data/user_avatars/$rdn/".uniqid(rand()).'.'.$type;
mkdir("user_data/user_avatars/$rdn/");
move_uploaded_file( $_FILES["avatar"]["tmp_name"], $location);
}
}
else {
$location = "img/default_pic.jpg";
}
HTML Block
<div class="profileImage">
<?php
echo "<img src='".$location."' class='profilePic' id='profilePic'/>";
?><br />
<input type="file" name="avatar" id="avatar" accept=".jpg,.png,.jpeg"/>
.
.
.
View Source
<div class="profileImage">
<img src='' class='profilePic' id='profilePic'/><br />
<input type="file" name="avatar" id="avatar" accept=".jpg,.png,.jpeg"/>
.
.
.
Alright, I've finally found the error and was able to successfully solve it!
Simply declare a avatar session variable to the $location variable after updating the table, update the html insert by replacing all $location variables with $_SESSION["avatar_column"] and you are set!
PHP:
$updateCD = "UPDATE users SET languages=?, interests=?, hobbies=?, bio=?, personal_link=?, country=?, avatar=? WHERE email=?";
$updateST = $con->prepare($updateCD);
$updateST->bind_param('ssssssss', $lg, $it, $hb, $bio, $pl, $ct, $location, $_SESSION["email_login"]);
$updateST->execute();
$_SESSION["avatar"] = $location; //Important!
if ($updateST->errno) {
echo "FAILURE!!! " . $updateST->error;
}
HTML:
<div class="profileImage">
<?php
$_SESSION["avatar"] = (empty($_SESSION["avatar"])) ? "img/default_pic.jpg" : $_SESSION["avatar"] ;
echo "<img src='".$_SESSION["avatar"]."' class= 'profilePic' id='profilePic'> ";
?>
.
.
.
Thank you!
try this code
<?php
error_reporting(E_ALL);
ini_set('display_errors','on');
$location = ""; //path
if($_POST && $_FILES)
{
if(is_uploaded_file())
{
// your code
if(<your condition >)
{
}
else
{
$location = "./user_data/user_avatars/".$rdn."/".uniqid(rand()).'.'.$type;
if(!is_dir("./user_data/user_avatars/".$rdn."/"))
{
mkdir("./user_data/user_avatars/".$rdn."/",0777,true);
}
move_uploaded_file( $_FILES["avatar"]["tmp_name"], $location);
}
}
else
{
$location = "img/default_pic.jpg";
}
}
?>
Html Code :-
<div>
<?php
$location = (empty($location)) ? "img/default_pic.jpg" : $location ;
echo "<img src='".location."' alt='".."'> ";
?>
</div>
If it helpful don't forget to marked as answer so another can get correct answer easily.
Good Luck..
Ok, so I have literally never been so confused. As you can see I have pretty much the same function twice here (I know that may seem stupid but it is just easier for me to read for my page when it's like this - but that isn't the point of this)
The first one goes to the link it's given (http://www.blade-edge.com/images/KSA/Flights/craft.asp?db=dunai) then follows the path to get the img src of http://i.imgur.com/8t5rwWh.png
But the second function doesn't get the src of the image it's pointing to (which would be http://i.imgur.com/jWWUEqt.png) but instead gets the src for a completely different image on the page http://www.blade-edge.com/images/KSA/Flights/prev.png.
I am sure this is a really stupid mistake that I have just overlooked but I can't work it out.
Anyone?
function getImage(){
$page = file_get_html(getPageURL());
$element = $page->find("html/body/div/div[1]/center/table/tbody/tr[1]/td/table/tbody/tr/td[1]/div/div/img");
$imgLink = $element[0]->getAttribute("src");
echo "<img id='shipImage' src='".$imgLink."'></img>";
}
function getMap(){
$page = file_get_html(getPageURL());
$element = $page->find("/html/body/div/div[1]/center/table/tbody/tr[2]/td/center/img");
$imgLink = $element[0]->getAttribute("src");
echo "<img id='shipMap' src='".$imgLink."'></img>";
}
The following works for me:
function getImage($imageType){
$page = file_get_html(getPageURL());
$element = $page->find("/html/body/div/div[1]/center/table/tbody", 0)->children($imageType)->find("img");
$imgLink = $element[0]->getAttribute("src");
return $imgLink;
}
echo "<img id='shipImage' src='" . getImage(0) . "'></img>"; // Spacecraft image
echo "<img id='shipMap' src='" . getImage(1) . "'></img>"; // Map image
I won't try to guess the reason behind the problem, as I do not know the innards of the library.
Im looking to create a condition in wordpress loop. if no image then image box (.thumbHome{display:none})
this is in my function.php
function getThumbImages($postId) {
$iPostID = get_the_ID();
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
if($arrImages) {
$arrKeys = array_keys($arrImages);
$iNum = $arrKeys[0];
$sThumbUrl = wp_get_attachment_thumb_url($iNum, $something);
$sImgString = '<img src="' . $sThumbUrl . '" alt="thumb Image" title="thumb Image" />';
echo $sImgString;}
else {
echo '<script language="javascript">noImage()</script>';
}
}
And my javascript:
window.onload = noImage();
function noImage(){
document.getElementByClassName('.thumbHome').css.display = 'none';
}
I tried:
window.onload = noImage();
function noImage(){
$('.thumbHome').addClass('hide');
}
RESULT: class hide added to all loop
I cant figure it another way, since im still new in coding.
thx
Well first of all, you don't want to call these functions on window.onload. That's going to immediately set all class instances of .thumbHome to hidden without any conditions.
Here's a very easy way to fix this issue. There are probably more intricate ways, but this works well.
In your main loop, add an unique id to each .thumbHome div based on the image id. So like:
echo '<div class="thumbHome" id="thumb-' . $iNum . '"> ... </div>';
// or you could you use the post ID, doesn't matter, as long as you are consistent
Then your else conditional (for whether there's a thumbnail) could be changed to:
else {
echo '<script type="text/javascript">noImage("#thumb-' . $iNum . '")</script>';
}
and your js function could be:
function noImage(var){
$(var).hide();
}
This is not necessary the best way to do this, it's just the best way with the situtation you find yourself in now.