Zoom function

[feuerballer]

I'd like to have a zoom function in the Reel Plugin. This function should load a second amount of product pictures in high-resolution while zooming is startet. Perfect would be something like on ajax-zoom[dot]com.

[pisi]

Hi,

so far such feature is far out of scope of my plugin. I'm considering such feature for more serious rewrite in version 2 (still in the clouds).

I encourage everyone to vote for this issue if you care.

.pisi

[ghost]

I can understand how this is not trivial to do -- but, it would be a great improvement! :-)

I would love to see the ability to include a tiled-image display; see example linked below. Cheers!

Patrick

http://patrickcheatham.com/projects/bone-clones-inc

[pisi]

I completely agree it would be a great feature. But as far as I know, all existing solutions employ a special dedicated server-side scripting, which serves the correct image tile according to what the client-side script requested. Please correct me if I'm wrong.

So far I haven't find any worth-it server-side match to Reel and God knows I don't want to write one myself ;) Only if it were written in Javascript for NodeJS or similar that would be cool!

This may be a good cooperation point - if someone would be willing to supply a decent server-side backend for such a functionality, it may help a lot.

Or maybe there already are good solutions (or standards) for tiling images I simply don't know of. Do you? ;)

Cheers,

.pisi

[cheater]

Hi, I need a feature like this - I have been using reel for the website i'm running but now there's a requirement to zoom and the only thing I could find is an absolute, terrible mess written in php.

Tiling the images up doesn't seem like a difficult job. A python script to do that could probably be made in under a day.

The basic idea is to use the filesystem, and to have something like the following structure. Say you have four images in your reel called 001.jpg, 002.jpg, 003.jpg, 004.jpg. They are zoomed out to some specific level, say 1/64 the usual size. Then you put them all in one dir and make subdirs called 001, 002, 003, 004. In each of those you have four images called 1.jpg, ..., 4.jpg. Each one is a quarter of the image (top right, top left, bottom left, bottom right is the standard) and each of them is zoomed in once, this means they are 1/32 the resolution of the original image. In this dir (say /001/) you also have subdirs called 1, ..., 4. In each of those subdirs you again have four images, and so on.

So you get something like this:

001.jpg
001/
 1.jpg
 1/
   1.jpg
   1/
      1.jpg
      2.jpg
      3.jpg
      4.jpg
   2.jpg
   2/
   3.jpg
   3/
   4.jpg
   4/
 2.jpg
 2/
 3.jpg
 3/
 4.jpg
 4/
002.jpg
002/
003.jpg
003/
004.jpg
004/

I am enjoying the use of jquery reel and really not enjoying the other thing at all. I don't know enough about jq to implement this feature in reel, but I can easily set up a tool that does the processing mentioned above.

HTH

[pisi]

Cheater,

very interesting proposal. If setting up of such processing tool would be that easy for you, I will very much appreciate if you go on and do build one. If I will have this available to play with and experiment, it would be really great and would sure bring me one step closer to actually implementing this in Reel. What do you say?

.pisi

[cheater]

https://bitbucket.org/cheater/zoom_tiles/

[cheater]

In fact, it turned out to be easier to do in bash - given that imagemagick has a good bash interface and we're working on files anyways, The usage of the script should be self-explanatory, there's a help text if you invoke it. Have fun! If you have any questions, shoot :)

[ghost]

On Jul 10, 2011, at 11:28 AM, cheater wrote:

In fact, it turned out to be easier to do in bash - given that imagemagick has a good bash interface and we're working on files anyways, The usage of the script should be self-explanatory, there's a help text if you invoke it. Have fun! If you have any questions, shoot :)

Reply to this email directly or view it on GitHub: https://github.com/pisi/Reel/issues/13#issuecomment-1542565

Hey there:

I'm getting a "You do not have access to this repository" error at bitbucket… Ideas?

Cheers,

Patrick

Patrick Cheatham patrick@patrickcheatham.com (415) 290-8185

Portfolio: http://patrickcheatham.com Facebook: http://facebook.com/360DegreePhotography Twitter: http://twitter.com/patrickcheatham

