I'm using a lightweight lightbox script for my wordpress site. I want one of the main navigation buttons to open a Vimeo link in the lightbox. The documentation of the lightbox says to "Add the 'data-lity' attribute to any <a> elements for which you want the links to be opened in a lightbox"...like so:
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
That works fine for a normal on page links - but I don't see any way in wordpress menus to add that "data-lity" attribute to the wordpress menu. How can I achieve this?
Thanks
Try this code:
Add this code to your current theme's functions.php file:
add_filter( 'nav_menu_link_attributes', 'wpse44532_add_attr_menu_atts', 10, 3 );
function wpse44532_add_attr_menu_atts( $atts, $item, $args )
{
// The id of the target menu item
$menu_target = 44;
if ($item->ID == $menu_target) {
$atts['data-lity'] = 'test';
}
return $atts;
}
Related
I'm currently using the following JS to open an accordion when an <a> tag is clicked. It uses the data-trigger value to determine what <a> to use.
<script type="text/javascript">
$('[data-trigger="accordion"]').on('click', function(e) {
var obj = $(this),
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $('.content.1', '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
});
</script>
This above JS will open an accordion based on it's class. Below is an example of the link that is used to open the Accordion:
<a href="#protect-the-nhs" data-trigger="accordion">
An example of the code that it is referencing to open the accordion:
<div id="protect-the-nhs" class="content 1">
I was wondering if anyone can help me change this code so that I can reuse it for each Accordion on the page. Let me explain. The page has 5 different accordions, above I have used generic naming for the data-trigger and the accordion class "content 1".
I'd like to know if it is possible to somehow make it so I can use this code for each different accordion (So for example accordion 1 would have a class of "content 1", accordion 2 would have a class of "content 2" etc. However, for each accordion, there would also be a different link you have to click to open the accordion.
For example: Accordion one would rely on an <a> tag with data-trigger="accordion1" and it would open the accordion with class="content 1".
I hope someone understands my ask and might be able to help! I've tried looking for something for this but haven't found anything. I'm still learning JS so TIA.
Thanks.
My basic idea is to listen to the entire document, determine where got clicked and activate the correct accordion
PLEASE NOTE: I'm assuming that every accordion has a number right after it that corresponds to the content classes like accordion1 content 1
document.onclick=function(e) {
if(!e.path[0].dataset.trigger){return;} //i forgot that not every element has a data-trigger
if(!e.path[0].dataset.trigger.startsWith('accordion')){return;} //listening to the whole document needs you have to ensure you aren't activating when you don't need to
var n=e.path[0]["data-trigger"].split('accordion')[1]
alert(n)
var obj = e.path[0],
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $(`.content.${n}`, '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
}
I'm trying to create a simple WordPress plugin for the TinyMCE editor that adds a button to the editor bar, that when you click on this it inserts an image into the content, and I want this image to be clickable by the person reading the published and run some JavaScript when this occurs (basically just to open a new window with some specific sizing).
The problem I have is that TinyMCE strips the onClick event I add to the image hyperlink, so it doesn't work. I understand one way to fix this is to change the valid_elements section for TinyMCE, but this would involve anyone installing the plugin having to go and make those changes manually. Is there anyway to be able to run some JS when the image is clicked by the reader solely in my plugin?
Should be a matter of extending TinyMCE valid elements inside your own plugin. Here an example adding the image tag with all properties enabled:
add_filter( 'tiny_mce_before_init', function ( $init ) {
$img = 'img[*]';
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $img;
} else {
$init['extended_valid_elements'] = $img;
}
return $init;
});
I used the following when creating the TinyMCE button to insert a clickable <img> element into the post content:
ed.addButton( 'test_button', {
title : 'Insert clickable image',
image : '../wp-includes/images/smilies/icon_eek.gif',
onclick : function() {
ed.selection.setContent( '<img src="http://example.com/test.gif" onclick="alert()" />' );
}
});
I am using the Galleria plugin on my site and all works fine. When the main image is clicked it opens a lightbox so the user can view the images.example
I am trying to create an another link ( apart from the image itself ) lower down the page to achieve the same thing.
Can anyone help?
Thanks in advance. Most appreciated!
After you've called your Galleria.run('#selector') method, you can write your link html, adding a data-imgIndex data-attribute. Give your clickable links a class, like 'show-lightbox.'
HTML
<a href='#' class='show-lightbox' data-imgIndex='1'>Link text here</a>
<!-- link to first image in galleria set -->
JQuery
$(document).on('click', '.show-lightbox', function() {
var gallery = Galleria.get(0),
index = $(this).data('imgIndex');
index = +index //convert string to int with preceding plus-sign
gallery.openLightbox(index); // open lightbox to img at specified index
});
Hope this helps!
I have a page that contains a FancyBox image gallery and some single FancyBox elements like div's.
I need to have a watermark on my gallery items so I used the example from FancyBox page http://jsfiddle.net/w5gQS/
beforeShow: function () { $('<div class="watermark"></div>').prependTo( $.fancybox.inner );
But that prepended the watermark div to all FancyBox elements including the single ones.
My question:
is it possible to add watermark only to the gallery items and if it is how can it be done (the cleaner the method the better)?
P.S. using FancyBox v2.1.5
best regards
You can achieve that easily evaluating how many elements are in the group so if there are more than one then is gallery, otherwise is a single element.
Using the code on the jsfiddle of reference, tweak it this way :
$(".fancybox").fancybox({
beforeShow: function () {
/* Add watermark to gallery elements only */
if ( this.group.length > 1 ) {
$('<div class="watermark"></div>')
.bind("contextmenu", function (e) {
return false; /* Disables right click */
}).prependTo($.fancybox.inner);
}
}
});
See forked JSFIDDLE
I want fanybox to open all possible media content links on the page.
Let's say I have three anchor links on the page,
Html
Google (Just a link to google)
Image 1
Image 2
The first one is just a link to google (not an image) and the others are image links (jpg), would be vimeo, youtube or any other content link that fancybox can show up.
Javascript
// Fancybox initializing
$("a")
.attr('rel', 'gallery')
.fancybox();
/*
When I try to trigger first link of gallery,
it doesn't open the gallery, because it's not a media content
that fancybox can open.
Demo: http://jsfiddle.net/Py2RA/1599/
*/
$("button").click(function() {
$("a").eq(0).trigger("click");
});
/*
But when I trigger second or third one gallery shows up.
Demo: http://jsfiddle.net/Py2RA/1600/
*/
$("button").click(function() {
$("a").eq(1).trigger("click");
});
Problem:
Actually content is dynamic, let's say I have fifty links on the page and I have no idea about which one is just a link to another page, a youtube link, an image link, a vimeo link or something else.
I just want fancybox the open gallery with the possible ones or let me know which link it can show up.
Demo - 1
Demo - 2
Try...
$("button").click(function() {
$("a").gt(0).trigger("click");
});
This is how I achieve the problem,
//this part of code check if the link can be shown in fancybox and set fancybox-group data attribute.
$("a").each(function() {
var url = this.href || '',
mediaDefaults = $.fancybox.helpers.media.defaults,
type = false,
what,
item,
rez,
params;
if ($.fancybox.isImage(url) || $.fancybox.isSWF(url)) {
$(this).attr("data-fancybox-group", "fancyboxlinks");
} else {
for (what in mediaDefaults) {
if (mediaDefaults.hasOwnProperty(what)) {
item = mediaDefaults[what];
rez = url.match(item.matcher);
if (rez) {
$(this).attr("data-fancybox-group", "fancyboxlinks");
}
}
}
}
});
// Now here you can initialize fancybox here
// Selector just select the link that can be used for fancybox.
$("a[data-fancybox-group]").fancybox();
$("button").click(function() {
$("a[data-fancybox-group]").eq(0).trigger("click");
});
DEMO