I want to create an image slider in Javascript (not in jquery) and fail to think about an algorithm to do this.
On the internet I found writing code examples but I do this job to help me understand how to think programs.
I thought a few steps that I think should be displayed.
1.make an array where we store all the images in a folder.
It is important that this be done dynamically,
For example, the code below images are added manually ... but what if we have 1,000 images? We can not add to all manual
var images = [
'/images/img1.jpg',
'/images/img2.jpg'
];
2.We use a "FOR" to browse all vector(images).
for(var i=0;i<images.length;i++)
{
//Here not figure out what should be written
}
3.It is important for each image to display two things.
Image name and date on which it was created.
This step I realize it should do.
4.You should also arrows left and right. I thought each arrow to make such a function where to write code
functions left()
{
//some code for running images
}
So much I think I managed to ... I hope to help me understand how to design a script.
Certainly not something complicated and many people here know to do it but I want to understand how to think such scripts.
I want to understand why we need to create objects and so on ... everything.
Thanks in advance!
Related
I don't know why I've had a few issues explaining this problem so I have created this image to show what I am trying to do.
I have a ticker and I'm simply trying to duplicate it below the existing one with a different list. the black tile bar just represents a break so don't worry about styling. I hope this is possible, if not I would also like to know why.
Many Many thanks, attached is a JSfiddle if it is possible to show a working example in the JSfiddle it would be even nicer :)
I have had trouble finding any examples of this so I thought Id ask here hoping to get a better idea on whether this is possible or not. What I want to do is have images being dynamically grabbed from a feed. Based on the images' average color is (or even better what color the image would look like if it were only a few pixals big) run a specific code that puts that images somewhere in a picture that will be built out by these images that are pulled. Would I need jQuery for this or the canvas tag maybe?
Any help or insight on how I could begin to make this possible would be excellent!
Thanks :)
This seems like a good solution for you, it gets the predominant color in a image, so from that you could execute your code.
https://github.com/briangonzalez/jquery.adaptive-backgrounds.js
I have been trying to code some pdf-generator using svgToPdf. Now first I need to test the code. But there is not much documentation /demo over here. I am new to javascript. So I just want you guys to explain me how to use the code. The main idea is pretty simple though- it stores all the svg data in an array and as per the information associated with svg images it generates the pdf(places the images at proper position).
What is the meaning of the usage over here?( I can't understand this)
Can any of you give me a complete example or explain how to probably use it?
Okay! what I am trying to do? my_code. I wanted to see my whole page printed.(blue box+ hello world).
Firstly, I'm a big fan of the site and have used it countless time to help me when stuck on a problem, but this is the first time I have come across something that has required me to write a question because I simply cannot find a situation like this.
I have a Json file which I am loading a bunch of data from that I then run through with my code to put the right data in the right places so it can be rendered by ThreeJS (quick side note, big thanks to mrdoob, westLangley and the rest of the ThreeJS team for what they've done and their continued engagement with helping people here).
So at that point the mesh is able to be rendered and have orbit controls and so on. Then I made just a simple exporter in a similar style to that of ThreeJS.org/editor. The big difference being that I simple use JSON.stringify on a number of objects (the one I will focus on here is called "geo") and write their data to a new Json (json2). The goal being that now I can simply load json2 into the new program which will populate "geo" with the data of the json2's geo thus circumventing all of the processing that goes into putting the data in the right places.
Now here is the issue. All the data seems to be the same between the two "geo"s, but when going to color a face in the code by using:
for ( var i = 0; i < sD.geo.faces.length; i ++ ) {
var face = sD.geo.faces[ i ];
face.color.setStyle("#0066FF");
}
the error that "face.color does not have a function called setStyle" (rough quote from memory) appears. And again, this works perfectly fine in the first program.
So I looked into it further and it seems that when digging into the "face" variable in the code above via firebug, it doesn't have a constructor or prototype in its drop down menu, as it does have the first program. I'll upload screenshots of the two dropdowns to show more visually in a little while. )Update: Nevermind, I don't have enough rep to post them. Forgot about that haha)
So the data I have doesn't have the constructor/methods, so could it be that the data I'm setting the sD.geo equal to? (even did it so that it just sets the vertices from the json2 to the sD.geo.vertices so as to avoid that but didn't work, obviously). Any other ideas as to what my issue could be? Should I add the methods to the json2 and how because I looked into that a lot and couldn't find any good examples on it.
I apologize if I jumped all over the place throughout this, I tried to keep it as linear as possible as to cause as little confusion as possible.
Any and all help is appreciated, and I am more than willing to answer any questions anyone has that I am able to.
Thanks!
After tinkering with this more, I found a solution for adding the json2's geometry data to the new program's geo.
function loadGeo(json) {
var loader = new THREE.ObjectLoader();
var object = loader.parse( json );
var pushed = false;
object.traverse(function(child) {
if (child.geometry !== undefined && pushed !== true) {
addGeometry(child.geometry);
$.each(child.material.materials, function(cm, cMat) {
sD.geo.materials.push(cMat);
});
pushed = true;
}
});
}
Now this works, but it is far from flawless. For example, in object.traverse I put in a check to only add the first geometry and material it finds and ignore the rest. Both because I am only adding a single geometry and I haven't used/looked into traverse enough to know of any proper exit. Also in the json, the materials (there are ~24 for the single geometry) are very deep in the object tree, which is okay but probably not optimal.
The one big issue that I have come across with this is that for some reason, the materialIndexes I assigned to the faces in the geometry aren't assigned properly; they all are just set to 0(from the ones I looked at, there are ~11,000 faces so couldn't look through them all). An odd issue, and will edit my answer if and when I find solutions to this or others give solutions on here.
I figured this out by going back to the three.org/editor and seeing how their importer worked and making a rough attempt at something that uses the threejs loaders in the same way, but really make it less tied into the actual Editor and make it very "bare-bones" so that it serves my purposes alone. That being said, I'm curious if there is any ThreeJS importer which uses the loaders that can just populate variables in the way like I am doing here.
I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/