Wrapping a div around each image and appending floating link

JavaScript
1

Hi, I am trying to absolutely append a floating link to each image in a div called “bob”.

My Code so far:

$(".bob").each(function(){
    $( "img" ).wrap( "<div class='img-wrapper'></div>" );
    $( ".img-wrapper" ).append( "<a href='#' class='img-button'>+</a>" );
});

I will do this with this style:

.img-wrapper {
    position:relative;
    display:inline-block;
    overflow:hidden;
}
.img-wrapper img {
    float:left;
    display:block;
}
.img-button {
    position:absolute;
    bottom:0;
    right:0;    
    background:#5ac2b4;
    padding: 10px;
    color:#FFF;
    text-align:center;
    text-decoration:none;
}

.img-button:hover {
    background:brown;
}
2

And what’s not working with it? What’s broken? We don’t have any information. Just from looking at that jQuery, it should be doing exactly what you tell it to.

3

Here it’s (not working) on fiddle…

4

Well your code is set to run with .bob{}, and your HTML has id=“bob”, which is #bob.

You need to change your HTML to be class=“bob”, not id=“bob”.

5

Also the jQuery you are running in that example is 1.6, which is extremely old. I changed your jQuery settings in jsfiddle to run an actual recent version, and combined with my above ^ advice, it works.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.