First, I am not good with javascript and jquery .I have video urls like this :
http://www.youtube.com/v/u62EpfeUrG4?version=3&f=videos&app=youtube_gdata
I am using jinja2 for templating (this code includes some JS for fancybox with images).
My problem is only with youtube videos.
And I wrote this code (Edited):
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.pack.js') }}"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-media.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.js') }}"></script>
<script type="text/javascript">$(document).ready(function() { $(".fancybox").fancybox();});</script>
<script type="text/javascript">$("a.fancytitle").fancybox({'titlePosition': 'inside','titleFormat': function() {return $('.fancytitle').attr('title');}});</script>
<script type="text/javascript">
$('.video').on('click', function(event) {
event.preventDefault();
$.fancybox({
'type' : 'iframe',
'href' : this.href,
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
</script>
This is where I want to show an icon, that when I click on it, the fancybox frame should appear with the video .
{% if items.trailers %}
<a href="{{items.trailers.ytb_url}}" id="video" class="video">
<img class="trailer" src="{{url_for('static', filename='img/video.png')}}" title="{{items.title}}-{{items.trailers.ytb_title}}"/>
</a>
{% endif %}
This doesn't work , when I click on the image, it works without fancybox.
Any suggestions ?
Solution found :
(function ($) {
$(document).ready(function(){
$('a[href*=youtube]').each(function () {
var thisHref = this.href
$(this).fancybox({
"padding": 0,
"type": 'iframe',
"href" : thisHref+"&wmode=opaque;autoplay=1"
});
});
});
})(jQuery);
Related
I'm sing Highlight Js to render Code in QuillJs Editor.
I've used following libraries.
<script src="{{ asset('js/highlight.min.js') }}"></script>
<script src="{{ asset('js/quill.js') }}"></script>
<script src="{{ asset('js/quill-textarea.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/default.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/monokai-sublime.min.css') }}" />
hljs.configure({
languages: ["javascript", "ruby", "python", "php","json","xml","sql","css","html"]
});
quilljs_textarea('.quilljs-textarea', {
modules: {
syntax: true,
toolbar: toolbarOptions
},
theme: "snow"
});
The Following is result
Only Top element(div and class) is highlighted
Did I miss anything..
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/script.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}" >
<link rel="stylesheet" href="{{asset('css/bootstrap-select.min.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
script.js
$('.selectpicker').selectpicker();
There are not errors in the console but options inside select tag are not showing
I am using this package to pass variables to javascript in Laravel 5.2, but I get:
all.js:56Uncaught ReferenceError: categories is not defined
In my controller I am trying to pass variables like this:
JavaScript::put([
'categories' => $numberOfViewsByCategory[0],
'categoryViews' => $numberOfViewsByCategory[1],
'chains' => $numberOfViewsByChain[0],
'chainViews' => $numberOfViewsByChain[1]
]);
I have set the path in the config file:
'bind_js_vars_to_this_view' => 'layouts.partials.foot',
And my partials.foot blade looks like this:
#section('foot')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> </script>
<script src="{{ asset('js/all.js') }}"></script>
#stop
But when I do console.log(categories) in my all.js file, I get the above mentioned error.
the documentation says:
which view you want your new JavaScript variables to be prepended
to.
So I suppose that in your layout.blade.php you have something like #yield('footer') for the moment.
I would suggest editing your foot.blade.php like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> </script>
<script src="{{ asset('js/all.js') }}"></script>
And in your layout, to replace the #yield by an #include('partials.foot')
In the below code I am displaying a gallery that contains images. When I click on an image, I want to show the same image in a popup, and I also want to show the next and previous images. Any idea what my mistake was?
But it was displaying as a new window.
Can any one help me?
html
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<div id="Gallery">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="elgol sunset (matty brooks)">
<img src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" alt="" width="150" height="113" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Frondaisons (Valentin le luron)">
<img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg" title="The cold morning (Raimondas Ka.)">
<img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Silhouettes (una cierta mirada)">
<img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" width="150" height="113"/>
</a>
</div>
</div>
<script type="text/jscript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Download these files from the url
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>-->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
By appending the url http://fancyapps.com/
e.g http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5
and then include all these files in your project folder.
It will work :)
I am loading all of the below libraries and files, but for some reasons only the CSS is executing and none of the external js files. The scripts.js file holds all of my jQuery and it seems to be formatted properly. I'm not sure why the CSS would execute, but not the jQuery.
In chrome dev tools, everything below is loaded.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>
</head>
This is a portion of the scripts.js file:
$("span.output").draggable({
stop: function(event, ui) {}
});
$('input[type=file]').change(
function() {
$('#submitbutton').click();
});
$("#text_submit").submit(
function(event) {
$("#text1").html($("#1").val());
$("#text2").html($("#2").val());
$("#text3").html($("#3").val());
$("#text4").html($("#4").val());
$("#text5").html($("#5").val());
$("#text6").html($("#6").val());
$("#text7").html($("#7").val());
$("#text8").html($("#8").val());
$("#text9").html($("#9").val());
$("#text10").html($("#10").val());
$("#slider1").show();
$("#slider2").show();
$("#slider3").show();
$("#slider4").show();
$("#slider6").show();
$("#slider7").show();
$("#slider8").show();
$("#slider9").show();
event.preventDefault();
});
You need to put your code inside script.js in JQuery's Dom Ready function, like this;
$(document).ready(function(){
// Your code here
});
For more info, http://api.jquery.com/ready/
Try the below, not declaring type="text/javascript" in your jquery loading way might also be an issue.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/spectrum.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>