Hello I have a webcam 'foscom' that send automatic snapshot every 30minutes a pictures to this folder in my ftp "testcamera/img"
I was able to create a code that display the latest image uploaded in php.
But i want also to display a drop down menu that display all old image that's mean i will let the viewer to choose another picture and display it.
An example of the idea i want: http://www.skileb.com/webcam/mzaarv/
My Sample look like this: www.stevendahdah.com/testcamera/index.php
So anyone can help me?
Here is a link that will get you started :
sort files by date in PHP
Getting the first or last file is merely getting the correct element from your sorted array :
$latest_file = $files[1];
$oldest_file = $files[count($files)];
You can create a image tag
echo '<img src="/dir/where/files/are/'.$latest_file . '" />';
For the rest, you can create links
for ($i = 2; $i <= count($files); $i++) {
echo '<a href="/dir/where/files/are/'.$latest_file . '" />' . $latest_file . '</a>';
}
Related
I'm making my project and I have something that I don't understand. I want to make an if/else statement or anything that if all the document was uploaded in the database and no one missing it will have a check icon but if there were missing or no upload documents in the database it will have an x icon. The picture or link below is my database. The below code is the data I want to complete.
$vsoi = $row['soi'];
$vciv = $row['civ'];
$vpromo = $row['promo'];
$vassign = $row['assign'];
$vawards = $row['awards'];
$venlist = $row['enlist'];
$vlongpay = $row['longpay'];
$vfamily = $row['family'];
$vsaln = $row['saln'];
$vepem = $row['epem'];
This is the result I want to make.
If documents are complete.
and if not complete.
Thank you in advance!!!
I am not sure is this the solution that you are asking. Because you didn't post more information and the database structure. So I will post the answer as per my assumptions to give you an idea. I see in your database there are documents/ and also documents/CPLATEC.docx. So I assume documents/ as NOT UPLOADED and documents/CPLATEC.docx as UPLOADED and also the field type as VARCHAR. So based on that here is the answer,
I see a series of documents in the whole table but I will only get this soi as for the example.
<?php
$vsoi = $row['soi'];
$imageSrc = '';
if ($vsoi == 'documents/') {
$imageSrc = 'img_for_uploaded.png';
} else {
$imageSrc = 'img_for_not_uploaded.png';
}
?>
You have to place the following inside the table row right to the delete button.
<img src="<?php echo $imageSrc ; ?>" />
Or just place them inside the table row.
if ($vsoi == 'documents/') {
echo '<img src="img_for_uploaded.png" />'
} else {
echo '<img src="img_for_not_uploaded.png" />'
}
Hope this helps you.
I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images
$count = 0;
echo " <div class=\"row\">";
while($row = $result->fetch_assoc()) {
$ext = $row['Extension'];
$ImageID=$row['ImageID'];
if(($count%3) ==0){
echo "</div>";
echo " <div class=\"row\">";
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}else{
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}
}
echo "</div>" ;
Image after link is clicked
<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";
$result = mysqli_query($conn,$query);
$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';
?>
I don't know what to do at this point, how can I provide that zoom in/out functionality?
First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.
Make two folders on your webservers:
images/
thumbnails/
Put your small images in "thumbnails" and large images in "images"
And if you need to, store the image-names in your database, so you can do something more like this:
echo '<img src="images/'+$imageName+'">'
If you want to, you can do an on-demand resizing of your images, using gd-lib.
The basic idea being, in pseudocode:
//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName
This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery
Good, I created an XML document with the name and title of songs and artists within that document come also the corresponding cover. Now the link of my XML file is: http://inlivefm.96.lt/nw.xml .
I also have another XML document that gives me the name and artist title that this amounts to the moment (ADELE - HELLO) Now the link of my XML file is: http://inlivefm.96.lt/NowOnAir.xml .
Well, what I'm trying to make is that with document I created give me the cover of this song to give right now. I tried to make a code but to no avail in PHP, so I came to ask your help to get success.
Here I leave the code I am using to try to get what I want.
<?php
$xml = simplexml_load_file('http://inlivefm.6te.net/agora.xml');
$artist = urlencode($xml->Event->Song->Artist['name']);
$track = urlencode($xml->Event->Song['title']);
$url = simplexml_load_file("http://inlivefm.96.lt/nw.xml");
$largeImage = $url->xpath('/ilm/$artist- $track/image[#size="cover"]')[0];
echo '<img src="'.$largeImage.'" />';
?>
Can you please help me doing this?
Thank you all in advance.
correct xpath to take image is
(/ilm/artist/image[#size="cover"])[count(/ilm/artist/name[.="ADELE-HELLO"]/preceding-sibling::name)+1]
because you need to get image with the same position as artist's name.
In php code it should be something like this:
$XML = simplexml_load_file('http://inlivefm.6te.net/agora.xml');
$artist = $XML->Event->Song->Artist['name'];
$track = $XML->Event->Song['title'];
$URL = simplexml_load_file("http://inlivefm.96.lt/nw.xml");
$largeImage = $URL->xpath('(/ilm/artist/image[#size="cover"])[count(/ilm/artist/name[.="'. $artist .' - '. $track.'"]/preceding-sibling::name)+1]');
echo '<img src = "'. $largeImage[0]. '" />';
I have an image gallery displaying all photos from my file directory with php. I have defined what type of file to use etc but the main line of code is as below:
echo '<img src="'.$dir.'/'.$file.'" alt="'.$file.'" width="600px" />';
I know by changing the width=" " above I can alter how many images I have in a row but if i had a drop-down box, with options stating how many columns i want the photos displayed in and a button to refresh the page to show the columns option i have selected.
So for example: I select a drop down option "15 columns" and hit the refresh button, the page should then refresh and the images be redisplayed in columns of 15. How would i go about this?
You should be using HTML Tables for it. Anyhow here is how you should do it.
$allowed_per_line = $_GET['columns'];
$counter = 0;
while($image = fetch...) {
$counter++;
echo "<img src='{$dir}/{$file}' alt='{$file}' />";
if($counter==$allowed_per_line) {
echo '<br />';
$counter=0;
}
}
I have a challenge with a wordpress theme I'm developing, but I think what I'm after is really just a general php/JS solution, nothing Wordpress specific.
So I have the below code with pulls in the thumbnail and description for an array of images I have uploaded. What I'd like to do is when a user clicks on the link the description and caption associated with that image is displayed in a div elsewhere on the page.
My issue is that so far the only way I can think of to do that is to set a javascript variable within my php foreach statement, but the problem with that is that this overwrites the variable value each time (as I can't change the variable name) so by the end of it all I don't have a different JS variable for each image, I just have one with the details from the last image in the array.
I know AJAX might be one way forward, but I know pretty much nothing about it. If anyone can help point me in the right direction I'd really appreciate it.
Thanks
<?php
$gallery_images = get_custom_field('galleryImages:to_array');
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
?>
link
<?php
}
?>
<div id="targetDiv"></div>
I think you're going about this the wrong way, personally. Using AJAX to interact with a WordPress site seems like overkill for the simple ability of showing some peripheral information about an image.
What I would do is have WordPress spit out the image, along with the caption info when the page is initially downloaded, but hide the caption info and then use client-side JavaScript to show/hide it when it's needed.
<?php
$button_html = "";
$caption_html = "";
$gallery_images = get_custom_field('galleryImages:to_array');
$gallery_images_count = 0;
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
$button_html .= '<div id="caption-button-' . $gallery_images_count . '" class="show-caption-button">Show Caption</div>';
$caption_html .= '<div id="caption-' . $gallery_images_count . '" style="display:none;">' . $caption . '</div>';
$gallery_images_count++;
}
echo '<div id="buttonDiv">' . $button_html . '</div>';
echo '<div id="targetDiv">' . $caption_html . '</div>';
?>
Then the JavaScript/jQuery:
$('.show-caption-button').click(function(){
var caption_id = $(this).prop('id').substring(15);
$('#caption-'+caption_id).eq(0).toggle();
});
It's hard to test without setting up a WordPress myself, but essentially what we're doing is adding caption divs with numbered id's to a string variable in PHP as we're looping through our images. Then, at the end of the loop, we echo that out to the page.
In JavaScript/jQuery, we're grabbing the corresponding id of the caption button and using it to toggle the relevant caption further down in the page.