Power zoomer issue

[Hiren]

1) Script Title: Power zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...owerzoomer.htm

3) Describe problem:
I am using http://www.dynamicdrive.com/dynamici...owerzoomer.htm in my test environment once everything work then only i can move to live.
I have implemented code to for magnifier after that if I rotate the magnifier still uses the original image – see below. May I know how can i resolved it ?

http://prntscr.com/9k520l

[Beverleyh]

Unfortunately we can't troubleshoot an image. Please setup and post a link to a live test page so that we can check the problematic code first hand.

[Hiren]

Demo URL : http://mhp2014-001-site1.btempurl.co...e%20Viewer.htm

select any image from left hand side will show on right hand box.

After that on top bar there is called "Add Magnifier " click on this will activate the power zoomer functionality

After that click on "rotate" button and check the power zoomer functionality will remain same with original loaded image. same for if we zoom in and zoom also.

Please let me know if you required more information.

thanks
hiren

[Beverleyh]

We only need the pertinent code - just enough to demonstrate the problem. Asking volunteers to wade through lots of other code will discourage people from helping troubleshoot your problem.

Proving a *reduced* code example will increase the likelihood of receiving help.

[Hiren]

When you click on Add Magnifier i am calling addPZoom

function addPZoom(ctrl) {
            var imgdata = document.getElementById("masterimage"); ///  Image Id
            masterReset();

            if (ctrl.value == "Add Magnifier") {
                // return imgdata.each(function () { //return jQuery obj

                if (imgdata.tagName != "IMG")
                    return true //skip to next matched element
                if (typeof options == "undefined")
                    options = {}
                if (options.largeimage && options.largeimage.length > 0) { //preload large image?
                    options.preloadimg = new Image()
                    options.preloadimg.src = options.largeimage
                }
                var $imgref = $(imgdata)
                options.largeimagesrc = (options.preloadimg) ? options.preloadimg.src : $imgref.attr('src')
                if (parseInt(imgdata.style.width) > 0 && parseInt(imgdata.style.height) > 0) //if image has explicit CSS width/height defined
                    ddpowerzoomer.setupimage($, imgdata, options)
                else if (imgdata.complete) { //account for IE not firing image.onload
                    ddpowerzoomer.setupimage($, imgdata, options)
                }
                else {
                    $imgref.bind('load', function () {
                        ddpowerzoomer.setupimage($, imgdata, options)
                    })
                }
                ctrl.value = "Remove Magnifier";
                showhidezoom('show');
            }
            else {
                showhidezoom('hide');
                ctrl.value = "Add Magnifier";
            }
            // })

        }
//Remove Magnfier
        function showhidezoom(action) {
            ddpowerzoomer.$magnifier.outer.css({ visibility: (action == "show") ? "visible" : "hidden" })
        }

----------------------ROTATE --------------

While click on Rotate button we are changing the classname depends on roate degree

  var tdmasterimage = document.getElementById("masterimage");
 tdmasterimage.className = "rot90"; // if 90 degree rotate

Css class

        .rot90 {
            -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
            -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
            /*-moz-transform-origin: right top; */
            -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
            -o-transform: translateY(-100%) rotate(90deg); /* Opera */
            transform: translateY(-100%) rotate(90deg); /* W3C */
            -webkit-transform-origin: left bottom;
            -moz-transform-origin: left bottom;
            -ms-transform-origin: left bottom;
            -o-transform-origin: left bottom;
            transform-origin: left bottom;
        }

-------------------- Zoom in and Zoom OUT ------------------

on Zoom in and zoom out dyanmically set the image height and width from javascript

var tdmasterimage = document.getElementById("masterimage");
tdmasterimage.style.width = parseFloat(actualwidth) * parseFloat(currentsize) / 100 + "px";
tdmasterimage.style.height = parseFloat(actualheight) * parseFloat(currentsize) / 100 + "px";

Please let me know if you required more information.

Thanks
Hiren

[Beverleyh]

A reduced test page showing ONLY the pertinent JS, HTML, and CSS will make it easier for others to make suggestions, but if you're happy that you've included everything in those code blocks and in the complete page, and you don't mind waiting for somebody to work through the information provided, great. I've formatted the code here to help visually. Good luck.

Thinking out loud, I'm guessing the rotate action is screwing with the X and Y magnify coordinates that have already loaded via JS in the browser. CSS isn't going to change that. Maybe focus on rewriting the javascript functions to flip the coordinates once rotate is activated?

Alternatively, you could scrap the idea of rotating with CSS and try loading 2 sets of zoomers, each with different physical images - one with images the right way up, and the other with images at 90degs but the latter hidden with CSS. Then when rotate is activated, switch CSS visibility by hiding the vertical zoomer and revealing the 90deg zoomer?

[Hiren]

Hello,

here i code link : Download Code the full JS, HTML and CSS file where having the issue.

Please check and let me know your feedback as soon as possible.

Thanks
Hiren

[Beverleyh]

The fastest option - the workaround - would be to try something like I suggested above; use 2 sets of images in 2 zoomers (one set the right way of and another set at 90 degrees)

The other option would be to rewrite the JavaScript but I believe that that there would be quite a bit of work involved - like I said before, I'm guessing that it will involve rotating the magnified overlay and also flipping the X and Y coordinates so that they calculate and track appropriately from the new rotation point. At this stage I think your options are;

1. Wait to see if somebody is willing to rewrite the JavaScript for you, in their own time and free of charge.
2. Try the workaround mentioned above and see if that is an option.
3. Rewrite the JavaScript yourself, focusing on flipping the X and Y coordinates.
4. Hire a developer to do the work for you - try externally or in our DD Scripts Paid Help Forum http://www.dynamicdrive.com/forums/f...ipts-Paid-Help

In your shoes, being as you requested help as soon as possible, I would go for option 4

[Hiren]

hello ,

Thanks for quick reply but fast solution you have provide will not work because example i have given for rotate all the way by 360 degaree mean 90,180,270 and 360 means i have to keep all the images seperatly. also while i am zoom in and zoom out means increase the width or decrease the width also do i need to set up the separate image.

In my images are dynamically which has been be upload by client.

So in that case how you below solution work.

"The fastest option - the workaround - would be to try something like I suggested above; use 2 sets of images in 2 zoomers (one set the right way of and another set at 90 degrees) "

Thanks
Hiren

[Beverleyh]

You didn't originally say that there should be 4 rotation points or that the images would be uploaded by a user. In that case, I don't think my suggestion would work.

Looks like these would now be your options;

1. Wait to see if somebody is willing to rewrite the JavaScript for you, in their own time and free of charge.
2. Try the workaround mentioned above and see if that is an option.
3. Rewrite the JavaScript yourself, focusing on flipping the X and Y coordinates.
4. Hire a developer to do the work for you - try externally or in our DD Scripts Paid Help Forum http://www.dynamicdrive.com/forums/f...ipts-Paid-Help

Given that you requested help as soon as possible, I think option 4 would be your best bet.