png image transition on click with stable background - javascript

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

Related

On click have a second image zoom into place and cover the previous image

I have an image of a map area. I also have a second image which is a zoomed in area of the same map. I want to click a button and have the second image replace the first one, but I want some kind of an animation zoom effect to take place, also it would be nice to have a reverse animation effect for when the user clicks to see the entire map. I have no idea what approach to take on this. Any help would be much appreciated. Thank you guys!
The map image I use is a very stylized and minimalistic version of an actual map so I really rather just due some simple image manipulation and not use a real map api.
If there's a way to use a larger image and be able to click on a mapped area inside the image and have it zoom in and out, that I think would be the best way to handle this.

Member action popup

So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.

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.

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.

Image Zoom using javascript?

Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.

Categories

Resources