Vimeo API .play() only triggers audio inside of slider - vimeo

Using Swiper.js along side the Vimeo API. Have a custom thumbnail overlayed on the Vimeo embed with some JS to trigger the .play() method. This works fine outside of the slider, but if the video is embedded in a slide, it only plays the audio. The video appears but it's stopped, and can be played like normal.
My JS:
$(document).ready(function(){
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
spaceBetween: 100,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChange: function () {
$('.swiper-video').each(function(){
var iframe = $(this).data('player');
var player = new Vimeo.Player($('#'+iframe));
$(this).children( '.vidthumbnail' ).show();
player.pause();
});
}
}
});
$('.vidplay_btn').each(function(){
$(this).click(function(){
var video = $(this).data('video');
var iframe = $(this).data('player');
var player = new Vimeo.Player($('#'+iframe));
$( '.vidthumbnail' ).show();
$( '#'+video+' .vidthumbnail' ).hide();
player.play();
});
});
});

Related

show google map inside a jquery dialogue form

Hi i'm trying to show a map in my form inside a jquery dialogue,
my jquery dialogue return a partial view where i put this code inside #section scripts and i called also the maps api
<script type="text/javascript">
$(document).ready(function () {
Initialize();
});
// Where all the fun happens
function Initialize() {
// Google has tweaked their interface somewhat - this tells the api to use that new UI
google.maps.visualRefresh = true;
var Liverpool = new google.maps.LatLng(53.408841, -2.981397);
// These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
var mapOptions = {
zoom: 14,
center: Liverpool,
mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};
// This makes the div with id "map_canvas" a google map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
var myLatlng = new google.maps.LatLng(53.40091, -2.994464);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Tate Gallery'
});
// You can make markers different colors... google it up!
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
// a sample list of JSON encoded data of places to visit in Liverpool, UK
// you can either make up a JSON list server side, or call it from a controller using JSONResult
var data = [
{ "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours": "9-5, M-F", "GeoLong": "53.410146", "GeoLat": "-2.979919" },
{ "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
{ "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
{ "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" }
];
// Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
$.each(data, function (i, item) {
var marker = new google.maps.Marker({
'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
'map': map,
'title': item.PlaceName
});
// Make the marker-pin blue!
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')
// put in some information about each json object - in this case, the opening hours.
var infowindow = new google.maps.InfoWindow({
content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
});
// finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
})
}
i'm calling the map inside a div :
<div id="map_canvas" style="height: 240px; border: 1px solid gray"> map here</div>
but the problem that my map is not showing in the dialogue, even though it works well in normal page
any help plz !?
I've solved this issue with the following code:
this code is on the main view, the #next is a trigger of the form to submit, and the #dialog is inside the #form.
$(function () {
datepair();
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 720,
width: 700,
resizable: false,
title: 'Verify Location',
show: "fade",
hide: "fade",
open: function (event, ui) {
var form = $('#form');
$.ajax({
url: form.attr('actoin'),
type: form.attr('method'),
data: form.serialize(),
context: this,
success: function (result) {
$(this).html(result);
}
});
}
});
$('#next').click(function (e) {
$('#dialog').dialog('open');
return false;
});
});
this code is on the partialView
$(function () {
window.$required = $('<div></div>').dialog({
autoOpen: false,
resizable: false,
modal: true,
title: 'Verity Location Error',
buttons: {
"Ok": function () {
$(this).dialog('close');
callback();
}
}
});
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
Initialize();
}
});
return false;
});
function callback() {
$('#dialog').dialog('close');
}
function Initialize() {
//init the map
}
and this is the controller
public ActionResult PartialViewMapController()
{
return PartialView();
}
Hope it not to late for you :)

FloatingTips with stay active on hover

I am using FloatingTip tool tip for my project and i am struggling for how to stay active and not to be closed when cursor is on tooltip.
Hear is jsFiddle [http://jsfiddle.net/SLvUz/3/][1]
For example: When mouse hover to tooltip and anchor Let me see! tooltip stay open.
Detail link: https://github.com/lorenzos/FloatingTips
Any ideas or suggestions? Thanks.
Unfortunately this plugin doesn't have such option at the moment, but it has methods and events, so you can implement this behavior using them. The code may look like following:
$$('#advanced a').each(function(elem){
var instance = new FloatingTips(elem, {
// example options
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 }, // Position offset {x, y}
// override show/hide events
showOn: null,
hideOn: null
});
// customize tooltip behavior
var delay = 100, timer;
var tipHover = function() {
clearTimeout(timer);
}
var tipLeave = function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
instance.addEvents({
show: function(tip, elem){
tip.addEvents({
mouseover: tipHover,
mouseout: tipLeave
});
},
hide: function(tip, elem){
tip.removeEvents({
mouseover: tipHover,
mouseout: tipLeave
});
}
});
elem.addEvents({
mouseover: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.show(elem);
}, delay);
},
mouseout: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
});
});
Check updated fiddle here: http://jsfiddle.net/SLvUz/455/

