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.
Related
For a website, when people load a page, there is an animation with buttons inside which appear. You can see a screenshot of the animation below.
Once the animation is finished, I want the user to be able to click on one of them. How can I do this ? Is existing a library, a suitable language, or a specific technology to complete this ?
Thank you
if possible, edit the video and crop it.
Add the buttons using simple HTML.
I’m sorry if that isn’t possible.
I'd say the easiest way to get the animation to respond to click events (like a button) would be to set up a mouse event listener in javascript, it will get fired every time someone clicks on the page.
Basically, within the click handler, you will compare the click location of the mouse to known screen coordinates of the buttons - if they match - trigger an event.
The hard bit comes with finding the coordinates of the buttons - very easy if the animation is drawn on a canvas - a bit harder if it's just an image.
I am unable to make it, I have used several things and I have wasted almost 2 days making this thing but still not get what my client wants
after seeing the image you might get the idea what I am looking for, I am trying to move the png image on click, what will happen is the png image on which a user click will take the place of previous png on front and the background will remain stable.
This is the link to the image:
http://tinypic.com/view.php?pic=9hj90h&s=8#.U1Shkld4Pcc
Thanks in advance.
are you searching for a carousel jquery plugin or are you trying to implement this yourself?
If you really want us to help, please provide a jsfiddle. I can only make assumptions and give some general advice; the background image should be a separate image from the images you want to translate (and make a transition). Each image needs its own click event (or an observer on the document). When the user clicks, find out which location the current image is at. Find the image the current image should be at. Get the location. Change the top/left style values of the image.
Of course, you will need a [browser-prefix]-transition: all 2s linear on each element that should transition
what i understand is that you want to basically set new css values to the image(-holder).
$('#yourelementid').animate(height= new_height, width=new_width, otherattr=new_attr)
if you already know the values you need it should be quite straight forward.
here is the man page for $.animate()
https://api.jquery.com/animate/
hint: in the site that you give as reference he uses a separate image to display on click rather to move the existing one to the center.
You can have an invisible element with absolute position on the center, and on click fill it with the selected image, and make it visible.
hope this helps
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.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
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.