Results 1 to 4 of 4

Thread: Zoom in and out using Divs instead of images

  1. #1
    Join Date
    Sep 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Zoom in and out using Divs instead of images

    1) Script Title: Imagepanner.js

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

    3) Describe problem: Can this tool be used with DIVS as plus and minus icons?

    Currently we have (which works great):
    HTML Code:
    <img src="/Content/productdetails/zoom_in.png" width="17" height="16" id="zoom_in" title="Zoom In">
    But would like to do something like this:
    HTML Code:
    <div class="svg-container plus" id="zoom_in" title="Zoom In">  
                                <use xlink:href="#icon-plus"></use>
    </div>

    Please let me know if this is possible. Or if there is a version out there of this tool that is already setup to use, for example the click events of a div.

    This line makes me think it's not easily done.
    Code:
    magnifyicons: ['/Content/productdetails/zoom_in.png', '/Content/productdetails/zoom_out.png', 17, 16], //set path to zoom in/out images, plus their dimensions
    4) Also, does this tool work on mobile phones from within the browser? How responsive is this tool when the browser is re-sized.

    Please help. Thank so much, we've been using this tool for years and love it. I'd like to keep using it, but our new UI uses divs to display the zoom in and zoom out buttons. Thank you!
    Last edited by jscheuer1; 09-30-2014 at 12:31 AM. Reason: format code

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The script isn't mobile functional at the moment, no, but it's a good reminder there are still scripts that need to be updated on that front. Expect the updated script by the end of this week or start of the next. I'll address your other question then as well.
    DD Admin

  3. #3
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok, script has just been updated to v1.2, which adds mobile support. Just used the updated .js file listed on the script page, and also, add the following CSS rule to your existing style sheet to properly render the magnifying controls, which can now be any arbitrary HTML:

    Code:
    .pancontainer .zoomcontrols{ /* default CSS class for magnify controls within container */
    position:absolute;
    width: 30px;
    height: 30px;
    background: #eee;
    border: 1px solid gray;
    }
    DD Admin

  4. #4
    Join Date
    Sep 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HEy! Thanks for the fast response!

    This definitely helps, but I'm still faced with issues regarding switching from using magnify images, to just using divs clicks.

    Here's my markup:
    Code:
    <div class="svg-container plus" id="zoom_in" title="Zoom In">
                            <svg viewbox="0 0 100 100" preserveaspectratio="xMinYMin meet">
                                <use xlink:href="#icon-plus">
                                </use>
                            </svg>
                        </div>
                        <div class="svg-container minus" id="zoom_out" title="Zoom Out" >
                            <svg viewbox="0 0 100 100" preserveaspectratio="xMinYMin meet">
                                <use xlink:href="#icon-minus">
                                </use>
                            </svg>
                        </div>
                    </div>
    
    
    I'm trying to replace this with this:
    var $zoomimages = $(magnifyicons.join(''))
    with
    var $zoomimages = $('#zoom_in, #zoom_out')
    But this has strange results.

    Any suggestions would be amazing, thanks again!

Similar Threads

  1. Resolved Featured Image Zoomer (now w/Multi-Zoom) v2.1 and adding photo images dynamically
    By sidRiggins in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-09-2013, 04:59 PM
  2. Zoom .. Zoom... Multiple Images
    By juanko65 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-29-2013, 04:49 AM
  3. onmouseover zoom images
    By chechu in forum Looking for such a script or service
    Replies: 4
    Last Post: 10-04-2008, 05:04 PM
  4. Images overlapping divs
    By AdRock in forum CSS
    Replies: 1
    Last Post: 03-20-2007, 10:57 AM
  5. Images overlapping DIVs - please help
    By lyndalouise in forum CSS
    Replies: 3
    Last Post: 06-16-2005, 08:13 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
  •