CODEWITHSUNDEEP
javascripthover
M Ismail
M Ismail

Reputation: 23

Same javascript event for different images?

I have an image that when hover, a div with an overlay will fade in and out. 

<div id="img-one">
    <div id="overlay-one">
          <div class="card-overlay-text">
              <p>Enlarge Image<p></div>
         </div>
    <img src="assets/img/card_one.jpg" alt="" />
</div>

However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.

The code only run on individual image only?

$(function() {
   $('#img-one').hover(function() { 
     $('#overlay-one').stop(true,true).fadeIn(); 
   }, function() { 
     $('#overlay-one').stop(true,true).fadeOut(); 
   });
});

Upvotes: 2

Views: 79

Answers (4)

Nenomaz
Nenomaz

Reputation: 19

You can try with the jQuery Easy Overlay Plugin http://eivissapp.github.io/jquery-easy-overlay/

In the code, you should assign a class to the images, and call this statement (that will work for each image):

jQuery("img.yourclass").hover(function(){
    jQuery(this).easyOverlay("start");
}, function(){
    jQuery(this).easyOverlay("stop");
});

If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):

jQuery.fn.easyOverlay.options = { spin: false }

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15566

It is recommended to use classes because that is what classes are for and id's are not.

If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay

$(function() {
   $('div[id^=img]').hover(function() { 
     $('div[id^=overlay]',this).stop(true,true).fadeIn(); 
   }, function() { 
     $('div[id^=overlay]',this).stop(true,true).fadeOut(); 
   });
});
div[id^=img]{
  position: relative;
  height:100px;
  width:100px;
  border:1px solid black;
  margin:2px;
  }

div[id^=img] > div[id^=overlay]{
  position:absolute;
  background:rgba(0,0,0,.2);
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
  width:100px;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
    <div id="overlay-one">
          <div class="card-overlay-text">
              <p>Enlarge Image 1<p></div>
         </div>
    <img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>

<div id="img-two">
    <div id="overlay-two">
          <div class="card-overlay-text">
              <p>Enlarge Image 2<p></div>
         </div>
    <img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Use general class in all the image containers div's and overlay div's, like :

<div id="img-one" class='img-container'>
    <div id="overlay-one" class='overlay'>
         ...
    </div>
</div>

Then adjust you JS code to invoke just related overlay :

$(function() {
   $('.img-container').hover(function() { 
     $('.overlay', this).stop(true,true).fadeIn(); 
   }, function() { 
     $('.overlay', this).stop(true,true).fadeOut(); 
   });
});

Hope this helps.

$(function() {
  $('.img-container').hover(function() { 
    $('.overlay', this).stop(true,true).fadeIn(); 
  }, function() { 
    $('.overlay', this).stop(true,true).fadeOut(); 
  });
});
.img-container{
   background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
  <div class='overlay'>
    <div class="card-overlay-text">
      <p>Enlarge Image 1<p></div>
  </div>
</div>

<div class='img-container'>
  <div class='overlay'>
    <div class="card-overlay-text">
      <p>Enlarge Image 2<p></div>
  </div>
</div>

<div class='img-container'>
  <div class='overlay'>
    <div class="card-overlay-text">
      <p>Enlarge Image 3<p></div>
  </div>
</div>

Upvotes: 2

Mister Spock
Mister Spock

Reputation: 231

You'll better use classes. Then do something like this:

$('.main-container').find('.div-class-name').forEach(function(el) {
    <bind a handler for each consequent element here>
});

You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.

Upvotes: 1

Related Questions