I've to build a website for one real estate developer. Now he wants to put walk through of building/apartment. Is there any way to implement this using jquery like a visitor can see layout of building or apartment as he moves a mouse cursor. Such as moving camera in 3d object. I don't want to use video or swf object. Plz help me.
I'd check out jQuery Virtual Tour.
Here is a demo:
http://www.openstudio.fr/jquery-virtual-tour/
I've actually seen this in production in a couple different places.
Related
A team member in a programming project has written the graphical aspect of our software using three.js (the abstraction of WebGL), and due to imposing time constraints, I've been tasked with coding up a Menu / Display thing for the program.
(The program displays a 3-D graph, and this 'menu' will appear (when triggered) and display information about a particular node, including an image, some text and maybe a scroll-able area of text)
I've had little to no experience with three.js or WebGL and am trying to wrap my head around the whole 'textures' and 'mesh' and 'materials' and what have you; I'm not sure how I'd approach creating such a menu/display.
There's little I can find for making menus in three.js with some (probably naive) Google searching, and I don't have time to really slug through a whole WebGL tutorial.
Can anybody steer me in the right direction?
Is there some convenient three.js extension or module for making displays / menus?
Does anybody know how I should/could implement this using Three.js objects?
Thanks!
Is there a reason not to use HTML ?
As you run your app in modern browser environment - I guess - HTML/CSS/Javascript is by far the easiest way to make the interface.
If the menu is only supposed to interact with the scene (changing a size, rotation, light, toggle things, etc), you can even go with DAT.Gui, many Three.js examples use it, and you can find a tutorial here http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos
If you know any good starting point to learn how to create such effect using Adobe Flash for an iPhone app, or even an Air app, it'd be of much help.
Specifically, I want it not to save the overlay only show it while the user is taking the image from the camera.
Here is a great link to the camera class that should get you started.
http://help.adobe.com/en_US/as3/dev/WSfffb011ac560372f3fa68e8912e3ab6b8cb-8000.html
You can then add most any objects on top of the video/camera object for the transparent look you are going for.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.