Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-01-07
4
Medium Priority
?
1,254 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 54

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

636 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