We got this assignment from school to reproduce this example (created in Flash) into plain Javascript, HTML and CSS (jquery/Mootools not alllowed). Now i got the grid right, but i can't figure out what function to use to zoom into all the images at once? What would be a solution? One that crossed my mind is onClick every image goes in to the real size and using Javascript to disable the toolbars and then using keyarrows to navigate? Or is there a simpler way?
http://www.simpleviewer.net/postcardviewer/app/
Javascript / jquery would be best way to do so
MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it.
It places a square to the right of the image with the magnified portion of the image.
In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version.
The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work
refer http://www.nihilogic.dk/labs/mojozoom/
also refer 5 Amazing JavaScript Image Zoom Scripts
Related
I am trying to find out what the jquery control being used on the Google Nexus website is called: http://www.google.com/intl/all/nexus/5/
Basically as you scroll down the website, the image background changes to a new one. Its not really lazy loading.
It is also used here:http://www.flipkart.com/motorola/motox?otracker=ts_motorola_explore_motox
I can roll my own based on just manipulating z-indexes and scrolling sections on the website, but I would really like to know what this is called.
Figured out that is a variant of Parallax Scrolling
I am looking for a javascript zoom library, similar this
However, most ones out there require that you have thumbnails images for the unzoomed image which is a bit of an annoyance for me since I am only viewing 2-3 images per page and everything is preloaded.
Does anyone know of a similar library which would allow me to do this with a css scaled down version of my image rather than generating the thumnbails in the backend?
Thanks!
Yay for CSS3 transforms:
img.thumb {
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}
I'm using some javascript to make my images draggable
I want to be able to move my images over each other and create a similar effect to the multiply blending mode in photoshop.
I've seen how this is possible with static images, but I want these to change as they are moved around the screen, rather than just loading up with the effect already applied.
Is this possible within the canvas? Is there a better way?
Yes, it is possibile with Canvas and processing.js, but you will not be able to use your actual draggable plugin (it doesn't seem HTML5).
Read this http://processingjs.org/reference/blend_/ but remember Blending on Canvas could be very slow (it depends by images' resolution and by Browser' engine).
I want to create a custom video control, I mean over the video itself, with issues like double click on some x and y coordinates of the video to zoom In, but I can't get this result because the real player plugin API is not that flexible, then I Tried to create a transparent layer to handle those events and I can't achieve that the transparent layer sits on top of the video, I tried this list:
1.- Put a flash transparent movie over the real player plugin- not working the player breaks the z-Index and the video goes to the top.
2.- Put an Iframe transparent over the real player plugin- not working it puts on top, but when I make the Iframe transparent, the movie goes agains to the top.
3.- I tried to use the map html tag, also is not working.
4.-I tried to put and div absolute positioned, but z-index is not working.
I need some help with this topic.
thanks guys
There is no reliable way to force a browser to layer content on top of a plugin, because plugins like Flash just talk to the video/audio system rather directly and just paint in the bounding box the browser tells them to.
Obviously it's still experimental, and there's no IE support (without ChromeFrame), but was designed to solve exactly this problem.
If this was Flash you could use wmode=opaque or wmode=transparent as an alternative to the default wmode=windowed, which is much faster but causes problems with overlays like you describe. I've found no sign of an equivalent option for real player.
http://javafx.com/ would be my recommendation
I would avoid trying to mash several different technologies together to get what you want, It will make for a maintenance nightmare between different browsers and browser upgrades.
I think this is what you search for:
http://www.dynamicdrive.com/forums/showpost.php?s=4cc8a233f39321ad1ee9e01ec57a3bef&p=200817&postcount=10
You need the wmode = opaque to get the layer over the flash.
a place where you can find this working is, www.dtele.de .
If you open the navigation, you´ll see, tha it lays over the flash movie.
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).