I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image
Related
I want to create something where an image can be changed by using a slider. However it's not your ordinary carousel. I want an image, in this case a wireframe, and if you slide the slider from right to left another image, the actual mockup, appears. See the image below for an more acurate description
i know how to create a slider with javascript but i'm not sure how i'm going to achieve this effect using this.
Some resources found on Google:
http://zurb.com/playground/twentytwenty
https://juxtapose.knightlab.com/
https://github.com/kavyasukumar/imgSlider
https://github.com/koenoe/cocoen
https://github.com/CodyHouse/image-comparison-slider
https://github.com/slamcode/cato.js
https://github.com/jotform/before-after.js
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I am trying to create links from an HTML 5 canvas animation. How can I make a specific image in the canvas also a link?
Thank you!
The Canvas tag doesn't have link functionality, however you might be able to use javascript coding to manually link to a new page. Just add an onclick event that fires the link.
Also, the canvas won't know where your image is. So if the image is only taking up part of the canvas, you will need to check the mouse position to make sure the image is being clicked directly.
I would like to display image downloaded from specific URL using jquery ajax. How can I achieve it? (without setting image .src) I also need to rotate and scale that image.
You can create a <canvas> and populate it with an image. When loaded, the image can be rotated, scaled, drawn on, etc.
Here's a good tutorial that does exactly what you need.
In order to get this running in IE, I suggest using ExplorerCanvas.
To prevent the flicking of the image, you could first hide the image before loading and show it after the src have been loaded.
$('<img>').hide().attr('src', 'img_url').onload(function() {$(this).show()});
To rotate or do other mutation on the image, I sugguest use the Pixastic Library which is compatible across browsers.
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.