adding hyperlinks in a jquery gallery description area

Question

I'm using a jQuery plug-in called Elastislide which can be seen here: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

The problem I'm having is I'm trying to insert a hyperlink into the gallery image description area but it doesn't seem to allow any html coding to work in this area. Any way around this?

Relevant html code looks like this:

<div id="rg-gallery" class="rg-gallery">
   <div class="rg-thumbs">
   <!-- Elastislide Carousel Thumbnail Viewer -->
      <div class="es-carousel-wrapper">
         <div class="es-nav">
             <span class="es-nav-prev">Previous</span>
             <span class="es-nav-next">Next</span>
         </div>
         <div class="es-carousel">
            <ul>
              <li>
                 <a href="#">
                    <img src="images/print_thumbs/1.jpg" data-large="images/print_images/1.jpg" alt="image01" data-description="This is my text. would love a linked word on some of them" />
                 </a>
              </li>

score 1 · Answer 1 · answered Jan 23 '13 at 05:20

First off, your question is confusing - "I'm trying to insert a hyperlink into the gallery image description area" by that I assume that you are referring to the data-description attribute. If so, yes, you cannot add a hyperlink. To get around this you can add another data attribute to the img tag like so:

<img src="images/print_thumbs/1.jpg" data-large="images/print_images/1.jpg" alt="image01" data-description="This is my text. would love a linked word on some of them" data-extlink="http://www.google.com" />

And make use of the new attribute by altering your code, I will refer to http://tympanus.net/Tutorials/ResponsiveImageGallery/ since you have not provided your code. You will have to modify http://tympanus.net/Tutorials/ResponsiveImageGallery/js/gallery.js code:

var $thumb = $item.find('img'),
    largesrc    = $thumb.data('large'),
    title       = $thumb.data('description'),
    extlink = $thumb.data('extlink');

if( title )
    $rgGallery.find('div.rg-caption').show().children('p').empty().html( '<a href="'+extlink+'">'+title+'</a>' );

Great, thanks darshanags. That was the problem. Your info actually gave me a pretty good insight into how jquery works. Unfortunately it doesn't completely solve my problem (it seems every description now must have a link) but I think I can figure out a way around this with a bit of experimenting. Cheers! — david ross, Jan 23 '13 at 10:55
@davidross glad it helped. You are correct, my answer could only apply when the data-extlink attribute is present. I didn't want to clutter the code and provided only the bare minimum ;) I'm sure that you will be able to find your way around when the attribute is not present. Let me know if you need any help. Tip: when the data-extlink attribute is not present the extlink variable will be undefined. — darshanags, Jan 23 '13 at 12:19

score 0 · Answer 2 · answered Jan 23 '13 at 05:11

0

if( title ) $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

instead of .text use .html and in data-description enter in html link like google this is a shortcut way the better way would be to change this setting title = $thumb.data('description'); to whatever you want

but the first way is easier and should work

answered Jan 23 '13 at 05:11

James Daly

1,357
16
26

this is recommendation based on reading the documentation of the plug in - but in order to make link in this manner you have to change the .text setting to .html in order for the jQuery method to process html – James Daly Jan 23 '13 at 05:13
Thanks James but doesn't seem to work. When changing the code in the gallery.js file, and adding html code in the data-description, it displays the html code under the small gallery thumbnail as opposed to the description area and though it highlights on hover, doesn't actually go to anywhere. Also a bit curious on why the original designer used .text versus .html. Simpler? – david ross Jan 23 '13 at 05:39
I think it just being parsed incorrectly try only using one '' in data description - I know it can work if you run this code in firebug on my site http://dalydd.com/ $('#left_middle').attr("data-garbage", 'yes') x = $('#left_middle').attr('data-garbage'); $('#left_middle').html(x) it will replace the left content with a yes link that just goes to google – James Daly Jan 24 '13 at 00:12

score 0 · Answer 3 · edited Feb 02 '14 at 07:27

Actually that does work changing text to html. Just be sure to wrap the link in single quotes rather than double quotes. It's working like a charm. You can even use break tags.

So change this:

if( title ) $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

to this:

if( title ) $rgGallery.find('div.rg-caption').show().children('p').empty().html( title );

in the gallery.js and write your info like this in your html page:

<li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02"   data-description="A plaintful story from a sistering vale. <a href='http://www.google.com'>Link goes to Google</a>" /></li>

adding hyperlinks in a jquery gallery description area

3 Answers3