How to set another function to closebutton in panorama

(sorry for my english) i have a problem,,, I´m trying to create a web in which user click on a polygon and it move user to another page with Google Street View Panorama (this i have). But i also need a code to move user back from "panorama page" to "polygons page" after clicking on close button in panorama. I tried to use the same code like i used before to move user to "panorama page" but it doesn´t work (it just closes panorama, but doesn´t move back to "polygons page"). The line:
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
is the code to move user back to "polygons page" (index.html). Here is the whole code:
function initialize() {
var panoOptions = {
pano: 'Kuchyn',
enableCloseButton: true,
pov: {
heading: 0,
pitch: 0,
zoom: 0
},
panoProvider: getCustomPanorama,
visible: true};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
return 'images/Untitled.jpg';}
function getCustomPanorama(pano, zoom, tileX, tiley) {
if (pano == 'Kuchyn') {
return {
location:
{pano: 'Kuchyn',
description: 'Kromeriz - Kuchyn'},
links: [],
copyright: 'Oznog (c) 2013',
Heading: 180,
tiles:
{tileSize: new google.maps.Size(4096, 2048),
worldSize: new google.maps.Size(4096, 2048),
centerHeading: 180,
verticalFOV: 90,
getTileUrl: getCustomPanoramaTileUrl}
};
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
Please help me, Jan.
Your eventListener for panorama is outside initialize function, move it under panorama declaration as follows:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
// move it here
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; });
This is because you are not declaring panorama as a global variable, so it cant be attached correctly. Other option is to declare it as global variable var panorama; to above your initialize method.
Cheers.

How to add multiple markers on mobile Google Map and display the content when click?

hello i am working on the phonegap apps which can display the location markers on google map.
It is supposed to have a detail box pop up when i click on the marker, but it does not function.
can anyone help me to correct the code?
many thanks
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 8 };
////////////////////////////////////////////////////////////
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true,
'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
$('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.9973333,12.0502107)})
.click(function() {
var self = this;
self.openInfoWindow({ 'content': 'Hello Worl23!' }, this);
} )
$('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.373333,12.0502107)})
.click(function() {
var self = this;
self.openInfoWindow({ 'content': 'Hello Worl234!' }, this);
} )
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
There is a easier way to use Google Maps api,https://github.com/HPNeo/gmaps. And what you need almost like this,http://hpneo.github.com/gmaps/examples/markers.html, you click the marker and the detail info shows

jquery-ui-map load json and update markers

I've searched all over the web and SO, but I couldn't figure this out.
Here's the problem:
I'm using the below demo from jquery-ui-map site to load a JSON file:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html
It works fine to load my markers, but I need to refresh its content every 30 seconds and grab new markers.
At first I thought I would just call the function again, but that left the markers there. After some research I found out I needed to clear the markers (not so easy on V3, but I was able to to do) but the issue is that I can't get the markers to show again.
If I use the destroy function, then I'm able to reload new markers and remove the old ones, but that causes the map to blink. When I try to clear markers then no new markers are shown.
Any help is greatly appreciated.
Below is my code:
<script type="text/javascript">
function mapTest() {
$('#map_canvas').gmap('destroy');
//clearMap();
demo.add(function() {
$('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
var self = this;
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
}});
}).load();
}
function clearMap(){
$('#map_canvas').gmap('clear', 'markers');
}
mapTest();
setInterval(mapTest, 30000 );
</script>
Cheers.
Your map initialization function is inside the mapTest() function - which you call over an over again every 30 seconds with setInterval.
That is wrong, because you are essentially reloading the map( you destroy it and then recreate it again every 30 seconds ), and that is why it blinks.
Place the map initialization outside the mapTest(), but clear and retrieve new markers from within the mapTest()
Update:
var mapOptions = {
disableDefaultUI: true
// add more options if you wish.
};
function mapTest() {
$('#map_canvas').gmap('clear', 'markers'); // clear old markers
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
var self = this;
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
}
$(function(){
$('#map_canvas').gmap(mapOptions, function(){
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
var self = this;
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
});
setInterval(mapTest, 30000 );
});
I found a Solution to update markers without reloading the map. Try this code...
$(document).ready(function() {
var $map = $('#map_canvas');
App.drawMap($map);
setInterval(function() {
$('#map_canvas').gmap('clear', 'markers');
App.drawMap($map);
},10000);
});
var App = {
drawMap: function($divMap) {
Http.doAjaxGetJson('../../js/testjson.json', function(data) {
for (var k in data.gpsData) {
$divMap.gmap({ 'center': new google.maps.LatLng(data.gpsData[k].latitude,data.gpsData[k].longitude),'zoom':15, 'callback': function() {}});
$divMap.gmap('addMarker', {
'title':data.obj.name,
'position': new google.maps.LatLng(data.gpsData[k].latitude, data.gpsData[k].longitude),
'bounds': false,
}).click(function() {
var $_obj = $(this);
});
}
});
}
};
By this code markers will update in every 10 seconds..