im kinda new to javascript i mean i know the syntax but not so much the libraries.
i need some help to get some files (pictures) from a folder into an arry lets say:
var[] pictures = ?;
(the folder is in my project and contain some pictures)
so i can loop over them and diplay them on the page i did some search but i didnt find any guide on how to do this.
i realy want to understand on how to do this for future projects even a link to known guid you guys know we will be a big help.
if it help im using asp.net.
Well, there are a lot of ways to approach the problem, to me what you can do is (if you don't know the location of the images beforehand) make a service that returns the src of every image, store that in an array, and then show them in the page.
I believe you are using jQuery so you can make an ajax request like this:
jQuery.ajax({
url: /*path to*/"Service.asmx/getSources"
//options, check documentation
});
then, from asp, make a new service (Service.asmx in my case) and create a method that returns the location of the pictures (in my case the method is called getSources)
I recommend you use JSON (and jQuery.getJSON() method) so you can return a List<string>.
Lastly you can iterate or store the sources in an array, I'll put an example with the getJSON method
var sources = []
jQuery.getJSON("Service.asmx/getSources", function(data) {
for(var i = 0, len = data.length; i<len ; i++) {
sources.push(data[i]);//store every source in the array
}
});
once you have the sources you can display them like this fiddle
Tell me if it helped or if you need another solution.
If you want an array of pictures just to display them later, you can simply use:
var sources = [
"path/to/yourImage1.jpg",
"path/to/yourImage2.jpg",
// ...
"path/to/yourImageN.jpg",
];
var pics = [];
for(var i = 0; i < sources.length; i++) {
var pic = new Image();
pic.src = sources[i];
pics[i] = pic;
}
Related
I'm looking for a way to copy pdf documents and stack them resized (I think resize works as duplicate, so once this works I will be able to complete my script).
I've been using .duplicate for now, and I can only manage to copy 1 item[0] on the same doc. Besides if I copy element by element I won't be able to replace them easily that's why I want to copy the whole document
I'm opening every script I find to understand a possible method.
Syntax is ok
var targetFile = app.documents.add(); //this is my output file - it is created
folder = Folder.myDocuments; //this paragraph works for now
sourceFolder = folder.selectDlg("source");
for ( i = 0; i < files.length; i++ ){
var sourceDoc = app.open(files[i]);
var doc = app.activeDocument;
for (l = 0; l < doc.pageItems.length; l++) { //corrected error
doc.pageItems[i].selected = true;
}
var mySel = app.activeDocument.selection; //this paragraph need rework
newItem = mySel[0].duplicate(targetFile); //mysel.duplicate(targetFile) is not a function
// MAIN ERROR
}
I use ESTK and notepad++ and have checked the variable, nothing obviously wrong during F10 debug. Using Jongware's CHM reference guide and some github tutorial but they tend to help for single operation script. My goal is to have script without GUI to reduce errors and time to proceed
Thank you for your time
EDIT: spotted an error with i used two times in a loop
Simple self solution:
var mySel = app.activeDocument.selection;
app.executeMenuCommand('copy');
targetFile.activate();
newItem = app.executeMenuCommand('paste');
I am making my first steps coding with JavaScript and also playing with a webgl library called Three.js.
After see some tutorials and make some experiments I finally made this: https://dl.dropboxusercontent.com/u/15814455/Monogram.html.
As you can see in my code, the object reflects randomly a group of 6 images that I have in a folder of 13 images.
var numberOfImages = 13, images = [];
for (var i = 1; i <= numberOfImages; i++) {
images.push('sources/instagram/image' + i + ".jpg");
}
var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
The thing is that each time I upload an Instagram picture, it will be saved in that folder called instagram.
Now my problem is that, if I upload for example, 10 images to the folder I have to change this line of code: var numberOfImages = 13 to this var numberOfImages = 23.
So I am looking for a way to modify my code and not to set a limit of number of images. So I could upload images in the folder and then automatically see them in my 3d object.
I've been reading on internet and I found that I can use something called regular expressions in my code to solve this problem.
I would like to know if using regular expressions is a real solution. Is it worth to learn regular expressions to solve this problem?
Do you have some suggestion? There is another solution? Maybe its something simple and I should write a different line of code, but if it's something more complicated and I should learn some language I would like to learn the right language.
First off, if you are going to be programming at length in pretty much any language, it will be worth knowing regular expressions and how/when to use them so it's will be useful to learn them.
If this was a client/server problem where you controlled the server, the usual way to solve this problem is that the server would scan the file system on the server and it would tell the client how many images to prepare for.
If you have to solve this entirely on the client, then you can't directly scan the file system from the client, but you can request increasing file numbers and you can see (asynchronously) when you stop getting successful loading of images. This is not particularly easy to code because the response will be asynchronous, but it could be done.
Here's a scheme for preloading images and finding out where they stopped preloading successfully:
function preloadImages(srcs, callback) {
var img, imgs = [];
var remaining = srcs.length;
var failed = [];
function checkDone() {
--remaining;
if (remaining <= 0) {
callback(failed);
}
}
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = checkDone;
img.onerror = img.onabort = function() {
failed.push(this.src);
checkDone();
}
img.src = srcs[i];
imgs.push(img);
}
}
var maxNumberOfImages = 30, images = [];
for (var i = 1; i <= maxNumberOfImages; i++) {
images.push('sources/instagram/image' + i + ".jpg");
}
preloadImges(images, function(failed) {
var regex = /(\d+)\.jpg$/;
var nums = failed.map(function(item) {
var matches = item.match(regex);
return parseInt(matches[1], 10);
}).sort();
var numImages = nums[0];
// now you know how many good images there are
// put your code here to use that knowledge
});
Note: This does use a regular expression to parse the image number out of a URL.
It would be possible to code this without a preset limit, but it would be more work. You'd probably request images 10 at a time and if you didn't get any errors, then request the next block of 10 until you found the first failure.
I am beginner in web development. I am trying to send variable from one js file to another js file .
I researched alot before posting this question. I couldn't find any particular method by which i can do this.
My script which defines variable is
function getEventData(){
var eventList = document.getElementsByName("events");
var k=0;
var url = "https://www.eventbriteapi.com/v3/events/search/?categories=";
for(var i=0;i<eventList.length;i++){
if(k>=3)
break;
if(eventList[i].checked){
if(k==2)
url+=eventList[i].value+"";
else
url+=eventList[i].value+",";
k++;
}
}
url+="&token=************";
}
The url variable is perfect. I want to use it in another script which is
var jsonData=getJSON('url').then(function(data)
{
var sjd="";
for(var i=0; i<data.events.length; i++)
{
var url = data.events[i].name.url;
sjd +='<h4>'+ "<br/>"+ data.events[i].name.text + '<br>'+'</h4>';
}
document.getElementById("events").innerHTML = sjd ;
}
);
As seen i want to use the url variable from first js to second which is used in getJSON function.
I found local storage and cookies as a possible way. But storage doesnt work even if i use the link stated in comment. I cant find any good resource where i can learn cookies. Also is there any other way possible?
As suggested, use localStorage to store do the job.
localStorage.setItem("myvar", "jour json serialised string of variable");
and on the other page use it
var myvar = localStorage.getItem("myvar");
Again, deserialise on the other page. JSON.stringify is something you should know already. Also jquery has jStore plugin for this.
I need to download all the images from the gallery of this site but I don't know how to obtain the URL of them or where these URL are stored on.
I tried to download the entire site with some programs but none of them seems to download even the menu.
Hope someone have any idea how to achieve this without having to do it manually one by one.
Here I can saw the code that produce the URLs:
<script type="text/javascript">
$(function(){
$(".text-frame").not(".default-frame").hide();
$('#menubar .button').hover(function(){
$(this).toggleClass("button-hover");
});
$('#menubar .button').click(function(){
$(".text-frame").hide();
$("#image-viewer").hide();
$(".button").removeClass("button-active");
var showTextframe = $(this).attr("rel");
$("#" + showTextframe).show();
$(this).addClass("button-active");
});
function showImages (imgLinks){
for (var i = 0; i < imgLinks.length; i++){
//$("#image-box").append($('<img>').attr('src', imgLinks[i]));
var $imgSelector = $('<a>'+ (i + 1) +'</a>')
.data('imglink',imgLinks[i])
.click(function(){
$("#image-box").find("img").attr('src', $(this).data('imglink'));
$("#image-links").find('a').removeClass('active');
$(this).addClass('active');
//alert ("I open Image" + $(this).data('imglink'));
});
$("#image-links").append($imgSelector);
$("#image-links").find('a:first').trigger('click');
}
}
$.get("plants_w_links.md", function(semillaMenu){
var markdownConverter = new Showdown.converter();
$semillaMenu = $(markdownConverter.makeHtml(semillaMenu));
$semillaMenu.find("img").each(function(){
var $menuimage = $(this);
var $menulink = $(this).parent("li").find("a");
var menuimages = $menulink.data("menuimages") || [];
menuimages.push($menuimage.attr("src"));
$menulink.data("menuimages",menuimages);
$menuimage.remove();
});
$semillaMenu.find("a").click(function(){
var menuImages = $(this).data("menuimages");
//$("#image-box").empty();
$("#image-links").empty();
if (menuImages){
$("#image-viewer").show();
showImages(menuImages);
}
});
$semillaMenu.addClass("sf-menu sf-vertical");
$('#semilla-menu').html($semillaMenu);
jQuery('ul.sf-menu').superfish({delay:10});
});
});
</script>
The function showImages seems to generate the URL but I don't know what to do with that.
I found here many question asking something similar but all of them talking about donwloading images with progressive URL (like blabla.com/image1.jpg, blabla.com/image2.jpg, etc.) but it is not the case, the images are generated without a pattern (or not any that I can obtain or deduce).
EDIT: I need to know how those functions work in order to run something similar in the Chrome inspect console that gives me all the URL instead the URL of the clicked option of the menu.
EDIT2: Someone in a IRC channel told me that the script may be jQuery, so I'm adding the tag.
var urls = new Array();
Array.prototype.forEach.call( document.images, function( img ){ urls.push( img.src ) } );
console.log( urls );
After execution these lines of code urls will contain sources of all images on the page.
Finally someone on the jQuery chat tell me how to solve my problem. Accesing directly to this link was the answer. The link seems to contain the structure of the menues that semillaMenu function format (aparently) and process to show the images on the site.
This doesn't solve my question yet, because it's only working for this case. What I wanted was a way to obtain the URLs with a script but it's solve my problem.
So I let it be unaswered if someone know how to make a script that gives all the image links without having to process manually the plants_w_links.md file.
I'd like to know how can I replace every .gif images in a page for an image url that I already have. I've looked after many solutions but none could help me.
Edit: Removed the old code since it was causing some confusion
So does anybody knows how to do this? JS pure would be better since I can't get jQuery working properly with Tampermonkey.
Edit 2: Managed to get another code sort of working, but it doesn't replaces the image url, just adds to it.
var theImages = document.getElementsByTagName('img');
for(i=0; i<theImages.length; i++) {
if(theImages[i].src.indexOf('.gif') != -1) {
theImages[i].src = ('imageurl.jpg')}
}
Take a look at this line var image_png_src = image_png_src.replace(".gif", "image.jpg");. image_png_src is not yet defined but you try to call a replace property. Any way you probably wanted to use image_gif_src instead.
var image_png_src = image_gif_src.replace(".gif", "image.jpg");
Assuming your images have the same name, and you just want to change the extention, your code is almost right, you just made a small mistake. Here is the correct version:
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var image_gif_src = images[i].src;
var image_png_src = image_gif_src.replace(".gif", ".jpg");
images[i].src = image_png_src;
}
Notice how image_png_src.replace in the second line of the for loop has been replaced with image_gif_src.replace? You were trying to do a replace on the wrong variable. Also, I changed "image.jpg" in your original example to just ".jpg" because I'm assuming you only mean to change the extention, not append the word "image" onto the end of whatever image you're changing.
If you want to change every gif to some other image, not just change the extention, this code would do it:
images[i].src = image_png_src;
for (var i = 0; i < images.length; i++) {
if( images[i].src.indexOf(".gif") > -1){
images[i].src = "New Image.jpg";
}
}
jquery approach
$("img").each(function(){
$(this).attr('src',$(this).attr('src').replace(".gif", ".jpg"));
});
fyi, to use jquery or other js libraries in Xmonkey,
simply add
// #require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
in the ==UserScript== header. In case of conflicts, turning on jQuery.noConflict(); may help.
So I got it working using the following script:
var theImages = document.getElementsByTagName('img');
for(i=0; i<theImages.length; i++) {
if(theImages[i].src.indexOf('.gif') != -1) {
theImages[i].src = ('imageurl.jpg')}
}
Thanks to everybody that helped.