Adding hover title to tab image gallery with jquery

Question

I have set up a gallery like this one by W3Schools but with jquery instead of javascript as shown here.

I have a problem with a modification, maybe someone can help: I added mousover titles using the images alt tag to the thumbnails using the following code:

//show alt as title on hover
var alt;
var $imgElem = $('.column img');

$imgElem.each(function(){
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
});

which works fine with the css

.column {
position:relative;
}
.column h2 {
position:absolute;
top:0;left:0;
width:420px;
background:#EDE9D6;
font-size:38px;
line-height:90px;
padding:0 30px;
box-sizing:border-box;
opacity:0;
cursor:pointer;
}
.column:hover h2 {
opacity:1;
}

Now the problem is that the title, when visible, doesn't have the onclick function for changing the expanded images. Does anybody have an idea how to add that function to the h2 headlines? I tried the following, but it didn't work (image is always the same):

$(".column h2").click(function() {
        console.clear();
        var newclass = $(".column img").attr("src");
        console.log(newclass);
        var oldclass = $("#expandedImg").attr("id");
        console.log(oldclass);
        
        $(".stage").show();

        $("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
        //set new source and hide element in order to be able to fade it in again

    });

Here's the html:

<div class="stage">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div> 
<div id="column1" class="column">
  <img src="train.jpg" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="bike.jpg" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="cake.jpg" alt="cake" title="cake" />
</div>

Thanks for any help and ideas.

score 1 · Accepted Answer · edited May 07 '21 at 18:05

so there are a few problems in your code altogether.

You do not need the Global alt var up top, you are creating dynamic elements via Jquery there with the h2 tag.

So in that case you also want to use

$(document).on('click','.column h2',function(){

});

instead of

$(".column h2").click(function() {

});

In order to prevent event bubbling with dynamically created elements, and especially if you want to load the click event in a different js file.

Also

//var oldclass = $("#expandedImg").attr("id");
//console.log(oldclass);

does not do anything except console log the id attribute, it doesn't serve any function.

in the HTML I added a style attribute display:none since you are trying to show it then have a fade in afterwards.

<div class="stage" style="display:none">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div>

In the click event I changed

var newclass = $(this).siblings("img").attr("src");

Since you are doing an on click event for .column h2 you want to make sure you use $(this) to identify which one you are click, then traverse to the sibling of this which will be the "img"

Next I modified this line

$("#expandedImg").hide().attr('src', newclass).fadeIn(5000);

You want to hide the img id first as you requested, then set the source attribute to the newclass var which is again is grabbing the sibling of $(this) on click event. Then you fadein I set it to 5000 but you can change it back to "slow"

All together these are the changes

<style>

.column {
position:relative;
}

.column h2 {
position:absolute;
top:0;left:0;
width:420px;
background:#EDE9D6;
font-size:38px;
line-height:90px;
padding:0 30px;
box-sizing:border-box;
opacity:0;
cursor:pointer;
}


.column:hover h2 {
opacity:1;
}

</style>

<div class="stage" style="display:none">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div> 
<div id="column1" class="column">
  <img src="https://via.placeholder.com/350x300" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/350x200" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/350x100" alt="cake" title="cake" />
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

//show alt as title on hover


$('.column img').each(function(){
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
});



$(document).on('click','.column h2',function(){

        console.clear();
        
        var newclass = $(this).siblings("img").attr("src");
        console.log(newclass);
        
        //var oldclass = $("#expandedImg").attr("id");
        //console.log(oldclass);
        
        $(".stage").show();

        $("#expandedImg").hide().attr('src', newclass).fadeIn(5000);
        //set new source and hide element in order to be able to fade it in again

});

</script>

I used an HTML placeholder image

https://via.placeholder.com/350x300
https://via.placeholder.com/350x200
https://via.placeholder.com/350x100

To demonstrate and see easily that the images are changing source

Thank you so much, this does exactly what I wanted, also the explanations help me a lot understanding how it was done. I indeed changed the fadein back to "slow", because otherwise it got mixed up/doubled with the value on the img click event. Now everythings works as expected. Great! — ISB, May 08 '21 at 23:20

Bernhard Beatus · Answer 2 · 2021-05-07T17:59:12.980

var alt;
var $imgElem = $('.column img');

$imgElem.each(function(){
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
});

$(".column h2").on("click", function(){ alert('Hello') });

.column {
  position: relative;
}

.column h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  background: #EDE9D6;
  font-size: 38px;
  line-height: 90px;
  padding: 0 30px;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;
}

.column:hover h2 {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stage">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div>
<div id="column1" class="column">
  <img src="https://via.placeholder.com/150" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/150g" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/150" alt="cake" title="cake" />
</div>

Now you have a click event on the h2. What do you want exactly? Maybe you can explain it more detailed.

Thanks for your effort, the following answer does exactly what I wanted. — ISB, May 08 '21 at 23:14

Adding hover title to tab image gallery with jquery

2 Answers2

Linked