i tried since friday to install a playlist plugin to videojs but it dosent work for me.
i want this plugin : https://github.com/Belelros/videojs-playLists i red the documentation but i cant figured out what the problem is.
here are my Code snippets
<video class="video-js vjs-default-skin"
controls preload="auto" width="530" height="298"
data-setup='{"plugins":{"videojs-playlists"} } '>
<source src="../../../../../fileadmin/Film01.mp4" type='video/mp4' />
</video>
</div>
<div class="vt-video-player-playlist">
<ul>
<li data-videoplaylist="0">Critical Chain - in 5 Minuten erklärt</li>
<li data-videoplaylist="1">Critical Chain Multi Projektmanagement</li>
<li>Results of Critical Chain at von Ardenne..</li>
<li>Zuverlässige Projekte - Sichere Liquidität</li>
</ul>
</div>
</div>
and at the end of the site i load the js files
<script src="../../../Public/3rd/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script src="../../../Public/Js/common.js"></script>
<script src="../../../Public/Js/menuslider.js"></script>
<script src="../../../Public/3rd/video-js/video.js"></script>
<script src="../../../Public/3rd/videojs-playLists-master/dist/videojs-playlists.js"></script>
<script src="../../../Public/Js/videoplayer-settings.js"></script>
i hope you can help me. thanks in advance!
Well, there is currently an issue with the playlist which is basically this one:
https://github.com/Belelros/videojs-playLists/issues/6
The thing is that I was using some minified var name for getting videojs instance. I need to fix that ASAP. However, as a workaround, you can edit in Line 22 of videojs-playlist, and replace this:
player.pl.el = player.N;
By this:
player.pl.el = player.a;
Worked for me on another file... Not an optimal solution but should at least work.
Related
While trying to create a modal using Foundation Reveal, I found that I couldn't close it. Not by using the reveal-modal-close class, not by javascript, nothing was working.
I tried to put this example from the documentation into the page:
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
When the page loads, it's open, but I can't get it to close. Also, not sure why it loads open.
At the bottom of my <body>, I have this:
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>
<script>
$(document).foundation();
</script>
you don't need to load both foundation.min and foundation.reveal, just load min unless you need only reveal. Also you don't need modal.js - might be a conflict there.
See documentation here and follow it, should work once you fix the above issues: http://foundation.zurb.com/docs/components/reveal.html
I want to make a reveal modal, but its not working. I don't know why. This is my code:
Add Policy
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="<?= site_url('assets/js/foundation.min.js'); ?>"></script>
<script src="<?= site_url('assets/js/foundation/foundation.reveal.js'); ?>"></script>
I'm pretty sure my browser loaded the js as it does not show any error in the debugger. I copy paste from foundation docs, but I don't know why this is not working.
Initialise foundation..
Have this at the end of your body
I am new to coding and playing around with the Bakery template in WebMatrix. I have implemented LightBox, and it seems to be working, however, it doesn't seem to be pulling the correct image. On my page, I have thumbnails displayed on the screen. When you click, I am trying to open the 'non-Thumbnail' sized pictures to you can see more detail. However, it still looks like the Thumbnail size. I have a File Directory structure for my pictures of ~\Images\Products This is where the large images reside. Then I have ~\Images\Products\Thumbnails for the small images. Here is my code where I am displaying the LightBox.
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/#p.ImageName" />
</a>
Thanks in advance for your help
The correct code for the Bakery template, that I have suggested to you in the previous question deleted by you was
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" />
</a>
</li>
}
It works fine for me.
In future don't erase your question with an answer, but add a comment.
Edited
Try this:
download from the Lightbox 2 site Lightbox v2.6
in Webmatrix 3 create a new site from the Bakery template
copy lightbox-2.6.min.js from the js folder of your Lightbox download into the Scripts folder of your new site
copy lightbox.css from the css folder of your Lightbox download into the Content folder of your new site
create a new img folder in the root of your new site and copy into it close.png, loading.gif, prev.png, and next.png from the img folder of your Lightbox download
modify as follows the head section of the _SiteLayout.cshtml of your new site
<head>
<meta charset="utf-8" />
<title>Fourth Coffee - #Page.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/lightbox.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/lightbox-2.6.min.js"></script>
#RenderSection("Scripts", required: false)
</head>
replace the Default.cshtml content of your new site with
#{
Page.Title = "Home";
var db = Database.Open("bakery");
var products = db.Query("SELECT * FROM PRODUCTS").ToList();
}
<h1>Welcome to Fourth Coffee!</h1>
<div id="productsWrapper">
<ul id="products" data-role="listview" data-inset="true">
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" alt="Image of #p.Name" />
</a>
</li>
}
</ul>
</div>
Now, if you run your new site you should see something like this:
I am using the default code. Why don't my buttons show up? Do I need to have the images locally? need absolute path?
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="myclient"></a>
<a class="addthis_button_twitter_follow" addthis:userid="myclient"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="myclient"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-510e973014b90fdf"></script>
<!-- AddThis Follow END -->
You don't need the images to be stored locally.
You don't need an absolute path
Have you checked if the js is loading properly? You can do that in chrome (developer tools) or firefox (firebug) and check if it is able to get the script loading with no errors.
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.