Related
how to start swiper Autoplay when user scroll to swiper wrapper id
It usually runs automatically when opening the page
how can i control autoplay events ?
This is example:
https://codepen.io/elostoracom/pen/ExgRNvP
And here is the js code
new Vue({
el: ".home-slider",
data() {
return {
homeSwiper: "",
};
},
mounted() {
this.homeSwiper = new Swiper(".home-slider", {
updateOnWindowResize: true,
loop: true,
slidesPerView: 1.5,
spaceBetween: 10,
speed: 500,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
}
})
how can i control autoplay events ?
You can use swiper.autoplay.start() to start the autoplay and swiper.autoplay.stop() to stop the auto play imperatively.
how to start swiper Autoplay when user scroll to swiper wrapper id It usually runs automatically when opening the page
Intersection Observer lets you know when an element is in view. It's got a good support in the (modern) browsers, but if you want it to work in all browsers, you can use the polyfill.
Here is a codepen
I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
Iam want the way to add subtitles and resolution options in my Jwpalyer
code
<script type="text/javascript">
//Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.
//jwplayer.key = "Ywok59g9j93GtuSU7+axNzjIp/TBfiK4s0vvYg==";
var videoPlayer = jwplayer('my_video').setup({
file: 'http://content.jwplatform.com/videos/IMUjQRAB-kNspJqnJ.mp4',
image:'http://assets-jpcust.jwpsrv.com/thumbs/F5K02Tmh-720.jpg',
width: '640',
height: 360,
//autostart: true,
skin: {
name: "flat"
},
//timeSliderAbove: true,
//Adding your brand: Logo & Right-click
logo: {
file: './jw-logo/logo_flat.png',
logoBar: './jw-logo/logo_bar.png',
position: 'top-left',
link: 'http://codecanyon.net/user/facetheme'
},
abouttext: "Flat Skin Retina for JW7",
aboutlink: "http://codecanyon.net/user/facetheme",
});
videoPlayer.on('ready',function() {
jwLogoBar.addLogo(videoPlayer);
});
</script>
I searched a lot but could not find enough answers and I hope to get enough answers here
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.
And it won't save.
I use the media plugin to insert a video from youtube.
The movie shows up in preview.
I press insert.
This is what ed.execCommand('mceInsertContent', false, h); outputs in media.js: <img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="" /> when I press insert/submit.
I see a yellow box inside the editor.
I check the source html and all I see is a <p> </p> where the move embed stuff should be.
I save and the yellow box is gone.
Here is my current tinymce init script:
tinyMCE.init({
// General
mode: 'none',
theme: 'advanced',
skin: 'grappelli',
dialog_type: 'window',
browsers: 'gecko,msie,safari,opera',
editor_deselector : 'mceNoEditor',
language: "en",
relative_urls: false,
plugins: 'advimage,advlink,fullscreen,paste,searchreplace,grappelli,grappelli_contextmenu,media',
// callbackss
file_browser_callback: 'CustomFileBrowser',
// Layout
width: 410,
height: 500,
indentation: '10px',
object_resizing: false,
// Accessibility
cleanup_on_startup: true,
accessibility_warnings: false,
remove_trailing_nbsp: true,
fix_list_elements : true,
remove_script_host: true,
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "formatselect,styleselect,|,bold,italic,underline,|,bullist,numlist,blockquote,|,undo,redo,|,link,unlink,|,image,media,|,fullscreen,|,grappelli_adv",
theme_advanced_buttons2: "search,|,pasteword,charmap,|,code,|,table,cleanup,grappelli_documentstructure",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
// Adv (?)
advlink_styles: "intern=internal;extern=external",
advimage_update_dimensions_onchange: true,
// grappelli
grappelli_adv_hidden: false,
grappelli_show_documentstructure: 'on',
// elements
/*
valid_elements : [
'-p,','a[href|target=_blank|class]','-strong/-b','-em/-i','-u','-ol',
'-ul','-li','br','img[class|src|alt=|width|height]','-h2,-h3,-h4','-pre','-blockquote','-code','-div'
].join(','),
extended_valid_elements: [
'a[name|class|href|target|title|onclick]',
'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]',
'br[clearfix]',
'-p[class<clearfix?summary?code]',
'h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]',
'ul[class<clearfix],ol[class<clearfix]',
'div[class]',
'object[align<bottom?left?middle?right?top|archive|border|class|classid'
+ "|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
+ "|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
+ "|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
+ "|vspace|width]",
'param[id|name|type|value|valuetype<DATA?OBJECT?REF]',
'embed[src|type|width|height|flashvars|wmode]',
'address'
].join(','),
valid_child_elements : [
'h1/h2/h3/h4/h5/h6/a[%itrans_na]', 'table[thead|tbody|tfoot|tr|td]',
'strong/b/p/div/em/i/td[%itrans|#text]', 'body[%btrans|#text]'
].join(',')
*/
// custom cleanup
// setup: function(ed) {
// // Gets executed before DOM to HTML string serialization
// ed.onBeforeGetContent.add(function(ed, o) {
// // State get is set when contents is extracted from editor
// if (o.get) {
// // Remove empty paragraphs (because this is bad)
// tinymce.each(ed.dom.select('p', o.node), function(n) {
// alert(n.firstChild);
// ed.dom.remove(n);
// });
// // Remove douple spaces
// // o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
// }
// });
// }
});
Edit:
Ok I added cleanup: false to my init script. And now, all I get in my source is this:
<img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" _mce_src="/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="">
This also shows up in my HTML.
Should TinyMCE not replace this with some embed code, or do I need to do that myself with some javascript?
Solution :
Update tinymce to latest release (3.3.9.2), along with all the plugins. I turned cleanup back on and now it works.