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 Click Here, any help is much appreciated. Thanks

Recommended Answers

All 10 Replies

Just to clarify...

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

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.

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.

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

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|http://mylink.tld/, 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!

commented: great job! +12

Aha! It works, thank you very much :)

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

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; http://chocants.co.uk/Home/ 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.

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

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.