Develop Reference

Slider inside image

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

Zooming images on page load

I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").
If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?
Thanks
Maarten

I guess the easiest solution would be to use something like this : http://sliderjs.org/. Basically, you would put an empty place holder and load your image to some invisible div element.
Then, kick off a transition effect with a callback bound to your image's onload event.

You could use a canvas and put a picture on it. Evertything you would need for this can be found here:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Edit: If you want to use CSS3 you could use
#pix{width:200px;height:300px;transition: all 2s;}
#pic:hover{transform:scale(4) translate(100px,100px)}
This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds.
The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.

<img> blinks when src change in Firefox

I'm making a map that when you put mouse over a name in a list the <img>of the map change the src attribute to the map image with that zone highlighted, I only use the .attr() method of jquery to change it like this.
$("img.map").attr("src","newmap.png");
It works great in all browser but firefox, when the image change, first the old one disappear then there's a short time when there is nothing displayed and then the new image appears, how could I do this change smoothly in firefox like chrome or IE do??
(The time is really short but when moving the mouse through the directory the image disappear for the whole time the mouse is moving).
Or may be you know a better way to accomplish that effect. Thanks

Try preloading your images. The blink occurs as the new image is being loaded by the browser.

This happens because the src attribute has obviously changed. Well, the new image has not been downloaded yet. So it has to send a request to the server and wait for the response all while the src attribute has already changed. This is why you see nothing there for a bit. There are ways around this. In JavaScript, create a new image element with the new image as it's source. Add an onload event handler that will change the src attribute of the image you really want to show. Yes, this may be a bit more difficult the preloading, but it will decrease the initial page load time and it won't clutter your HTML.

Off the top of my head a combination of hover intent and a background image would help this.
The hover intent is good because you don't want to be downloading images unnecessarily.
If you give the containing div (or even the image itself) a background image of the original or last viewed image the flicker effect would be lessened. I suspect the load times for these image changes could vary so you could use this as an opportunity to show some sort of loading icon as well.
Having said all that I think it makes more sense to have the original image and then add a new image each time you hover an area. That way you can only add the image element when it doesn't already exist (saving http requests) and even do more graceful changes (fading over the original for instance)
Hope that helps!

The problem is that the browser is downloading the image when you first reference it, and not before.
I'd simply have two image elements and hide/show them instead of changing the src attribute of a single element.

HTML5 CSS3/Javascript Blur Mask

There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you

http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on

Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.

There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.

Need Images to maximize on mouseover in HTML pages

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.