Solved

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

Posted on 2014-01-07
4
1,209 Views
Last Modified: 2014-01-09
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
0
Comment
Question by:lshane
  • 2
  • 2
4 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39764254
<% 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
0
 

Author Comment

by:lshane
ID: 39764282
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?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39764297
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.
0
 

Author Closing Comment

by:lshane
ID: 39769637
Thanks for looking at it quickly.
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question