Link a Title

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

[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?

[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.

[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.

[zobadof]

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

[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|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:

• https://github.com/n33/jquery.poptrox

Bye!

[zobadof]

Aha! It works, thank you very much :)

[jayshri.shah.10_1]

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

[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; 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.

[zobadof]

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

[cereal]

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