[cheater]

Sorry - try now :)

[pisi]

Awesome! Let me play with it. Looking forward :)

[dcu]

any news on this feature?

[feuerballer]

Hi,

I'm working on a solution. But it's not ready yet.

Rergards,

Florian Bube

any news on this feature?

---

Reply to this email directly or view it on GitHub: https://github.com/pisi/Reel/issues/13#issuecomment-3766705

[brianfrank22]

I am working on adding zooming functionality. I was struggling with the IE9 issue, but now I have that fixed. I am using another jquery plugin (http://jacklmoore.com/zoom/) and zooming on each frame of the rotation.

You just need to name the images using the standard convention.

I can try to post and maybe it will be helpful.

Thanks for the great plugin!

Brian

[DefCon2k]

Hello Brian,

I think zooming functionalitiy is a very interesting feature. Can you post the code or a demo link where we can see how it works?

Kind regards, Tobi

[brianfrank22]

Tobi,

I will get a demo together as soon as I can.

Thanks,

Brian

On Saturday, April 28, 2012 at 2:36 AM, DefCon2k wrote:

Hello Brian,

I think zooming functionalitiy is a very interesting feature. Can you post the code or a demo link where we can see how it works?

Kind regards, Tobi

---

Reply to this email directly or view it on GitHub: https://github.com/pisi/Reel/issues/13#issuecomment-5394859

[DefCon2k]

Hello Brian,

Sounds good to me!

Kind regards,

Tobi

[sebhaase]

this would be great !

[SNeilson]

A Zoom feature would be great, as the first thing I've been asked every time I show off the script is how to zoom in.

[pisi]

Guys, I am considering adding support for zoom.it. Didn't check the API yet, but it looks like a neat service, that might help with serving the zoomed images/tiles. What are your thoughts on this one?

[DefCon2k]

Hello,

this would be fantastic!

Kind regards, Tobi

[feuerballer]

Sounds interesting. Especially the Deepzoom feature. As an alternative maybe it would be good to have an independent zoom function.

[SNeilson]

Yeah this could be really good!

Wouldn't it be better to simply use an image that is twice the size of the 360 container on the page then use Jquery to adjust the size of the image from 50% to 100%, this would maintain the quality of the image? Or is this basically what the script does?

[pisi]

@SNeilson This is indeed the most simple option of them all, but at the same time, it would effectively double the bandwidth needs (let's call it the zoom tax). I am after a solution, which won't do that and where users who don't zoom won't "pay" this tax. Something like this however has to work in concert with some server-side solution, which would serve the images for the appropriate zoom level. And as I don't want to put this burden on back of my users, I'm looking for a ideally free on-line service like this one. Maybe there are even better services? Anybody?

[hron]

I can't tell for everyone, but I am pretty sure if we serve frames somehow (we have a server), we are able to serve zoom variant of frames too. Why do you think jquery.reel.js should use some external service like zoom.it?

I think we should just add some handler on click or separate button. This handler should request a zoomed variant of current frame from the place that was specified on initialization.

Do I miss something?

[pisi]

@hron, I know it looks like a simple trivial matter, at first. Sure, it is easy to say "I am zoomed in, give me the zoomed in view of the frame". But since Reel is about rotation and I'd like to maintain this focus, so a simple zoomed in /zoomed out solution with 2 frames won't work well. Reel is comprised of many images, typically 36 at least, it is not really desirable from a performance/bandwidth standpoint to load them all in the zoomed in state. There would be a huge overhead in loading all those frames. It would be far more effective to be served with just the general region of the frame you are actually viewing. Sure you can prepare several regions before hand, but that would mean a lot (and I mean a lot) additional preparation work for you, the developers and that's what I'm trying to avoid.

[Neelam2]

@brianfrank22, hi ...did u get a demo?? Or has any one a zoom feature for reel?? Be very helpful :)

[brianfrank22]

I will try to get one packaged and ready for distribution. Stay tuned...

Brian Frank Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Tuesday, February 26, 2013 at 11:45 AM, Neelam2 wrote:

@brianfrank22 (https://github.com/brianfrank22), hi ...did u get a demo?? Or has any one a zoom feature for reel?? Be very helpful :)

— Reply to this email directly or view it on GitHub (https://github.com/pisi/Reel/issues/13#issuecomment-14124986).

[Neelam2]

hi did u get the package..i need it immediately :)

[brianfrank22]

No I do not have it. I am trying to get it ready for release, but probably a week away.

On Thu, Mar 7, 2013 at 6:33 AM, Neelam2 notifications@github.com wrote:

hi did u get the package..i need it immediately :)

— Reply to this email directly or view it on GitHubhttps://github.com/pisi/Reel/issues/13#issuecomment-14555105 .

[Neelam2]

and can u give me an idea ...how to programm it for reel?? It helps me a lot..thanks

[feuerballer]

Hi everybody,

I just implemented a simple zoom function into the latest version of reel.

You can download it here (including an example): http://www.360grad-animationen.de/jq/jquery.reel.withzoom.zip

It uses a slider (jQueryUI-Element) and a mousewheel function. So I had to disable the standard mousewheel function. I guess there are a lot things that can be improved. So let's get started.

Next thing would be to implement a zoom feature using zoom tiles and different zoom layers.

[pisi]

Very cool! :+1: I noticed the withzoom branch here, which is now sadly erased. I totally encourage you to carry on and share the modifications for further work and comments. Looks promising :)

