preview/enlarge/zoom image api for my laravel app - javascript

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

Related

Jquery modal imagen with zoom

I need to create a modal with image content and also, to zoom the image. I have 2 qualities of photos one is horrible and another is excellent. The idea is to see a preview of the bad image, but when clicking to see a good image and to zoom. I have tried to implement different modal plugins and zoom but none works correctly because as I post pictures. The'm getting from my database and go around with for all my records. As explained above I have two qualities of images, I do it because it is a selling software images. My idea is that only the administrator can see the image of good quality. That's why I want to do the lifting of the images by a modal and zoom to them.
For zoom? Because the images contain runners and each runners has a number. When the user wants to buy your images just simply to look up your race number and I give all pictures that contain it, but when the load manager pictures can deliver a number and is saved in the database connected to that image specific.
I was trying with this plugin that I seemed very good and worked, but not within a modal.
zoom img
and this modal Bootstrap that I found comfortable
modal
I do not need code, just need to know if there is any plugin to do more or less what I need, to take actions to the buttons and make a more or less clean a better quality image zoom.
Here is some zoom plugins:
enter link description here
Hope it helps;)

Image Magnifiers and Clickable Content

I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.

jQuery and Rails image tagging / rectangle selection

I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.

Tickets places selection with JavaScript

I need to write an web page where users can select a free seats in a different halls for an events. I prefer not to use flash and make it using only javascript. Is there any library or example that can help me do it?
Edit: I'm asking how to create a client-side UI
I don't know a library, but this actually might be a case of using image maps in a semantically-correct, compatible way. The <map> and area tags are valid even in HTML5, and provide you the convenience of the DOM.
I am actually after this too for interfacing to civiEvent, however, this seems to be nebulous 'roll your own' territory for some reason.
The following script + tutorial might give you some mileage:
http://dayg.wordpress.com/2008/04/17/php-101-a-simple-seat-reservation-system/
Please update this thread with whatever you find!
If you want to go fancier than an image map, you can create a table with one chair per each cell as the physical arrangement looks. You can change each chair's picture according to the state of the seat. You could get fancy and have the chairs image change to a highlighted color, say yellow, when they hover over it.
Image transitions are done very easily with JQuery, a Javscript library. Here's some resources for rollover images with JQuery : http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
The bad part about this is arranging the chairs, but JQuery is the easy part and it will make your page look fancier and more user friendly. Because with an image map, the actual image can't really change itself to show that seat 4321 has been taken (but you can certainly divulge this information via other means)

Flash based cropper like this, but with source or customizable?

I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.
http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....
I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.
Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)
I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer
I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.
This is also a nice once and its only $10.
http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.
Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image

Categories