Results 1 to 10 of 10

Thread: Power zoomer issue

  1. #1
    Join Date
    Dec 2015
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Power zoomer issue

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2015
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Dec 2015
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    When you click on Add Magnifier i am calling addPZoom
    Code:
    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
    Code:
      var tdmasterimage = document.getElementById("masterimage");
     tdmasterimage.className = "rot90"; // if 90 degree rotate
    Css class
    Code:
            .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
    Code:
    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
    Last edited by Beverleyh; 12-30-2015 at 12:06 PM. Reason: Formatting

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Dec 2015
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Last edited by Beverleyh; 01-01-2016 at 09:32 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  9. #9
    Join Date
    Dec 2015
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Last edited by Beverleyh; 01-01-2016 at 01:09 PM. Reason: Fixed broken link
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Power Zoomer in a PHP environment
    By Duragroup in forum JavaScript
    Replies: 12
    Last Post: 04-30-2012, 05:42 PM
  2. Bug with Image Power Zoomer v1.1
    By spuddle in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-08-2011, 07:24 PM
  3. DD Power Zoomer
    By maddorris in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-18-2011, 05:03 PM
  4. PHP & Image Power Zoomer
    By funkfact in forum PHP
    Replies: 1
    Last Post: 11-17-2010, 06:36 PM
  5. Assistane with Power Zoomer
    By jofan in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-21-2010, 07:24 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •