I'm a newbie looking for help.
What I want to do is this:
I have about nine projects listed on my home page each with a large image. Each project has about five other unshown images.
I'm trying to figure out how to click on the main image and have it load the next image in its place, staying on the same page, no transition needed. I have text links to the side to also control 'next' or 'previous' images if you click on them.
I'd like the images (aside from the nine initial) to load as you need them, so I'm not loading 50 images right from the start.
I'ts also been a headache trying to make nine independent gallery/slideshows on the same page.
Right now, I'm using a bloated, messy javascript that I hacked together rto get it done, but its unstable across browsers and I feel like it has a LOT of unnecessary code. So I won't bother posting it, I think I need to start from scratch.
I feel like this should be relatively simple but I can't find any plugins or examples anywhere that do this simple task.
I'm a total amateur, but I'd love to learn how to actually code it, so if anyone knows of any tutorials out there that could help me, I would really appreciate it! I have in my head that it should just be some simple jQuery, but I'm not sure exactly how to do it.
Thanks for any help!
If you must reinvent the wheel, here is a bare bones simple example:
http://jsfiddle.net/KDnPX/
Html:
<img src="">
Previous
Next
Jquery:
var json = '{"0":"http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg",
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg",
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}';
var images = jQuery.parseJSON(json);
// load first image
$('img').attr('src', images[0]);
var currImg = 0;
$('.prevImg').click(function (){
if (currImg - 1 >= 0)
{
// show previous image
$('img').attr('src', images[currImg - 1]);
currImg--;
}
return false;
});
$('.nextImg').click(function (){
if (currImg + 1 < Object.keys(images).length)
{
// show previous image
$('img').attr('src', images[currImg + 1]);
currImg++;
}
return false;
});
Related
[I found this question asked once before on SO about a year ago on but it went unanswered so I am asking again (wasn't sure whether best practice was to create a new question or "bump" the existing one).]
I have a Xamarin Forms application which is receiving a stream of JPEGs over HTTP and I want to keep updating a single Image placeholder with their contents. The frame rate at which I receive the images is very slow by design (maybe 5 fps at most) as this is for a time-lapse photography project. I want to be able to show the stills as an animation (think: taking a photo of a plant once per hour and then "playing" all of the stills to create a lively animation of said plant).
The problem I am having is with "flicker" while swapping one image out for the next. I've tried a variety of approaches, including having two Images (one visible at a time) and only changing the visibility once I'm done loading the latest image (I think this is maybe a naive form of double-buffering?). Have also looked into Motion JPEG, HTTP Keep-Alive, and even using a WebView (I have a valid Motion JPEG endpoint that I can read from). Anyway, nothing that I've found so far has helped reduce the flicker and therefore the "animation" of the stills remains very "jerky" for lack of a better way to put it, with a momentary blank (white) pane between stills. Frankly speaking, it looks like crap.
Here is the gist of the code which fetches the next "frame" and updates the "player" image:
var url = $"{API_BASE_URL}/{SET_ID}/{_filenames[_currentFilenameIndex]}";
var imageBytes = await Task.Run(() => _httpClient.GetByteArrayAsync(url));
var imageBytesStream = new MemoryStream(imageBytes);
var timeComponents = _filenames[_currentFilenameIndex].Split('T')[1].Split('.')[0].Split('-');
var timeText = $"{timeComponents[0]}:{timeComponents[1]}:{timeComponents[2]}";
Device.BeginInvokeOnMainThread(
() =>
{
TimePlaceholder.Text = $"{timeText} (Image {_currentFilenameIndex + 1}/{_filenames.Count})";
ImagePlaceholder.Source = ImageSource.FromStream(() => imageBytesStream);
});
Any suggestions would be greatly appreciated.
... and I've scoured the web for answers.
I boiled down the problem as much as I could in this jsfiddle:
https://jsfiddle.net/tko8rk5j/14/
There are 2 button, you click Go then Boost.
I'm trying to get the whole svg back to its initial position after the end of the Boost animation, so you can play the same sequence again and again.
I attempted various solutions suggested in other posts:
// tl.pause(0);
// tl.restart();
// tl.remove();
I also tried using the repeating TimeLineMax, but that just repeats the first animation sequence after the first click on Go button.
I'm not quite sure about what you're ultimately trying to do (which could greatly influence how I'd recommend building this effect), but here's a fork that I believe delivers the result you were asking for:
https://jsfiddle.net/2q1qrvty/7/
Your code was jumping back to the beginning before your animation even had a chance to run at all. Plus it was re-using the same timeline and constantly adding to it which isn't very efficient.
To make it go back to the beginning and stop as soon as it's done, just use an onComplete callback, like:
tl.eventCallback("onComplete", function() {
tl.pause(0);
});
There are a bunch of other ways to do this, but I don't want to overwhelm you :)
You may have better luck asking your questions in the dedicated GSAP forums at https://greensock.com/forums/
Happy tweening!
I have this project:
my codepen
I want to be able to move forward when the user walks, so it feels like they are walking thru the floor plan in VR as they are in real life.
my goal is get the geolocation of the user and show them the room matching theirs location and have them walk around the room while viewing the AR on the phone they would see paintings on the walls.
my challenges are:
walk in real life and move in VR (right now I have it auto walking forward in the meantime)
var speed = 0.0;
var iMoving = false;
var velocityDelta;
AFRAME.registerComponent("automove-controls", {
init: function() {
this.speed = 0.1;
this.isMoving = true;
this.velocityDelta = new THREE.Vector3();
},
isVelocityActive: function() {
return this.isMoving;
},
getVelocityDelta: function() {
this.velocityDelta.z = this.isMoving ? -this.speed : 0;
return this.velocityDelta.clone();
}
});
capture the user geo location so the moment they open the site they are placed relative to their location on the floor plan
this is my first attempt so any feed back would be appreciated.
As far as i know argon.js is more about geoposition than spatial/marker based augmented reality.
moreover It's quite worrying, that their repo for aframe was not touched for a while.
Argon seems like a library for creating scenes in certain points around the user, even their examples base on positioning stuff around, reason being the GPS/phone accelerometers are way too bad to provide useful data for providing spatial positioning. Thats why VIVE needs two towers, and other devices at least a camera/IR device, to get information about the HMD device.
Positioning the person inside a point depending where are they in a room is quite a difficult task, You would need to get a point of reference and position the user accordingly. It seems impossible, since the user can be anywhere in the world.
I would try to do this using jerome-etienne's marker based AR.js. The markers would be the points of reference You need, and although image processing seems like a difficult task, AR.js is surprisingly stable with multiple markers, which help in creating complex scenes.
The markers seems like a good idea, for they can help You with the positioning, moreover simple scenes have no problem with achieving 60+fps, making the experience quite comfortable.
I would start there, since AR.js seems to be updated frequently.
I am using PhantomJS to take screenshots of webpages.
I have seen other posts about problems with #font-face, but the fonts on my pages are rendering correctly. The only issue I am having is that each time I take a screenshot, the fonts show slightly differently from the previous screenshot. So although they are rendering correctly, they are inconsistent in their appearance on the screenshot.
I have tried a number of fixes, most based around the assumption that it is something to do with the screenshot being taken before the page is ready, but this doesn't seem to be the issue. For example, I have delayed the screenshot being taken so that the font has time to load, and be rendered, but this doesn't solve the problem.
I have tried binding to various page events, but again, no luck.
I have attached screenshots to show the difference. The problem is, I need the rendered screenshot to be accurate in the context of what I am using it for.
As a note, I have tried CasperJS as well (knowing that it is based on PhantomJS so not expecting it to be any different).
Have you tired watching the DOM for font related events? You can also try taking a screenshot every X seconds, producing a moment-moment overview (note that this will produce a lot of empty and duplicate images. If that's a problem, try simply setting a min file size or checking to see if two files have the same size).
var page = require('webpage').create();
page.open("http://www.slashdot.org", function (status) {
phantom.exit();
});
var i = 0;
setInterval(function() {
i += 1;
page.render("/tmp/screenshots/screenshot-" + i + ".png");
}, 50);
You can delay your screenshot using the following method :
var page = new WebPage();
page.open('http://stackoverflow.com/', function (status) {
just_wait();
});
function just_wait() {
setTimeout(function() {
page.render('screenshot.png');
phantom.exit();
}, 2000);
}
Here, your screenshot is taken 2000ms after your page is loaded.
Set the delay accordingly to allow the page to completely load all resources.
This is the first time I've ever posted in a forum, so thanks in advance for anyone who takes the time to read/answer this question.
What I'm trying to create is basically a flipping coin animation, which starts off turning very fast and then slows down to stop with a (randomly generated) side facing upwards after about 8 seconds.
I've done the animation of a complete flip, which lasts about half a second, and made it in to a movieclip... now I'm stuck!
Any ideas how I might go about doing this in actionscript3?
The fastest way around this would be to use some very basic actionscript. First, create 2 animations (One heads, one tails). Now, you only need a single frame for this and don't need to place the movieclips on the stage. Use the following or similar code:
var whichSide:int = 0;
var coin1:coinAnimation1 = new coinAnimation1();
var coin2:coinAnimation2 = new coinAnimation2();
whichSide = math.Round(math.Random(1));
if(whichSide == 1)
{
addChild(coin1);
}
else
{
addChild(coin2);
}
Just don't forget to right click the movieclip and export for actionscript, giving the movieclips the class of: coinAnimation1 and coinAnimation2.
Hope this helps.
I've accomplished such animation on ´Keyframes´ using the Tweener class. You can easily tween on the keyframe parameter with specific transition...
Basic example:
Tweener.addTween(myMovieClip, {_frame:10, time:2.5});
More information about Tweener here