Develop Reference

swiper.js controlling two instances

So I have setup two swiper.js instances and I want to scroll both while using one of them.
EDIT: My main goal is to recreate the main functionality on top of the swiper homepage.
EDIT2: I found this link, but it appears that this uses an older version of swiper.
Here is my config, only the first one works.
$(document).ready(function () {
//initialize swiper when document ready
var swiperFront = new Swiper('.swiper-container-front', {
// Optional parameters
effect: 'coverflow',
centeredSlides: true,
direction: 'horizontal',
slidesPerView: '3',
loop: false,
followFinger: true,
controller: {
control: [swiperFront, swiperBack],
by: 'container',
}
});
var swiperBack = new Swiper('.swiper-container-back', {
// Optional parameters
effect: 'fade',
centeredSlides: true,
slidesPerView: '3',
loop: false,
});
swiperFront.params.controller.control = swiperBack;
swiperBack.params.controller.control = swiperFront;
})
What am I doing wrong, and how to fix it?
Fiddle

I think the main problem here was the outdated swiper.js version. Updated to 4.3.2.
jsfiddle: https://jsfiddle.net/ajxmyL7v/

For documentation reasons.
For this case the main difference in switching from Swiper v3 to v4 is to omit the .params. So instead of
mySwiper.params.control
without params and the new API
mySwiper.controller.control

How to Remove the "Loading Next Set of Posts" Loading Image and "Congrats you've reached the end of the internet." From Infinite Scroll

So here's the code for infinite scroll on my blog. It works fine and everything, save for I don't want the part where it shows the gif for "Loading next set of posts." And the end where it says "Congrats you've reached the end of the internet." To show up because it's clunky and annoying.
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(document).ready(function(){
var $container = $('#entries');
$container.infinitescroll({
itemSelector: '#posts',
navSelector: '#pagination',
nextSelector: '#pagination a',
loadingImg: '',
loadingText: '',
bufferPx: 3000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: 'corners',
gutter: '3px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
});
</script>
I asked someone else how to possibly fix this and they sent me here, https://github.com/infinite-scroll/infinite-scroll/wiki/Options . I toyed around with the options shown, but I wasn't able to get it working how I wanted it.
Help much appreciated. Thanks. (I'm pretty much a noob when it comes to javascript.)

Looks like your using the v1 properties but using v2 of the plugin, the v2 properties are on the URL you have provided https://github.com/infinite-scroll/infinite-scroll/wiki/Options, which will be some combination of the below, its difficult to tell from Docs how the work so you will need to experiment but start with:
finished: false
finishedMsg: '',
img:'',
msg:false
msgText:''
rather than:
loadingImg: '',
loadingText: '',

OKVideo two videos in one page differect sections

Ok so I've done alot of digging and can't find any info on this. I'm trying to get the jquery plugin OkVideo to make 2 "section" tags have a different video in each however even if i rename the container to be specifically ID'd the video loads in one container.
e.g.
<section>
<div id="container1"></div>
</section>
<section>
<div id="container2"></div>
</section>
$('#container1').okvideo({
source: 'Video1 Url',
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false
});
$('#container2').okvideo({
source: 'Video2 URL',
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false
});
Now the above is causing the 2nd video to overwrite the first video in it's container. Which is not the desired effect. Can someone suggest a similar plugin that allows this or an overwrite to get this to work without recoding half of the plugin javascript?

Right so after a few hours of fighting I finally fixed this by rejigging the okfocus okvideo to take an extra option "newtarget" which identified if there where multiple videos on the page.
if (base.options.newtarget == undefined) {
base.options.newtarget = "";
}
var target = $("#" + base.options.newtarget) || base.options.target || $('body');
var position = target[0] == $('body')[0] ? 'fixed' : 'absolute';
All items being added to the page had the newtarget appended to the id e.g.
target.append('<div id="okplayer' + base.options.newtarget + '" style="pos.....
Then we add the options to the window data setting each option setting to take the newtarget as part of its naming convention(please ensure to format it in lowercase and strip extra '-' etc.)
$(window).data('okoptions' + options.newtarget.replace('-', '').toLowerCase(), base.options);
Then locate the function onYouTubePlayerAPIReady() or if vimeo's vimeoPlayerReady() and extended it with a class selector for the videos on the page
$(".videoClass").each(function(e) {
options = jQuery(window).data('okoptions' + $(this).attr('id').replace('-', ''));....
once these have been added you add an unobtrusive function to add all the options
var collection = $(".videoClass");
collection.each(function () {
$("#" + $(this).attr('id')).okvideo({
source: $(this).attr("data-link"),
volume: 0,
loop: true,
hd: false,
adproof: true,
annotations: false,
newtarget: $(this).attr('id')
});
});
This could probably be neatened up but as I was in a rush the is this working solution.

I spent a few hours working on this. This selected solution wasnt very helpful so I have a working, but certainly less than ideal solution. My goal was to have two fullscreen background videos when navigating with jquery.fullPage.js.
OKVideo injects html to enable the video, I grabbed this html for my first video and changed the youtube url, used jquery append to insert the new html video code into proper code section.
One problem I had was that the video didnt repeat properly - but I used jquery to fadeOut the video id once it was concluded. Im sure if you wanted it to repeat you could simply put the code into a js loop.
Here is the code I needed to 'append':
replace the sample video id "HkMNOlYcpHg" with your youtube video id, and replace example.com with your web domain.
jQuery('#section3').append('<div id="okplayer-mask1" style="position:
absolute; left: 0px; top: 0px; overflow: hidden; z-index: -998; height: 100%;
width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAPABAP
///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D);"></div><iframe id="okplayer1"
style="position:absolute;left:-10%;top:-10%;overflow:hidden;z-index:-999;
height:120%;width:120%;" frameborder="0" allowfullscreen="1" title="YouTube video
player" width="640" height="360" src="https://www.youtube.com/embed
/HkMNOlYcpHg?autohide=1&autoplay=1&cc_load_policy=0&controls=3&
amp;enablejsapi=1&fs=0&modestbranding=1&origin=http%3A%2F
%2Fexample.com&iv_load_policy=3&loop=1&showinfo=0&rel=0&
amp;wmode=opaque&hd=1"></iframe>');

How to get which element was clicked and the src attribute of said element in an iFrame

I have an iframe that's generated on-the-fly with the fancybox plugin. I want to get the clicked element inside of it and from that element get the src attribute but whenever I try I just get "undefined" as an answer.
what triggers the iframe creation is:
<a id="contentImageAJAX" class="iframe" href="/tools/images?keyword=cat" style="display:none;">g</a>
and
$('#contentImage').focus(function(){
var $contentImage = $('#contentImage');
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){tryMe($contentImage);}
});
I found out that the iframe created is #fancybox-frame so I tried:
$('#fancybox-frame').load(function(){
$('#fancybox-frame').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
but it didn't work and "tryMe" is this function:
function tryMe($cImg){
console.log($('#fancybox-frame').contents().find('clickable').attr('src'));
}
I've been trying several iterations of this for hours any idea what am I missing?

The selector inside tryMe method is is wrong find('clickable'). I think you are looking for find('.clickable').
Try this
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){parent.tryMe($contentImage);},
'onComplete': function(){
$('#fancybox-frame').contents().find('linkSelector').click(function(){
//Do you stuff here.
});
}
});

How to change video (and start playing immediately) in Flowplayer via Javascript?

It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.

See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>

See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);

$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.

You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'