Member Avatar for zobadof

Hi,

So recently I downloaded a template and I'm wondering if its possible to link a title="#" to a video on YouTube, not embed, simply link it.

<div class="3u"><a href="images/fulls/01.jpg" class="image full"><img src="images/thumbs/01.jpg" alt="" title="Halloween 2013"></a></div>

Thats the code in question, I can't change the <a href="images/full/01.jpg" .... > because that's what it uses when you click it o make it bigger. However, when you click it, there is the title, in this case, "Halloween 2013", I want that to be a link. How would I go about doing this without changing how you look at the picture?

If you need to see the site, its at , any help is much appreciated. Thanks

  • 4 Contributors
  • 10 Replies
  • 215 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by cereal

Dani AI

Generated

A small, maintainable pattern that avoids stuffing HTML into the title attribute: keep the existing lightbox anchor exactly as-is, store the YouTube URL on the thumbnail (or its parent) with a data attribute, and then have the gallery/caption code append a safe DOM-created link when the popup caption is rendered. This keeps tooltips and browser behavior intact, avoids the browser showing raw HTML in title, and makes the markup easier to debug and upgrade later (no core plugin string-parsing hacks required).

Example: put the video URL on the image element using a data attribute (replace the selector/attribute names to match your template):

<img src="images/thumbs/01.jpg" alt="Halloween 2013" data-video="https://youtu.be/uci_1MYA2J8" data-caption="Halloween 2013">

Then, after the lightbox sets the caption, call a small function that reads that attribute and appends a link element (use DOM APIs, not innerHTML, to avoid XSS):

function appendVideoLinkToCaption(captionEl, sourceEl) {
  var video = sourceEl && sourceEl.dataset && sourceEl.dataset.video;
  if (!video || !/^https?:\/\//i.test(video)) return;
  var a = document.createElement('a');
  a.href = video;
  a.target = '_blank';
  a.rel = 'noopener noreferrer';
  a.textContent = sourceEl.dataset.caption || 'Watch on YouTube';
  captionEl.appendChild(document.createTextNode(' '));
  captionEl.appendChild(a);
}

Notes and troubleshooting

  • Use textContent/DOM methods to avoid injecting untrusted HTML. Validate the URL (basic https? check or a YouTube-domain regex) before creating the link.
  • If you edit third-party plugin files, keep a backup and prefer using plugin callbacks or event hooks so updates won’t overwrite your change.
  • Bad HTML can produce odd behavior — check for missing closing tags (as discovered) with your browser dev tools.
  • For accessibility, ensure the link text is descriptive or provide aria-label.

Recommended Answers

All 10 Replies

Member Avatar for JorgeM

Just to clarify...

What do you want to show for the link and what do you want to happen/where to go when clicked?

Member Avatar for zobadof

Hi,

Just want the "Halloween 2013" to be a normal link that goes to the Youtube video on YouTube.com, the same as links are on the rest of the site, with the little dots underneath.

Member Avatar for JorgeM

Ah I see what you are saying now. I'm on my mobile so I can't see the source but it looks like based on the behavior that you are using a plug-in to open the pics and use the title attribute to display a message under the pic.

Have you tried to embed HTML markup in the title attribute? For example...

 title="<a href='youtube.com'>Halloween 2013</a>"

Note the use of apostrophes.

Member Avatar for zobadof

Yeah, that was the first thing I tried and it just put it as the actual code.

Member Avatar for cereal

Hi, I'm not sure this is the best solution, but if you open the file jquery.poptrox.js, at line 253 you will find:

_caption
    .on('update', function(e, s) {

        if (!s || s.length == 0)
            s = settings.popupBlankCaptionText;

            _caption.html(s);

    });

Change it to:

_caption
    .on('update', function(e, s) {

        if (!s || s.length == 0)
            s = settings.popupBlankCaptionText;

        if(s.indexOf('|') != -1)
        {
            var part = s.split('|');
            var a = $('<a>', {
                text:$.trim(part[0]),
                href:$.trim(part[1])
            });
        }
        else
        {
            var a = s;
        }

        _caption.html(a);

    });

Then in the title attribute of the image tag set the text and the link separated by the pipe character |, so Title|, example:

<img title="Halloween 2013|https://youtu.be/uci_1MYA2J8" src="image.jpg" />

The above modification will check if there is the pipe | character in the title attribute, if this is matched then it will attemp to create a link, otherwise it will return plain-text.

The $.trim() function will remove extra spaces, in case you want to use them near the pipe:

Halloween 2013 | https://youtu.be/uci_1MYA2J8

Note: for the edit I'm referring to the current version of poptrox.js:

Bye!

Edited by cereal
commented: great job! +12
Member Avatar for zobadof

Aha! It works, thank you very much :)

Member Avatar for jayshri.shah.10_1

it is nice sharing..i too hv same problem..thanks a lot guys.

Member Avatar for zobadof

So, this was all working very well until I got to the second line. Now I'm on the second line things have gone all weird and not working.

As you can see here; the same thing is not working for the second line. Is there an easy way to fix this?

I'm referring to the "YouTube Video's" section with the images.

Edited by zobadof
Member Avatar for zobadof

Typical me being an idiot and didn't realize I missed off "</div>".

Member Avatar for cereal

Hehe don't worry, it happens to do a mistake! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.