• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 505
  • Last Modified:

Magnify image when mouse click, or mouse over

Wanted to that all the images in my website with name beginning by Cnt .... (Like CntImage1, CntImage2, ....), could increase the size automatically when click them.
0
rflorencio
Asked:
rflorencio
2 Solutions
 
soupBoyCommented:
Without a lot of information, here is a basic example I created: Using JQuery and CSS3 Scale to change image size

You could easily change the selector to work with image name instead of class by doing the following:
$('img[src*="/Cnt"]').on('click', function(){
//blah blah blah
});

Here is the code from my example:
HTML:
<ul>
    <li>
        <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" class="magnify" /> 
    </li>
    
    <li>
        <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" class="magnify" /> 
    </li>
    
    <li>
        <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" class="magnify" /> 
    </li>
    
    <li>
        <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" class="magnify" /> 
    </li>
</ul>

Open in new window

CSS:
ul{
    list-style-type: none;
}
img{
    width: 150px;
}
.clicked{
    transform:scale(1.5, 1.5);
    -webkit-transform:scale(1.5, 1.5);
}

Open in new window

Javascript (JQuery):
$('.magnify').on('click', function(){
   $(this).toggleClass('clicked');
    $('.magnify').not($(this)).each(function(i,v){
       $(v).removeClass('clicked'); 
    });
});

Open in new window


Let me know if this doesn't work for you!

- Chris
0
 
skullnobrainsCommented:
or simply ?

$('img[src*="/Cnt"]').on('click', function(){
  $(this).css('transform','scale(1.5, 1.5)');
});

or without relying on css3

$('img[src*="/Cnt"]').on('click', function(){
  $(this).width($(this).width()*1.5);
  $(this).height($(this).height()*1.5);
});
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now