Solved

Magnify image when mouse click, or mouse over

Posted on 2014-03-26
2
488 Views
Last Modified: 2014-03-28
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
Comment
Question by:rflorencio
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
soupBoy earned 300 total points
ID: 39956783
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
 
LVL 27

Assisted Solution

by:skullnobrains
skullnobrains earned 200 total points
ID: 39961006
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question