CODEWITHSUNDEEP
javascriptjqueryzooming
Marcos Roriz Junior
Marcos Roriz Junior

Reputation: 4106

How to zoom in a group of element using jqzoom

I'm using Jqzoom to provide zoom for a given image. These images are placed side by side and each one have the same size. I want to find a way to make the same zoom happen on all images in the same time.

Code @ jsfiddle: http://jsfiddle.net/Fam43/23/

Sample IMG: enter image description here

Sample HTML code:

  <div>
    <!-- Omitted stuff here -->
    <a href="img1_big.png" class="zoom">
      <img src="img1.png" width="100%" />
    </a>
  </div>

  <div>      
    <!-- Omitted stuff here -->
    <a href="img2_big.png" class="zoom">
      <img src="img2.png" width="100%" />
    </a>
  </div>

  <div>
    <!-- Omitted stuff here -->
    <a href="img3_big.png" class="zoom">
        <img src="img3.png" width="100%" />
    </a>
  </div>

JQZoom function:

$('.zoom').jqzoom({
   zoomType: 'innerzoom'
});

Upvotes: 2

Views: 1038

Answers (1)

James Khoury
James Khoury

Reputation: 22319

After having a think about the situation i came up with the folowing:

in jqZoom 2.3 in the first section there is an $.extend(obj. { and one of the members is init: in that function replace the section setting the mouse events with:

At the end of the mouseenter mouseover event:

$(".zoomPad", el).bind('mouseenter mouseover', function(event) {
    // *snip
    if (settings.linked && event.srcElement === this) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseover');
    }
});

Change mouseleave function like so:

$(".zoomPad", el).bind('mouseleave', function(event, notSource) {
    obj.deactivate();
    if (settings.linked && !notSource) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseleave', [true]);
    }
});

the mouse move function needs to have the parameters changed and the code at the beginning and end of the function added:

$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
    if (thisx && thisy) {
        e = $.extend(e, {
            pageX: (thisx + this.offsetLeft),
            pageY: (thisy + this.offsetTop)
        });
    }

    // *snip*

    if (settings.linked && !(thisx && thisy)) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
    }
});

my example: http://jsfiddle.net/7FQHt/

Integrated OP's example: http://jsfiddle.net/Fam43/24/

You can even limit the linking to just one item: http://jsfiddle.net/Fam43/25/ OR http://jsfiddle.net/Fam43/26/

This might not make 100% sense to you and that is ok, just ask me a question. Some things make sense in my head and not yours.

Upvotes: 2

Related Questions