Solved

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

Posted on 2014-01-07
4
1,200 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
Comment Utility
<% 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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for looking at it quickly.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
css, html 6 29
dynamics crm 2011 - Web Resources 1 24
Ajax control editor 4 31
SQL to update characters in table column 6 25
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now