Hide Image Title in Slimbox - javascript

My issue is a lot like this solved thread, except I'm using Slimbox 2:
Hide Image Title Tool Tip Popup on Mouse Rollover or Hover
When you hover over an image, the "Title" attribute pops up. I need HTML in my image title in Slimbox. So, of course, when you're hovering, the "Title" attribute shows all the HTML code. The code works perfectly when you're viewing the image in Slimbox so no problems there. I just need the Title attribute to be hidden/modified not to show this HTML code.
I tried to change Q.title in slimbox.js to something else (like captionname). Then changed the HTML to call for:
<img src="images/team/small.jpg" class ="headline" border="1" hspace="2" />
"Joe Smith" displays as the Title but when you view the image in Slimbox, captionname does not come up at all and neither does the Title. It's just blank where it should be.
What do I need to modify in slimbox2.js to make this work?

you should indeed use the linkMapper option of slimbox (a function that you can pass as an optional parameter) to override the default behaviour of slimbox, which uses the title attribute of your hyperlink for the caption of the box
this way you can use any standard attribute, say 'alt', or even better a custom one like 'slimboxcaption' to make sure no browser will display its content;
to define the matching attribute use the getAttribute of the 'el' node passed to the function
replace the default "jQuery(function($)" call in your slimbox .js file with this
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
then you can use this to pass any html content to the box while hiding it for the user hovering over the link
<img src="/myimage_small.jpg"/>

I would leave the title property alone for accessibility purposes, and modify slimbox.js to read the title attribute immediately on page load, store it in a custom property (called "caption" or something), and them programmatically remove the title attribute to prevent the tooltip. Of course this implies that the rest of the code that references the title property needs to be changed to use the custom property.

You can use the linkMapper parameter to customize the caption shown.
If you are using the compressed slimbox2.js you will have the autoload code in there so you can change it to do just what Josh Stodola explained:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
$("a[rel^='lightbox']").each(function(){
//Set caption and remove title attributes
this.caption = this.title;
}).slimbox({/* Put custom options here */}, function(el){
//Custom linkMapper to grab the description from the caption attribute
return return [el.href, el.caption];
}), function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});

I changed the Q-function in the minified version of Slimbox2 from this:
function (Q) { return [Q.href, Q.title] };
to this:
function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };
This way, the normal title in the link element is preseved and in case the is an attribute called "data-captionname" in the link that is being shown in the modal window (or lightbox if you so will).

Related

Getting hidden text field with url to update image on hover jQuery

