Okay, so I am working on code to display all the images in a folder as a gallery. I've got a PHP script to find all the files in the folder (someone else had written it, and it works just fine):
<?php
$directory = $_REQUEST['folder'];
if (!is_dir($directory)) {
exit('Invalid diretory path');
}
$files = array();
foreach (scandir($directory) as $file) {
if ('.' === $file) continue;
if ('..' === $file) continue;
$files[] = $file;
}
echo json_encode($files);
?>
Now I had a javascript get the json from the php and display it in a grid:
const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
const gallery = document.getElementById("web_gallery");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
for(var i = 0; i < myObj.length; i++)
{
var write = "<img src='" + folder + "/" + myObj[i] + "' id='gallery_img'>";
console.log(write);
gallery.innerHTML += write;
}
}
};
xmlhttp.open("GET", "toJson.php?folder=" + folder, true);
xmlhttp.send();
This works just fine on Firefox, but it doesn't display anything on Chrome. I looked through several threads here and the one with the most traction seamed to suggest that I should try to use JQuery, so I set that up and wrote this:
$(document).ready(function(){
const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
var url = "toJson.php?folder=" + folder;
var toWrite = [];
$.get(url, function( data ) {
var images = JSON.parse(data);
for(var i = 0; i < images.length; i++)
{
toWrite.push("<img src='" + folder + "/" + images[i] + "' id='gallery_img'>");
//$( "#web_gallery" ).append( write ); // Had this here before, but tried to move it down to after it's done.
}
}).done(function()
{
for(var i = 0; i < toWrite.length; i++)
{
$("#web_gallery").append(toWrite[i]);
}
});
});
Someone else suggested that you shouldn't do so many append requests so I changed it to:
$(document).ready(function(){
const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
var url = "toJson.php?folder=" + folder;
var write = "";
$.get(url, function( data ) {
var images = JSON.parse(data);
for(var i = 0; i < images.length; i++)
{
write += "<img src='" + folder + "/" + images[i] + "' id='gallery_img'>\n";
}
}).done(function()
{
setTimeout(function () {
$("#web_gallery").append(write);
}, 1500);
});
});
All of these work fine in Firefox, but not a single one of them work in Chrome, and I'm not sure why. It seems to have to do with the time and speed of writing to the page, I think.
Append the image element with the createElement method.
var image = document.createElement('img');
image.src = imageFilePath;
$(image).appendTo("#web_gallery");
Related
I am in the process of creating a listview from JSON data however, after calling an 'onclick' function from a For loop, the link, which opens up in a new window, loads three URLs into the URL input of the browser. Any idea how I could re-work the below code to just load one link rather that the three based on the below code?
<h3>Links</h3> <br>
<ul class="list">
<div id="timetables"></div>
</ul>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://api.myjson.com/bins/qg69t";
var URL_1 = "";
var URL_2 = "";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
URL_1 += arr[i].timetable_1_link;
URL_2 += arr[i].timetable_2_link;
console.log(arr[i].timetable_1_link);
out += '<div>' + arr[i].course + '</div><p>' + arr[i].timetable_1_name + '</p><p>' + arr[i].timetable_2_name + '</p>';
}
document.getElementById("timetables").innerHTML = out;
}
function openLinkInNewWindow_1() {
window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
}
function openLinkInNewWindow_2() {
window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
}
</script>
You can start by refactoring the function that opens the URL to accept a parameter like this:
function openLinkInNewWindow_1(URL) {
window.open(URL, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
}
Then in the for loop pass the URL along with each link.
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
URL_1 = arr[i].timetable_1_link;
URL_2 = arr[i].timetable_2_link;
console.log(arr[i].timetable_1_link);
out += '<div>' + arr[i].course + '</div><p>' + arr[i].timetable_1_name + '</p><p>' + arr[i].timetable_2_name + '</p>';
}
document.getElementById("timetables").innerHTML = out;
}
This way you only need the one function. Notice also that I removed the + from the URL_1 += line.
Using URL_1+= is culprit here. Every time loops run it appends new string to existing url(s).
So remove += from URL_ variables in your function 'myFunction' and assign values directly by using '=' only.
Updated code is written below
<h3>Links</h3> <br>
<ul class="list">
<div id="timetables"></div>
</ul>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://api.myjson.com/bins/qg69t";
var URL_1 = "";
var URL_2 = "";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
URL_1 = arr[i].timetable_1_link;
URL_2 = arr[i].timetable_2_link;
out += '<div>' + arr[i].course + '</div><p>' + arr[i].timetable_1_name + '</p><p>' + arr[i].timetable_2_name + '</p>';
}
document.getElementById("timetables").innerHTML = out;
}
function openLinkInNewWindow_1() {
window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
}
function openLinkInNewWindow_2() {
window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
}
</script>
You can take a look for updated and running code here
Using WP API I am trying to get the featured image from a post but unsuccessful -
here is the line of code that is not working:
ourHTMLString += postsData[i]._links[i].wp:featuredmedia[i].href.guid.rendered;
The other lines of code is working. Here is the code:
var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');
function createHTML(postsData) {
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++) {
ourHTMLString += postsData[i]._links[i].wp:featuredmedia[i].href.guid.rendered;
ourHTMLString += '<h6 class="news-title">' + postsData[i].title.rendered + '</h6>' ;
ourHTMLString += postsData[i].content.rendered;
}
prodCatPostsContainer.innerHTML = ourHTMLString;
}
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
console.log(data);
createHTML(data);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
UPDATE
I have added another XMLHttpRequest to get the media featured image of the news item as per #RYAN AW recommendation, but still not working. I am unsure if I am doing this right, but I am pushing all the featured media ID's into an array, then I use the ID's in the array to make a get request, grabbing the "guid" -> "rendered" image url that I can see in JSON. Do I have to loop through this related news item mediaRequest somehow? i.e mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia[i]); Any help would be great.
var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");
var mediaContainer = document.getElementById("media-Container");
var featuredMedia = [];
//----------------- News Content ------------------//
var newsRequest = new XMLHttpRequest();
newsRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');
newsRequest.onload = function() {
if (newsRequest.status >= 200 && newsRequest.status < 400) {
var data = JSON.parse(newsRequest.responseText);
createNEWS(data);
} else {
console.log("News Request - We connected to the server, but it returned an error.");
}
};
function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
featuredMedia.push(postsData[i].featured_media);
ourHTMLString += '<h6 class='"news-title"'>' + postsData[i].title.rendered + '</h6>' ;
ourHTMLString += postsData[i].content.rendered + '<br><br>';
}
prodCatPostsContainer.innerHTML = ourHTMLString;
}
newsRequest.onerror = function() {
console.log("Connection error");
};
newsRequest.send();
//----------------- Media Featured Image ------------------//
var mediaRequest = new XMLHttpRequest();
mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia);
/*for (i = 0;i < featuredMedia.length;i++){
mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia[i]);
}*/
mediaRequest.onload = function() {
if (mediaRequest.status >= 200 && mediaRequest.status < 400) {
var mediaDat = JSON.parse(mediaRequest.responseText);
createMEDIA(mediaDat);
} else {
console.log("Media Request - We connected to the server, but it returned an error.");
}
};
function createMEDIA(mediaData){
var mediaHTMLString = '';
for (i = 0;i < mediaData.length;i++){
mediaHTMLString += '<img src="' + mediaData[i].guid.rendered + '"/><br>';
}
mediaContainer.innerHTML = mediaHTMLString;
}
mediaRequest.onerror = function() {
console.log("Connection error");
};
mediaRequest.send();
Hi #roshambo Try to write it as answer, with that plugin you don't need to make 2nd request just to get img src of featured image, I can get easily this featured image with php, I am not familiar in javascript. but I think your code should be like this.
var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');
function createHTML(postsData) {
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++) {
//ourHTMLString += postsData[i].better_featured_image.source_url; //full size
ourHTMLString += postsData[i].better_featured_image.media_details.sizes.post-thumbnail.source_url; //thumbnail
ourHTMLString += '<h6 class="news-title">' + postsData[i].title.rendered + '</h6>' ;
ourHTMLString += postsData[i].content.rendered;
}
prodCatPostsContainer.innerHTML = ourHTMLString;
}
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
console.log(data);
createHTML(data);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
If you still activating that plugin, you can share your JSON response for a single post. If that post has a featured image there will be better_featured_image fields in that response.
I have found an answer https://wordpress.stackexchange.com/questions/241271/wp-rest-api-details-of-latest-post-including-featured-media-url-in-one-request I added this code to my functions file in the GET request location
add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field('post',
'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything
array(
'get_callback' => 'get_image_src',
'update_callback' => null,
'schema' => null,
)
);
}
function get_image_src( $object, $field_name, $request ) {
$feat_img_array = wp_get_attachment_image_src($object['featured_media'], 'thumbnail', true);
return $feat_img_array[0];
}
then called ourHTMLString += '<img src=' + postsData[i].featured_image_src + '>';
I am new to JavaScript and am trying simple web design. I have a doubt that how to get no.of image files stored in local image folder using js code.
I would like to get the no. of image files dynamically so that even if we are adding more images in folder any time that also will be displayed on web page.
function parenting {
var n=3;
for(var i=1; i<=n; i++) {
var img1 = document.createElement('img');
img1.src = 'images/parenting/'+i+'.jpg';
document.body.appendChild(img1);
}
}
In above code, i have given n=3 as default no. of image files but it should be taken from image folder by code.
If you enable directory browsing on your web server for your images location, then you can do an ajax request and iterate over the results:
$.ajax({
url: "images/parenting/",
success: function(data){
$(data).find("a:contains(.jpg)").each(function(){
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='images/parenting/" + filename + "'>");
});
}
});
Here's a vanilla JavaScript answer:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
var n = (xmlhttp.responseText.match(/jpg/g) || []).length;
for (var i = 1; i <= n; i++) {
var img1 = document.createElement('img');
img1.src = 'images/parenting/' + i + '.jpg';
document.body.appendChild(img1);
}
}
}
};
xmlhttp.open("GET", "images/parenting/", true);
xmlhttp.send();
I managed to get the captions by foreach loop but now I'm facing a new problem.
I get duplicates in my database because of the nested loop, please check the code below.
JavaScript
window.onload = function () {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("galleryFilesAdd");
filesInput.addEventListener("change", function (event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail img-responsive' alt='" + picFile.name + "' + height='220' width='300'; src='" + picFile.result + "'" +
"title='" + picFile.name + "'/><button type='button' class='delete btn btn-default' class='remove_pic'> <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button><input type='text' id ='imagecaption[]' name='imagecaption[]' class='form-control' placeholder='Add Image Caption'>"
output.insertBefore(div, null);
div.children[1].addEventListener("click", function (event) {
div.parentNode.removeChild(div);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else {
console.log("Your browser does not support File API");
}
}
Controller
public async Task<ActionResult> AddHotel(HotelViewModels.AddHotel viewModel, IEnumerable<HttpPostedFileBase> galleryFilesAdd)
{
try
{
if (ModelState.IsValid)
{
foreach (var files in galleryFilesAdd)
{
var fileName = Guid.NewGuid().ToString("N");
var extension = Path.GetExtension(files.FileName).ToLower();
string thumbpath, imagepath = "";
using (var img = Image.FromStream(files.InputStream))
{
foreach (var caption in viewModel.imagecaption)
{
var galleryImg = new hotel_gallery_image
{
hotel_id = hotel.id,
thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension),
imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension),
entry_datetime = DateTime.Now,
guid = Guid.NewGuid().ToString("N"),
enabled = true,
image_caption = caption
};
db.hotel_gallery_image.Add(galleryImg);
}
}
}
await db.SaveChangesAsync();
return RedirectToAction("Index", "Hotel");
}
}
catch (DbEntityValidationException ex)
{
string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage));
throw new DbEntityValidationException(errorMessages);
}
viewModel.Country = await db.countries.ToListAsync();
return View(viewModel);
}
and viewModel
public string[] imagecaption { get; set; }
Inserted data into database
I think the problem is in your
image_caption = viewModel.imagecaption
because you iterate through var files in galleryFilesAddyou use the reference to the same image_caption from viewModel on each iteration, so you need to filter your image_caption depending on another data (fileName or another data which you viewmodel contains).
UPDATE
Ideally if you have same properties in your ViewModel and files(filename for example), then you could do something like thatimage_caption = viewModel.FirstOrDefault(x=>x.Filename == filename).imagecaption
In order to be more specific would be helpful if you provide code for your Viemodel and galleryFilesAdd classes.
UPDATE 2
In your case 2nd foreach you iterate through whole collection of imagecaption array, on each iteration through galleryFilesAdd collection, which cause double data in you database.
If you can take your captions sequentially for the 1st file take the 1st element from imagecaption array and so on then you can use code like this:
if (ModelState.IsValid)
{
int index = 0;
foreach (var files in galleryFilesAdd)
{
var fileName = Guid.NewGuid().ToString("N");
var extension = Path.GetExtension(files.FileName).ToLower();
string thumbpath, imagepath = "";
using (var img = Image.FromStream(files.InputStream))
{
if(index < viewModel.imagecaption.Length){
var galleryImg = new hotel_gallery_image
{
hotel_id = hotel.id,
thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension),
imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension),
entry_datetime = DateTime.Now,
guid = Guid.NewGuid().ToString("N"),
enabled = true,
image_caption = viewModel.imagecaption[index]
};
db.hotel_gallery_image.Add(galleryImg);
index++;
}
}
}
http://jsfiddle.net/hbrennan72/0urqaee9/
I have taken a very simple W3Schools JSON example and modified it ever so slightly. I am having trouble displaying just the contents contents of the JSON file. The external JSON file is referenced in the JS but I also copied the contents into the CSS frame on JSFiddle. Any help would be appreciated.
var xmlhttp = new XMLHttpRequest();
var url = "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].president + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
You need to iterate through arr.presidents.president
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.presidents.president.length; i++) {
out += JSON.stringify(arr.presidents.president[i]) + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
For the XML references, ex. xmlns:xsi, you will need to use bracket notation. You can reference the presidents list objects as you would any JavaSscript object.
Forked jsfiddle
You can display the properties in any format you like.
function myFunction(arr) {
alert(arr.presidents["xmlns:xsi"]);
alert(arr.presidents.president[0].number + ". " + arr.presidents.president[0].name);
...
}
EDIT
I have amended the jsfiddle to create a table. I did not include all the fields you specified, but will get the general idea.