Classic ASP VBScript - Hide Lightbox/Fancybox TITLE from HTML5 tooltip

Hello, all.

Not sure which "Topic" to use, but since the page is in ASP, I'll start there, and include a couple of other "Topics".


I have an art gallery (www.dksart.com/art2.asp)

I am using an art gallery template called "Final Tiles Gallery" that uses Magnific lightbox and there is also a little Fancybox on the page.  (I know it's messy, but that's what I have to work with at the moment).

So, all is fine, except the TITLE (That I have to use for the lightbox to display my social icons at the bottom) displays in the HTML 5 tooltip.

I have tried to search online for how to remove/replace it, but I'm just not getting it to work.


Here is the snippet from my ASP repeat region, displaying the thumbs:
(I have the TITLE with a div for all my social icons to display at the bottom of the lightbox)


<% while not rsImages.EOF%>


                    <article class="tile ftg-<%=(rsImages.Fields.Item("imageCatClass").Value)%>">

                        <a target='_blank' class="tile-inner" href="<%=(rsImages.Fields.Item("imagePath").Value)%>" title="<div><a href='https://www.facebook.com/sharer/sharer.php?u=<%=siteurl%>'><img class='fancybox' src='images/fb-icon1.jpg''width='25' height='25' /></a><a href='http://twitter.com/intent/tweet?source=<%=twitterurl%>' ><img class='fancybox' src='images/twitter-icon.jpg''width='25' height='25' /></a><a href='http://www.tumblr.com/share/photo?source=<%=tumblrurl%>'><img class='fancybox' src='images/tumblr-icon.jpg''width='25' height='25' /></a><a href='http://www.reddit.com/submit?url=<%=redditurl%>'><img class='fancybox' src='images/reddit-icon.jpg''width='25' height='25' /></a><a href='https://plus.google.com/share?url=<%=googleurl%>'><img class='fancybox' src='images/google-plus-icon.png''width='25' height='25' /></a></div>">
                            <img class="item" src="<%=Replace((rsImages.Fields.Item("imagePath").Value),".","_thumb.")%>" />
                            
                        </a>

                    </article> 

<%
rsImages.MoveNext()
Wend
 %>

Open in new window



How can I get the TITLE to not pop up in the tooltip, or to hide it from the tooltip?


Thanks,
Shane
lshaneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott FellDeveloper & EE ModeratorCommented:
<% while not rsImages.EOF%>


                    <article class="tile ftg-<%=(rsImages.Fields.Item("imageCatClass").Value)%>">

                        <a target='_blank' class="tile-inner" href="<%=(rsImages.Fields.Item("imagePath").Value)%>" title="This is my title">
                            <img class="item" src="<%=Replace((rsImages.Fields.Item("imagePath").Value),".","_thumb.")%>" />
                            
                        </a>

                    </article> 

<%
rsImages.MoveNext()
Wend
 %>

Open in new window


Just edit the title
lshaneAuthor Commented:
Hi, padas.

Well, I probably didn't articulate clearly what I'm after...

I need the TITLE to have the DIV code in it, but... when hovering over the images, it displays all my DIV code - I don't want that - but I have to have the DIV code in order for my social icons to appear at the bottom of the enlarged image.

The lightbox needs the TITLE to display info below the image when it pops up.

My issue is that all the DIV code I am using inside the TITLE is being display in a tooltip when hovering over the thumbs (Which is, I guess, an HTML 5 thing), but I want that to be hidden from appearing in the tooltip.

Is that possible?
Scott FellDeveloper & EE ModeratorCommented:
The title tag is in part for the tool tip and that helps seeing impaired people who use screen readers.  

If you look at your documentation http://fancyapps.com/fancybox/#examples you will see the example on the proper way to use social buttons http://jsfiddle.net/G5TC3/

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';
                
                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
                
                // Add FaceBook like button

Open in new window

<a title="1st title" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a title="2nd title" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

Open in new window


I looked at your code very quickly.  One thing I noticed is how you are loading your js and css files.

First, load all of your css files.  Then load your js files where you load your jquery file first, then fancybox and the rest.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lshaneAuthor Commented:
Thanks for looking at it quickly.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.