CODEWITHSUNDEEP
javascriptjquerygalleria
dmanexe
dmanexe

Reputation: 1029

How to append HTML to images using JQuery?

I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.

I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.

This is the code I've got so far.

$("img#gallery").this.title.appendTo("img#gallery") { });

I'm trying to get the script to loop through all of the images and append the html.

I also don't know if I should be using .appendTo or .before and .after

Upvotes: 2

Views: 199

Answers (3)

Calvin Froedge
Calvin Froedge

Reputation: 16373

That approach will work. You're looking for the wrap function:

var title = $('#test').attr('title');

$('#test').wrap('<a href="'+title+'" />');

This $.each will let you iterate through a series:

<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />

$.each($(".test"), function() {
    var title = $(this).attr('title');
    $(this).wrap('<a href="'+title+'" />');
});

Upvotes: 2

mattacular
mattacular

Reputation: 1889

Use $.each to iterate through all the images you want to wrap and then use 

$('img#gallery').wrap('<a href='whatever'>)

to wrap it. It will automatically close the A tag.

Upvotes: 0

Bjorn
Bjorn

Reputation: 71970

You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.

Upvotes: 0

Related Questions