Is there any way in floom to load a specific webpage when a user clicks on an image?
The normal syntax is:
var slides = [
{
image: 'image-url.jpg',
caption: 'loriem ispum'
}
I would like to be able to do something like this.
var slides = [
{
image: 'nature-photo0.jpg',
caption: 'loriem ispum'
link: 'http://www.google.com'
}
This way that when my user's click on the images they will be directed to the url.
I'm the author of Floom.
The script provides a onSlideChange event which can be utilized to achieve this.
First inject the slideshow into a a, then use onSlideChange (the first argument is the single image object) now just update the a with the correct link:
onSlideChange: function(slide){
link.set('href', slide.link);
}
This should work.
Related
I have a very basic knowledge of javascript and I have been unable to find a solution for my specific use of the Adobe View SDK API, though it seems like there should be a way. I am working on a web page to show newsletters in the pdf viewer. I have created a w3.css modal element so that I can open the viewer with a button click, and then close it with an "x" in the corner. The button click and the "x" toggle between the display style being "none" or "block". I really like this solution as it lets me use small images of the newsletters as the buttons, and it can be observed here: Test News Page by clicking on the newsletter image below May 4, 2020.
The ultimate goal I have is to be able to change the name of the pdf document that is opened in the viewer by clicking the button, which would need to pass a string variable called "docName" to the url called by the View SDK script. Since the url is already specified in the script inside my modal element when the page loads, here is the thinking I have for the additional script I need to pass my string variables: The button-click invokes my script (function changeName(docName)) and passes the "docName" variable. Then my script needs to pass this variable to the url in the View script (this is the part I don't know how to do), then refresh the page to reload my modal, and then change the display style of the modal to "block". I will copy the code for the View SDK below, showing where I need to insert the string variable with my document name:
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://www.shcsfarmington.org/" + docName + ".pdf"}},
metaData:{fileName: "Newsletter_050420.pdf"}
}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
});
</script>
It seems like this should work, but with my limited knowledge of javascript I don't know how to pass this variable to the anonymous function in the View SDK code, and I would need as much detail and specifics in the syntax of the solution. I appreciate any help with this. Thanks.
EDIT: I thought maybe it would help to show the code for the function that I have come up with so far - then it could be examined and easier to debug and comment on:
<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script>
function changeDoc(docName) {
/* Need to pass docName to url=https://shcsfarmington.org/2020/news/Newsletter_" + newsDate + ".pdf"; */
window.location.reload(true);
document.getElementById('viewerModal').style.display='block';
}
</script>
I created a CodePen here for you to look at.
Basically, you'll load the first file when the SDK is ready but then you need to set the adobeDCView to null before recreating it.
function showPDF(url) {
adobeDCView = null;
fetch(url)
.then((res) => res.blob())
.then((blob) => {
adobeDCView = new AdobeDC.View({
// This clientId can be used for any CodePen example
clientId: "e800d12fc12c4d60960778b2bc4370af",
// The id of the container for the PDF Viewer
divId: "adobe-dc-view"
});
adobeDCView.previewFile(
{
content: { promise: Promise.resolve(blob.arrayBuffer()) },
metaData: { fileName: url.split("/").slice(-1)[0] }
},
{
embedMode: "FULL_WINDOW",
defaultViewMode: "FIT_PAGE",
showDownloadPDF: true,
showPrintPDF: true,
showLeftHandPanel: false,
showAnnotationTools: false
}
);
});
}
The link click even will pass the url to the PDF and then display it.
I have a blog built with Gatsby and I am trying to add sharing functionality to the posts.
I know that facebook requires a certain size for the image to be added on top of the title in the sharing card, instead of on the side of the title.
When I check on the facebook debugger i see that the share card looks fine (big image on top of the title). You can check it here https://developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fkeen-leakey-7a99fa.netlify.com%2Ffamous-vietnamese-fruits%2F
When i try to share the post the share card is actually smaller.
I thought it could be a problem with the og:image:width and height tag not being present in the meta but after adding them they don't seem to do anything.
These are some of the properties i have in my meta
{ property: `og:url`, content: url },
{ property: `og:type`, content: `image/png` },
{ property: `og:image:width`, content: `1200` },
{ property: `og:image:height`, content: `630` },
{ property: `og:image`, content: image },
{ property: `og:title`, content: title },
{ property: `og:description`, content: metaDescription },
Any idea on what could be the problem?
The Facebook Crawler tries to follow your og:url Tag - which points to https://elingos.com - and there is no image defined - it should work when you fix the URL!
I checked it by using a Preview Plugin and then comparing that Image with the direct source!
Edit - a better Way to Debug this URLs:
Also in the Future, you can make use of the Facebook Sharing Debugger here you can see under "redirect-path" that its going to another URL :)
I am trying to embed more than one players on the same page, but that has no success until now. In order to embed the player we need a unique target_id to target the element of the DOM and then the entry_id of the specific video. This is done in the following function:
function embedPlayer() {
var linkPart = $('#uniqueTarget').data('entry');
var conf = {
"targetId": "uniqueTarget",
"wid": "_1912616",
"uiconf_id": "37591811",
"entry_id": linkPart,
"flashvars": {
"controlBarContainer.plugin": false,
"inlineScript": false
}
};
kWidget.thumbEmbed(conf);
}
Here is the related HTML, which is dynamically created from WordPress every time that the user wants to embed a video:
<div style="width: 100%; display: inline-block; position: relative;">
<div class="theRatio"></div>
<div id="uniqueTarget" data-entry="'+ linkPart +'"
style="position:absolute;top:0;left:0;right:0;bottom:0">
</div>
</div>
Unfortunately if I try to embed a second player on the same page it will only do the API call for the first player and the second(or the rest, if more) will leave me with plain HTML and the call is not being done. There is an article about the issue at https://knowledge.kaltura.com/javascript-api-kaltura-media-players#ManagingMultiplePlayersontheSamePage, but unfortunately my knowledge is limited and I would need some help with it.
Kaltura recommend using thumb embed when you have multiple players on a page - this will embed thumbnails which will play when they are clicked:
Thumb Embed
This method takes the same arguments as the dynamic embed. Thumbnail embed passes the entire configuration to the kWidget.embed when the user "clicks" on the play button. This is the recommended method to use when you need to embed multiple players/entries in the same web page. The syntax for ThumbEmbed is identical to kWidget.embed ( dynamic embed ) except we call "kWidget.thumbEmbed" instead of "kWidget.embed"
There is more information including example Javascript and examples thumbnails here:
http://player.kaltura.com/docs/thumb
Example Javascript from this link (you can also look at the page in a browser debugger to see exactly how they have set it up):
<div id="myEmbedTarget" style="width:400px;height:330px;"></div>
<script src="{{HTML5LibraryURL}}"></script>
<script>
mw.setConfig("EmbedPlayer.DisableContextMenu",true);
kWidget.thumbEmbed({
'targetId': 'myEmbedTarget',
'wid': '_243342',
'uiconf_id' : '12905712',
'entry_id' : '0_uka1msg4',
});
</script>
Create DIV containers for each of your videos - give them unique IDs, then you can target them and create as many videos as you like. Make sure the kWidget script is loaded. Put this script in your page:
function _embedVideo(targetId,wid,uiconf_id,flashvars,entry_id,cb){
kWidget.embed({
targetId: targetId,
wid: wid,
uiconf_id: uiconf_id,
flashvars: flashvars || {},
entry_id: entry_id,
readyCallback: cb
});
}
For each of your videos, load them like so:
_embedVideo('id-of-div-container','wid-here','uiconfid-here',null,'entryid-here',yourCallbackFunc);
This is how I create multiple videos in my pages. Be sure to specify a callback else pass null.
I run a WoW guild forum based on php (phpbb), javascript and html. Ever since long, Wowhead allows links to be posted to their item/spell IDs etc. The basic code to the Wowhead JS and it's variables is:
<script src="//static.wowhead.com/widgets/power.js"></script>
<script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>
There is an extension that puts this code in the footer of every page via a HTML file. Every Wowhead link posted will be converted in a link with a tooltip explaining what it links to. The '"renamelink": true' portion of the wowhead_tooltips variable makes it as such that any link of an item or spell is renamed to the exact name of what it is linked to.
The problem: when I generate custom URLs using a Wowhead link, ie:
Teleport
instead of displaying 'Teleport' with a tooltip of Blink, it will rename the entire URL to Blink with an icon, as described in the wowhead_tooltips variable.
What I want to achieve is:
Any direct URL to Wowhead should be converted into a renamed spell/item.
Any custom URL to Wowhead should be retain it's custom text, but retrieve the tooltip.
This should both be possible on a single page.
The best solution I have come up with is to add an 'if' function to var wowhead_tooltips based on class, then add the class to URLs:
<script>if ($('a').hasClass("wowrename")) { var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": false } }</script>
<a class="wowrename" href="http://www.wowhead.com/spell=1953">Teleport</a>
This works, however, the problem with this solution is that once the script recognizes one URL with the class "wowrename" on the page it will stop renaming all links, meaning that custom URLs and direct URLs can't be mixed on a single page.
Any other solution I've tried, using IDs, defining different variables etc either don't work or come up with the same restriction.
Hence the question, is it possible to change Javascript variables (in this case "var wowhead_tooltips { "renamelinks": false}" per element (URL), based on id, class or anything else?
Direct link that gets renamed with tooltip and iccn.
Teleport
Custom link with tooltip and original text.
I've stored the original link text as a data attribute so we can restore it after it's been changed.
<a class="wowrename" href="http://www.wowhead.com/spell=1953" data-value="Teleport">Teleport</a>
Keep checking for when static.wowhead.com/widgets/power.js changes the last link text. Once changed, restore using the data-value value, remove the styling added that creates the icon and stop the timer.
$(function () {
//timmer
checkChanged = setInterval(function () {
// check for when the last link text has changed
var lastItem = $("a.wowrenameoff").last();
if (lastItem.text() !== lastItem.data('value')) {
$("a.wowrenameoff").each(function () {
//change value
$(this).text($(this).data('value'));
//remove icon
$(this).attr('style', '');
//stop timer
clearInterval(checkChanged);
});
}
i++;
}, 100);
});
This does cause the link icon to flicker on then off, but it is repeated after a page refresh.
JSFiddle demo
This is simple solution. It's not the best way.
var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }
$('a').hover(function() {
if ($(this).hasClass('wowrename') {
wowhead_tooltips.renamelinks = true;
}
else {
wowhead_tooltips.renamelinks = false;
}
});
I don't know how exactly wowhead API works, but if wowhead_tooltips variable is loaded exactly in the moment when the user points the link with the mouse (without any timeout) - this can fail or randomly work/not work.
The reason can be that the javascript don't know which function to execute first.
I hope this will work. If it's not - comment I will think for another way.
You have to loop on all the links, like this:
$("a.wowrename").each(function() {
// some code
});
I wanted to use pace.js to show a progress bar while the appended images are being loaded, they provided an API but I have no idea how it works.
$('#loadImg').click(function() {
Pace.start();
var $con = $('#content');
$con.append('<img src="http://lorempixel.com/500/500/">').imagesLoaded(function() {
console.log('done!');
Pace.stop();
});
});
I used it with desandro/imagesloaded to call Pace.stop() but I don't see any progress bars.
I made a demo plunk for your convenience.
You first need to disable pace on page load using:
"startOnPageLoad" : false
Also quoting from pace documentation:
Elements being rendered to the screen is one way for us to decide that the page has been rendered.
So we can say that loading of 'image' should successfully complete the pace progress:
"elements": {
"selectors": ["#image"] // assign id="image" to img
}
Load the pace with these options provided in script tag:
data-pace-options='{ "elements": { "selectors": ["#image"] }, "startOnPageLoad": false }'
Now just call Pace.restart() every time click on link 'Load Image'.
No need to call Pace.stop(). (it automatically detects that #image is done loading)
Updated plunk