I'm at a loss for why my Vimeo videos aren't showing up in a Shadowbox.
I think I have gotten to the simplest point I know how to do, which is to copy and paste the example straight from the github page and then change the shadowbox paths to the correct places on my server (for the .js and .css files).
When I click on the link to the video, I expect the video to display in a shadowbox.
Instead, the page just goes dark (so I know shadowbox is TRYING to do something), but no video, or box appears on the screen.
I added a simple image link to the example page just to test that a simple image will work. It does.
My example code is from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html
The code is supposed to work like the Vimeo link towards the bottom here:
http://www.shadowbox-js.com/index.html
My actual working page can be found at:
http://zanezmiller.com/hidden/video-test.html
Here is the complete code to the sample page I am attempting to get to work:
(Thanks in advance for any help)
<html>
<head>
<link rel="stylesheet" type="text/css" href="/shadowbox/style.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({}, function() {
Shadowbox.setup('a[title="Egypt/Lebanon Montage"]', {
height: 360,
width: 640,
flashVars: {
clip_id: "7058755",
autoplay: "1"
}
});
Shadowbox.setup('a[title="Shows Images Work"]', {
height: 360,
width: 640
});
});
</script>
</head>
<body>
<p>This example demonstrates how to display a Vimeo video in Shadowbox.</p>
<p>Click Here</p>
<p id="foot">This file is part of Shadowbox.js.</p>
<p><a title="Shows Images Work" href="http://upload.wikimedia.org/wikipedia/en/thumb/d/dd/G2Cloud_eso1151a.jpeg/200px-G2Cloud_eso1151a.jpeg">This shows images work</a></p>
</body>
</html>
Glad it worked, I'll re-word the comment so random visitors would find it helpful as well. :)
Make sure that you build the shadowbox library with the appropriate options otherwise the specific shadowbox mode you want to use works. See: http://shadowbox-js.com/download.html
Related
I am working on a project which requires me to show some images one after the other in a popup on page load. To accomplish this, I'm using lightcase.js as it fulfills my requirement to a great extent. However, I don't want to load the images the way it has been shown in the demo. Rather, I want to initialize the images under the document ready function.
After googling a lot I came across a piece of code that does the job to some extent. The complete code is:-
<html>
<head>
<title>Lightcase Lightbox plugin test</title>
<link href="css/lightcase.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/lightcase.js"></script>
<script src="js/jquery.events.touch.js"></script>
<script>
$(document).ready(function(){
var imgURLs = [
'https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
"https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage_2x.png"
];
var randomIndex = Math.floor(Math.random() * imgURLs.length);
var imgURL = imgURLs[randomIndex];
setTimeout(function(){
lightcase.start({
href: imgURL,
// more options like width, height, etc.
});
},1000); // 1000 to load it after 1 second from page load
});
</script>
</body>
</html>
As you can see that the above code randomly loads any one image on page load. Could someone please suggest a tweak/change in the code so that it loads a series of images like a gallery plugin. Thanks.
NOTE: Lightcase Author's website is not working hence am unable to see the documentation.
I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>
UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>
I am using a LinkedIn share button, but it is not getting content/image from my web page, it is just getting website url and that's all. I am using the following code, please see and let me know what is problem with it.
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share"
data-url="http://www.websiteurl/blog/2014/03/obamacare-health-plans-may-prove-costly-cancer-patients/"
data-counter="right">
</script>
As far as the image goes, it might not be the right minimum size (80 x 150 px, according to the link below). You might also want to try explicitly setting which image to use using metadata tags described in the link below, for example:
<meta property="og:image" content="http://www.websiteurl/images/blah.png" />
More:
https://developer.linkedin.com/documents/setting-display-tags-shares
For LinkedIn share button, content/image.
Try the link u will get some idea.
https://developer.linkedin.com/documents/share-api
I'm completely stuck as to how to fix this. When I test it offline it works great. When I upload it and run it live none the images on my site load unless you click on the link for the page a second time. And on the press page it loads for a second and then its the same as the other pages but a second click on the link doesn't fix it. I've checked out this problem in firefox and safari.
P.S. I know my Menu's still are having issues if anyone has any suggestions for that I'd be super thankful. Mainly how can I get the hidden menu to stay centered.
Thanks!!!!!
http://www.tracyashaw.com/e2studio/index.html
http://www.tracyashaw.com/e2studio/press.hmtl
This on on the top of each page
<link rel="stylesheet" href="e2studio.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '100%'
});
});
</script>
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("images/home_1.jpg","images/newport.jpg","images/newport_life.jpg","images/RI_monthly.jpg","images/unique_homes.jpg","images/ri_monthly_cover.jpg","images/so_ri_press_cover.jpg","images/grace_ormonde_cover.jpg")
</script>
The jQuery mousewheel plug-in you are using clearly states in the header comments that jQuery 1.2.2+ is required, likely due to the dependency on the special property of jQuery's event object. You have linked to jQuery 1.2.1. Also some image requests are coming back with a 404 response code. You'll have to address these two items.
this problem is going to make me bald. Save my hair plz.
i have been trying every possible way to stop and pause and play the JWplayer latest version using its JavaScript API and nothing works.
here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player 5 playlist</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<div id="mediaplayer">JW Player goes here</div>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "lounge warmup.3gp",
skin: "simple/simple.zip",
image: "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
controlbar: "bottom",
width: "400",
height: "8"
});
</script>
<!-- END OF THE PLAYER EMBEDDING -->
<br>
Stop playback
</body>
</html>
why this is not working??
Your code works for me (after I adjusted the "file" to something I had locally). Some possibilities:
Are you loading this with a "file://" URL, or are you loading it from an actual web server? (If from a file:// URL, there might be Flash security restrictions.)
Do you intend to have a height of 8px as you've currently specified? I don't know what your custom skin looks like. In order to see things using default skin I had to specify a larger height.
I'm not very familiar with JWPlayer, but is it possible the file parameter needs to be URL encoded? (If not sure, maybe trying removing the space from the file name and renaming it on the server as well.)
In any case, your code works for me using default skin and different media file. I can play and then click your "stop" link to stop playback. If ideas above don't help, then you'll need to specify exactly what is not working for you.