Develop Reference

fancybox.open custom class

hello I am using the function fancybox.open in this way
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open([{src:\"" + video_url(src) + "\"}])' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
It is used to add a popup on video.
Everything works fine however I wish to add a custom class to that fancy box popup.
How could I do it?
Try this but no results
var param = [{
// fancybox options first element
src: "https://youtu.be/OXYuDvKM_oo",
wrapCSS: "nepelino",
},
];
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open(param)' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
What am I doing wrong?
I appreciate your time in advance

implementing html tags of js variable

When I click open first window link a popup opens.
in that popup you will see a grid with two columns.
in that first column i need to combine name and and icon.
so i added span tag before a tag but its not working.
can you guys tell me how to combine.
providing code below.
http://jsfiddle.net/cepzsokp/
var a = $('<span></span><a/>', {
class: 'sportsDataPlayer',
download: 'download.csv',
type: 'text/csv',
href: URL.createObjectURL(data),
html: ev.FileName
});
return a[0].outerHTML;

You can not do that html mark up. easiest thing would be just add the span before the outerHTML
var a = $('<a></a>', {...})
return "<span></span>" + a[0].outerHTML;

I have edited your latest jsfiddle. Here is the working DEMO
I have modified this line of code as below:
return "<span onclick="window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span>" + a[0].outerHTML;

When I .load a HTML template, JSON elements don't populate but they work fine as static HTML.

I don't think this is a broken code question as much as it is a question about understanding JS.
I have HTML templates that I load when an element is clicked. To be clear, there is already an HTML template loaded on document.ready that has all functionality working just fine. The HTML that loads is the exact HTML that is in place when you intitially load the page, aside from some small differences(images, etc...). This all loads no problem, but for some reason my JSON elements don't load. Is this because the actual javascript I wrote that is responsible for loading the JSON is within the document.ready wrap?
To be clear, the HTML is EXACTLY the same, aside from text and img src's. I have provided the JS though since that may be the issue.
Just looking for some guidance on why this may be occurring since I also have a few other JS/jquery strings of code that also don't work on template load(like hiding elements with .hide that work on document.ready no problem, but once the template loads, the elements aren't hiding).
This all sits in $(document).ready
var trinketJSON;
$.getJSON("js/trinket.json", function (data) {
trinketJSON = data;
// TRINKET SELECTION TABLE
$.each(trinketJSON, function (i, item) {
$("<div>")
.html(
'<div class="trinket-tile"><div class="trinket-img" style=\'background-image: url("' +
trinketJSON[i].RarityBG +
'");\'><img src="' +
trinketJSON[i].TrinketIMG +
'" class="trinket-tile-img"></div><div class="trinket-effects"><ul><li class="trinket-effect">' +
trinketJSON[i].EffectOne +
'</li><li class="trinket-effect">' +
trinketJSON[i].EffectTwo +
'</li><li class="trinket-effect">' +
trinketJSON[i].EffectThree +
'</li><li class="trinket-effect">' +
trinketJSON[i].EffectFour +
'</li><li class="trinket-effect">' +
trinketJSON[i].EffectFive +
'</li><li class="trinket-effect">' +
trinketJSON[i].EffectSix +
'</li></ul></div><div class="trinket-info"><ul><li class="trinket-name">' +
trinketJSON[i].TrinketName +
'</li><li class="trinket-rarity">' +
trinketJSON[i].Rarity +
'</li><li class="trinket-class">' +
trinketJSON[i].Class +
'</li><li class="trinket-set"></ul></div></div>'
)
.appendTo(".trinket-select");
});

jQuery append trouble with url parameter

I've been working for hours trying to get the single and double quotes nested correctly in order for this search result display to work, with having a dynamically appended "uniqueId" in part of the URL string on output.
Basically, the part of the JS code that is giving me trouble is this:
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
I want to have the "this.uniqueId" after the equal sign so that it generates a dynamic URL, which I then am going to link to a "details" page for that unique ID.
Can anyone please help me with the "this.uniqueId" syntax to get this correctly inserted into the URL for output?
Sorry if I am being unclear, I am learning all of this by the day :)
thanks!
ps... this does work, but it has a hardcoded uniqueID... what I want is a dynamic one based on the row, which is working as far as the "rel" part goes, just not the anchor part...
$('#results-list').append("<li rel='" + this.uniqueId + "'>" + this.dateTimeStamp + " — " + this.message + " — " + "<a class='iframeSmaller' href='commentDetails.php?uniqueId=32'>XXX</a>" + "</li>");
thanks again for any help with this syntax (or if there's a better way to go about what I'm trying to do)...

The quoting in your HTML for the anchor isn't quite right. You have this:
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId='" + this.uniqueId + "''>XXX</a>" +
I think it should be this (fix quoting on the link URL):
+ "<a class='iframeSmaller' href='commentDetails.php?uniqueId=" + this.uniqueId + "'>XXX</a>" +
You could see what's going on better if you build the string into a variable and then do a console.log() on the string of HTML you've built or look at its contents in the debugger.

Replace this part of your code:
... uniqueId='" + this.uniqueId + "''>XXX</a>" + "</li>");
for this one:
... uniqueId=" + this.uniqueId + "'>XXX</a>" + "</li>");

Daily image/link rotation javascript question

I have this daily image rotation script, which works great. I need the images to be clickable though. Any help is appreciated.
<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array
("http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mp_mpl.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mph.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mmp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mep.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mst.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_s.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_maxp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mpt.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mta.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_me.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_sm.jpg");
document.write("<img src='" + arday[day] + "'>");
// End -->
</SCRIPT>

Why don't write an <a> element as well?
document.write('<a href="LINK_HERE" title="TITLE_HERE"><img src="' + arday[day] + '"><\/a>');

Clickable to where?? You've got to add a url to each "row" in addition to the img src.
Eg instead of each row being just "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg", do instead:
{ img: "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
url: "LINK GOES HERE" },
Then the last line can do:
document.write('<img src="' + arday[day].img + '" />');

The example below creates a link around your image, hjust change the href attribute's value :
document.write("<a href='#'><img src='" + arday[day] + "' border='0'></a>");

Few general tips:
Always declare your variables (var today = ..., not just today = ...)
Drop new Array in favor of more concise (and just as compatible these days) "[" and "]" syntax.
Don't repeat host name in array of links. It's a maintenance nightmare and a waste of bandwidth.
Drop HTML comments from within your script contents. Browsers that need them are obsolete by now.
Always provide "alt" attribute on your images. When you wrap them with anchor, don't forget to give title to anchor.