CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ceejay
Ceejay

Reputation: 7267

How to make the image zoom on click on button

I have an JQuery image zooming plugin, when i click on image, clicked part will zoom.

but i have css buttons at some parts of the image, when i click on that buttons, that part of image should zoom up.

But now it is not zooming when i click on those css buttons.

How can i do this?

i am using http://www.jacklmoore.com/zoom/ for zooming option.

Jquery code:

<script>
    $(document).ready(function(){    
        $('#ex4').zoom({ on:'toggle',duration: 500 });
    });

css for buttons

.f1 {
    left: 193px;
    position: relative;
    top: -400px;
}

.f2 {
    left: 166px;
    position: relative;
    top: -250px;
}

.f3 {
    left: 117px;
    position: relative;
    top: -180px;
}

.f4 {
    left: 425px;
    position: relative;
    top: -363px;
}

.f5 {
    left: 339px;
    position: relative;
    top: -375px;
}
</script>

html code for buttons

<span class="f1"><a href="#">1</a></span>
<span class="f2"><a href="#">2</a></span>
<span class="f3"><a href="#">3</a></span>
<span class="f4"><a href="#">4</a></span>
<span class="f5"><a href="#">5</a></span>
<span class="f6"><a href="#">6</a></span>
<span class="f7"><a href="#">7</a></span>
<span class="f8"><a href="#">8</a></span>
<span class="f9"><a href="#">9</a></span>
<span class="f10"><a href="#">10</a></span>

Upvotes: 0

Views: 2733

Answers (3)

YJ Chen
YJ Chen

Reputation: 119

is #ext4 an img element or other elements that accept html? please find the instruction here

Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like ‹a›, ‹span›, ‹li›, ‹div›, etc. This excludes ‹img› elements (see below).

Upvotes: 0

jasonscript
jasonscript

Reputation: 6170

$('#ex4') is jquery to get a button with the id of "ex4" You need to add similar zoom handlers for your css buttons too

You can do this using the jQuery class selector which is a dot:

$('#ex4').zoom({ on:'toggle',duration: 500 }); // your existing example
   ^ the # symbol means find an html element with this ID

$('.f1').zoom({ on:'toggle',duration: 500 }); // adds zoom to all elements with the f1 class
   ^ see the difference?

I don't know how you would zoom a particular area of the image

Upvotes: 0

mehmetakifalp
mehmetakifalp

Reputation: 455

May you need to use trigger() method. 

  $(".clickMe").click(function(){
      $(".hoverTrigger").trigger('mouseover');
  });

  $(".hoverTrigger").mouseover(function(){
      alert("mouseover");
  });

test it : http://jsfiddle.net/mehmetakifalp/4eqCV/

Upvotes: 1

Related Questions