I'm testing out some jQuery and want to update a image when hovering over a specific div or link block.
So what i was trying to do is when hovering over .test-block get the hidden text with the url and update it on .large-image-2. It can't seem to get the specific text on hover.
This is the code i have come up with:
$('.test-block').on('onmouseenter', function() {
let myUrl = $(this).find('.display-hidden').text();
$('.url').text(myUrl);
});
Im testing on this page: https://jquery-testing.webflow.io/update-image the three bottom div's and bottom picture on right is what i want to use.
Thanks in advance!
There are a few issues with your example. Mainly the way you register the event handler.
For jQuery the correct way would be $(target).on('mouseenter') - Ommit the on... part for the event you want to register when doing it through jQuery.
I would probably implement the functionality you're looking for in a less specific way and with simpler handles like the following:
$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this)
const target = that.data('image-target')
const url = that.data('image-url')
$(target).attr('src', url);
})
divs.first().trigger('mouseenter')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=one">
Hover One
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=two">
Hover Two
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=three">
Hover Three
</div>
<img id="my-target-image">
Explanation:
Data attributes:
Two data attributes are getting used in my example: data-image-target and data-image-url.
Using data attributes on the elements you want the event to be fired on will make your script a bit more robust and less prone to errors, since the event registration is bound to the two attributes being present using attribute selectors for the jQuery selector $([data-image-target][data-image-url]) instead of arbitrary classnames and/or ids.
The data-image-target should have a CSS selector that points to the <img> element(s) you wish to switch the src url on, while the data-image-url should hold the url of the image you want to switch to.
The code above could even replace your existing functionality for the top 3 images on your page.
This code worked
$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this);
const target = that.data('image-target');
const url = that.data('image-url');
$(target).attr('src', url);
});
});
Thanks to Morten for providing. With Webflow i also had to do Command + Shift + O to turn off responsiveness to the image. (when on image settings)
Attributes:
Name: data-image-target
Value: #my-target-image
And
Name: data-image-url
Value: (image url, in my case Webflow: https://uploads-ssl.webflow.com/something)
These two attributes to each hover element.
Name: id
Value: my-target-image
This to the image element to show images. (if Webflow; "my-target-image" goes in the ID field in element settings.

Google Tag Manager: return position in the DOM of the tracked link/element, {{Click Element}} variable

Background description:
I am tracking clicks on links on a web page using Google Tag Manager (GTM) and have set this up successfully, together with python code to extract the data from the API. However, GTM currently doesn't return any indication of the position on the page of the link clicked. I would like to put in the Event Label the position in the DOM of the clicked element.
The purpose of doing this is twofold: Firstly, so I can distinguish identical links (i.e. links which have the same link text and which go to same destination). Secondly, so that I can identify which of the many sections of the page the link is in: is it in the sidebar, on the top bar, in the main content etc.
Problem
I have tried using the {{Click Element}} variable, but this only returns the href of the link, not the position on the DOM.
This is puzzling because when I go into Preview mode in GTM and have a look at the data layer, I see very clearly that there was a push API call to send the DOM location:
dataLayer.push({
event: 'gtm.click',
gtm.element: 'https:// [rest of URL] : html.js.yes-js.js_active >
[lots more DOM elements separated with >s of which I am only including a few]
> div#page-container > div#et-main-area > div#main-content > h3.rpwe-title > a',
gtm.elementClasses: '',
gtm.elementId: '',
gtm.elementTarget: '',
gtm.elementUrl: __*~~URL~~*__,
gtm.uniqueEventId: 425
})
And in the "Variables" tab of the GTM preview page, Click Element shows up just as above: it is a Data Layer Variable, it is a string, and its value is given as first the URL, then a colon, followed by the long description of where the link is on the DOM, with all the parents starting from the root of the document, all the way down until the clicked link.
So why, when I add the {{Click Element}} variable to the GTM Event Label, does this only return the href of the link, not the position on the DOM? I submit the changes and publish a new version in GTM, then go to Google Analytics, and only the link href shows there.
What I have tried
Going into the DevTools in chrome (right click, Inspect) and entering the console and typing dataLayer shows that some events, e.g. gtm.elementVisibility, do have a gtm.element object which seems pretty vast. In this gtm.element object, you can click on parentElement which then has its own parentElement and so on until the top level of the DOM. So this data is clearly all there.
To access it I tried a Custom JS variable in GTM which used JSON.stringify to convert Click Element into a string. This didn't work, I suspect because the gtm.element object is too complex, with nested objects and circular references to many locations within the object.
I don't know Javascript, I am groping in the dark with it, I just want to get a nice string through to Google Analytics and from there to my python code where I can manipulate it as necessary.
Possible solution which isn't practical
In GTM I could make multiple triggers for the same event, and specify for each trigger that Click Element matches the CSS Selector for each of the sections of the page. However that would require a separate trigger for each section, which would get messy if I ever need to update the trigger settings. It also wouldn't help me distinguish between identical links.
Question
Why isn't the above working nicely, and how can I accomplish this (preferably with minimal javascript coding...)? Thanks!
Simo Ahava has a great blog post about exactly this question, at https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/ (no idea why multiple google searches didn't find this...)
As suspected in the question, he explains that Click Element is not actually a string with the location of the link in the DOM, as the GTM Preview mode indicated. It is a complex HTML element.
He goes on to provide javascript code which takes this complex Click Element and extracts the location in the DOM of the link:
function() {
// copied from https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/
// Build a CSS path for the clicked element
var originalEl = {{Click Element}};
var el = originalEl;
if (el instanceof Node) {
// Build the list of elements along the path
var elList = [];
do {
if (el instanceof Element) {
var classString = el.classList ? [].slice.call(el.classList).join('.') : '';
var elementName = (el.tagName ? el.tagName.toLowerCase() : '') +
(classString ? '.' + classString : '') +
(el.id ? '#' + el.id : '');
if (elementName) elList.unshift(elementName);
}
el = el.parentNode
} while (el != null);
// Get the stringified element object name
var objString = originalEl.toString().match(/\[object (\w+)\]/);
var elementType = objString ? objString[1] : originalEl.toString();
var cssString = elList.join(' > ');
// Return the CSS path as a string, prefixed with the element object name
return cssString ? elementType + ': ' + cssString : elementType;
}
}
This returns something looking like 'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main' where div is the type of element, element class(es) follows the period (.), and element id follows the hash (#).
So thank you to Simo Ahava, hope it is OK to share his code here. See his article for fuller explanation

Lightbox: Other attribute for image description (instead of title)

At the moment the lightbox uses the attribute title for the displayed description under the image. i want to use the title attribute for a tooltip and another for the lightbox image description.
can i just replace "title" to another attribute in the code:
https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js
i just want to say that i habe found the part i was looking for where i can set the Attribute which is used for the lightbix title (line 135 in the lightbox.js):
function addToAlbum($link) {
        self.album.push({
          link: $link.attr('href'),
          title: $link.attr('data-title') || $link.attr('title')
        });
      }
so everything is solved.

Title attribute in Firefox

The title attribute on a particular HTML element is not displayed in my application if viewed in Firefox. There are multiple topics explaining this problem. I was unable to find a sollution that would fit my needs. So I ask if you can please help.
I have a number of divs lined up. On mouseover each of the div's should display a different value(title). The title attribute works fine in Chrome but I need something simillar for Firefox.
The title attribute is set dynamically from Javascript!
My Javascript:
dojo.connect(div, 'mousemove',rasterTimeDisplay);
function rasterTimeDisplay() {
dojo.attr(evt.target, 'title', "some new title");
}
Why not to store the data to be displayed in another attribute ? Because you use javascript to feed your data-storage attribute, you can whatever you want.
For example, with jQuery :
//I feed my data-storage attribute
$("#my_div").attr('my-data', '<h1>my content to be displayed</h1>');
//And then i bind the hover event to toggle displaying of this data
$("#my_div").hover(
function(){
$(this).html($(this).attr('my-data'));
},
function(){
$(this).html('');
}
);
Or with standard JavaScript :
document.getElementById('my_div').my_data = '<h1>my content to be displayed</h1>';
document.getElementById('my_div').onmouseover = function(){
this.innerHTML = this.my_data;
};
document.getElementById('my_div').onmouseoout = function(){
this.innerHTML = '';
};
Sorry if i missunderstood you. However, you are trying to trigger the title attribute on hover? But the title attribute is already triggered by hover on default:
So if you just add the attribute to your desired element, you will get the extra information on hover.
var titles = document.getElementsByClassName('title');
for(var i = 0; i < titles.length; i++)
{
titles[i].title = 'Hover information ' + i;
}
jsFiddle
I you're interesting in the jQuery way to do this:
$('.title').attr('title', 'Hover information');
Still doesn't work?
Step-1: First try to run your firefox client in safe-mode. Your problem might be solved now. If this is the case proceed to step-2. Else... Well i would suggest you to update your grapical driver or install a newer version.
Step-2: Disable your Hardware Acceleration(AH).
Check another answer about this here: https://support.mozilla.org/nl/questions/860902
Now if you just want a work around, to even let the oldest Firefox browsers support this. You can find one here: Tooltips (title="...") won't show in Firefox
I hope this solved your problem.

Dynamically change Tweet Button "data-text" contents

This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery
However, the suggested solution works just once. That is, I cannot use it in my switch statement like this:
switch(element.id)
{
case "t1":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_1);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
break;
case "t2":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_2);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
...
}
What happens is that the data-text attribute is set according to whichever case happens first and doesn't change afterwards.
How can I change data-text attribute of a Tweet Button as many times as I need?
Update: here's the page I'm working on: http://zhilkin.com/socio/en/
The Traits table can be safely ignored. What I want to do with the Sociotypes table is that when you click on a type, the data-text of the Tweet Button below the description on the right should be changed accordingly.
Right now it works like this: if I hover on or click "Don Quixote", then data-text is set to "... Don Quixote ...", and it stays the same if I click "Dumas" later. And vice versa: if I hover on or click "Dumas", then data-text is set to "... Dumas ..." and doesn't change if I click "Don Quixote". (Other types are empty at the moment.)
So, the Tweet Button is only changed the first time I run the script, but I need it to be updated as many times as the type changes.
I struggled with this for a couple of hours this morning, but finally got it working! The problem is essentially that you can only include the twitter widgets.js script once in the page, and that script evaluates the data-text attribute on load. Therefore, in your example, you dynamically set the data-text attribute before loading the script, which will work as expected. However, you can then make no further updates as the script has already run.
I saw this article suggesting you can call twttr.widgets.load() again at runtime to re-evaluate and re-render the buttons, however that didn't work for me. This is because that function re-evaluates <a> tags, not <iframe> tags!
So the solution, as pointed out here, is to completely remove the rendered <iframe> from the DOM, then make a new <a> element with all the appropriate attributes before calling twttr.widgets.load() to finally re-evaluate it and turn it into an <iframe>.
Please see this fiddle for a working example!
You can also use Twitter's createShareButton API call:
function callAsRequired(){
var nodeID = 'YourTwitterNodeID'
//Remove existing share button, if it exists.
var myNode = document.getElementById(nodeID);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
//Create button and customise
twttr.widgets.createShareButton(
'http://your.custom.url.here/',
document.getElementById(nodeID),
{
count: 'none',
text: 'Your custom tweet here'
});
}
since you are using each loop you can use if statements instead:
$(document).ready(function(){
$('a[data-text]').each(function(){
if (theCase == 1) {
$(this).attr('data-text', Text_Variant_1);
}
else if (theCase == 2) { ... }
})
});

Categories