I'm essentially trying to click on profile pictures and have a card show up with a description below each profile picture. Here is a mock-up of what I am attempting. I have tried several things (using the global on-click JavaScript functionality) but I am struggling to format correctly.
What approach would you take to implement something like this:
Related
I'm currently working on a website where you can order a cup with an image printed on it. You can compose the shown image from a few options and based on the selected inputs, we create a preview of the image that will be printed. After all, this could look like this:
However, in real-life, the image wouldn't be flat, but it would follow the curvature of the cup. And look more like this:
Since the original image is composed of several layers of img-tags which are inside a div, I hoped that I could apply some CSS transformation on the div to "skew" the div to take this cylindrical shape.
Unfortunately, I haven't found a good soluction yet, therefore asking all of you :)
I am making my website and I want to show some images on it in small area, say in a 300x300 <div>.
What I want is that the images can be previewed/enlarged when someone clicks on them, so that the user can have a better and bigger view of the image.
For ex.- when you click a product image on flipkart.com / jabong.com, you can see an enlarge view of the image. In flipkart, it magnifies the image, and in jabong, you can rollover the image(which is kind of a zoom).
I have searched a lot over google for some kind of API for this but I couldn't find anything. So, my question is - 'Is there an API which could do this kind of job? If not, then how is can this be implemented? Especially, what jabong does - rolling over the image'.
If there are no APIs, please guide me on how this can be implemented. I don't want any code for implementation. Just give me some good pointers to follow.
You're probably looking for something like this:
Magnifier.js
If this doesn't fit your needs.. a Google Search will reveal a few suggestions:
jquery-zoom-effect-plugins
So I'm working an a little game that is online. It's a probability game and I'd like to have a few slides that have information and then the actual game. I'm using html & javascript to make the game and then css (which I don't know yet) to make it look better.
How would I go about creating different pages, should I just have an image and then make it opaque when I don't need it and then show another one over it?
The reason I'm asking is because I'm sure there is a much better way to do this but don't know how because I'm new to web coding.
you can make two separated pages.
contain the images one after another .. first image will have JS onclick .. on this function you will hide this image and show the other image
second image will be treated like link to the game page.
I want an image slider similar to what is shown in the link below.
http://blog.dreamcss.com/wp-content/uploads/example/
I have customized the script to my needs but I'm not able to find a way to change the image transition effect, rather than moving image from right to left I want image to dissolve & show other image that would make this script really code. I am open to new jQuery based Image Effect Slider/Gallery With similar look. This is the client's request so the design will remain same.
I would appreciate if i can change the image effect or if some one can provide me link for similar image slider.
I have to use this with ASP.Net and possible modify this script to integrated with database using c#
Thanks in Advance..
I use Flex slider http://flex.madebymufffin.com/ , it is very customisable and lightweight and should do what you want
Take a look at these Javascript Image and Photo Galleries. I would recommend using the existing APIs provided by these script libraries using JSON to pass data to the client from the server as opposed to modifying the script -- keeps it simple.
Alternatively, you could look at some of the stuff on CodePlex: Image Gallery if you wanted a server control to use with your solution.
I'd like to display the image, then let the user create multiple rubber-band selections on the image. Each mouse-down creates an additional selection. Has anyone seen an implementation of this technique in javascript?
I did use this image cropper script. It uses a rubber band to select the crop area. The code is pretty simple to follow and you could probably modify it to do what you want. Selecting overlapping areas would probably be a bit of a challenge though.
Script: JavaScript Image Cropper UI, using Prototype & script.aculo.us