[abincg]

Hi feuerballer,

I tried to implement your code for reel with zoom on multi row sequence. But could not get the desired result. Can you help me on this..?

[abincg]

Hi feuerballer,

That just worked... Thanks for the code... :)

[slavik112211]

Would be great to see @feuerballer code integrated into reel 1.3

[nerdy-sam]

I second @slavik112211 and would love @feuerballer work in 1.3

[brandflugan]

Wow @feuerballer, this is awesome! Any way to make it only zoom in the middle so the image stays in position when you zoom out again? Also, is it possible to bind a button to work as the mouse wheel? Plus-sign to make it become larger and minus-sign to make it smaller? Thanks for the great implementation!

[jrok]

Did zooming end up in 1.3? Still not mentioned on the site. Is @feuerballer 's the only currently working version of zooming?

[feuerballer]

I included a deep zoom option into reel and thus also updated the standard zoom. Hopefully I can post it here in May'15 when I have some time to get it simplified.

[brandflugan]

@feuerballer Wow! Great news my friend! I'm really looking forward to see your post in May

[rahulrangali]

@brianfrank22 have you implemented zoom with reel. If so please help me with it. Thanks.

[feuerballer]

Hi everybody,

I just implemented a deepzoom function into the latest version of reel.

You can download it here (including an example): http://www.360grad-animationen.de/jq/jquery.reel.deepzoom.zip

It is based on WCS Tile Zoom Plugin of Evgeny Matsakov (https://github.com/ematsakov/tilezoom). I used the mousewheel function to zoom in and out. A double-click function or button function is not included yet but can be implemented easily.

I guess there are a lot things that can be improved. So let's get started.

[lebigsquare]

Hi everybody,

I managed to add zoom capability with elevatezoom.js : http://www.elevateweb.co.uk/image-zoom

Reel settings : steppable = false

Reel image container ( #image_reel ) onclick action : onclick="zoom()";

JS function : var zoomConfig = { zoomType: "lens", lensShape: "round", lensSize: 400 }; var zoom = function() { $this = $("#image_reel"); if ($this.hasClass('zoomed')) { $.removeData($this, 'elevateZoom'); $('.zoomContainer').remove(); $this.removeClass('zoomed'); } else { $this.elevateZoom(zoomConfig); $this.addClass('zoomed'); } }

Haven't got it to work on mobile yet...

best of luck ! :)

[nzo3d]

Hi, I'm using Feuerballer jquery.reel.deepzoom.zip script. Can you tell me how to add HTML buttons (plus,minus, home) under the player to control the zoom level? A bit like on this page http://labs.webcodingstudio.com/tilezoom/2dollars.html

It would be cool.