We Keep Coding

rightnavbutton not changing (titanium alloy)

I am trying to change my right nav button:
function load_Profile() {
if (editProfileFlag == 0) {
$.win.rightNavButton = Ti.UI.createView({
width : 'auto',
height : 'auto'
});
var confirm = Titanium.UI.createAlertDialog({
title : 'Block',
message : 'Are you sure? This cannot be undone. ',
buttonNames : ['Yes', 'No'],
cancel : 1
});
//add blocked button
var blockButton = Titanium.UI.createButton({
title : 'Block',
top : 0,
zIndex: 10
});
//view mode
if (args.view == 1) {
} else {
$.win.rightNavButton.add(blockButton);
}
[...]
I use the same controller, for something else, so I need to override the existing rightnavbutton and replace it with a new one. Here is the xml:
<Alloy>
<Window id="win" >
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
[...]
But the new button does not appear.
Any idea how to swap the right nav bar buttons?
Thanks.

How can we play .mov file in fancybox, using jquery?

My goal was to play a mov-file that's already uploaded on my server and it'd be nice to have it pop up inframe using fancybox and jquery. However I have attempted with no luck substituting .mov to swf-type in these codes:
<a class="various" href="Poem.MOV">Play movie</a>
with this Jquery from the fancybox website's suggestion-list:
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
This only sent me to a different webpage playing that mov-file. A different and closest code that ever worked by popping the video up in a fancybox inframe successfully BUT does not play or even show up at all. It only showed up in white frame without playing the film:
HTML:
<a class="fancybox" data-type="swf" href="Poem.MOV" title="Poem">Play Movie</a>
JAVASCRIPT:
<script>
jQuery(document).ready(function($){
$(".fancybox").on("click", function(){
$.fancybox({
href: this.href,
type: $(this).data("type")
}); // fancybox
return false
}); // on
}); // ready
</script>
I wonder if this is feasible to play .mov on our own server using fancybox without using third-party server such as YouTube or Vimeo. Thanks for your time.

You can use the JWplayer player with fancybox to play the .mov or other video formats.
below is the code to integrate jWplayer with fancybox:
$(".various").fancybox({
fitToView: true,
content: '<div id="myJWPlayer">Loading the player ...</div>',
scrolling: 'no',
afterShow: function () {
var video_href= j(this.element).data('url');
$('#myJWPlayer').css({height:'400px',width:'500px'});
setTimeout(function(){
jwplayer('myJWPlayer').setup({
'file' : video_href,
"autostart" : "true",
"controlbar" : "bottom",
"flashplayer" : "url-to-/jwplayer.flash.swf",
"volume" : "70",
"width" : 500,
"height" : 400,
"mute" : "false",
"stretching" : "fill"
});
updateViewTime(vid);
},100);
}
});

I had a problem where the HTML5 video player worked, but loading the same .mov into fancybox did not play. My solution was to either add the url of the video directly to the video tag, or to set the "type" attribute of the source tags as empty in the afterLoad() callback.
const attachment_movie = [ 'mp4', 'mov' ];
$.fancybox.open(gallery, {
buttons: [
'download',
'zoom',
'slideShow',
'thumbs',
'close'
],
thumbs: { 'autoStart': true },
afterLoad : function() {
var href = this.src;
var ext = href.substr(href.lastIndexOf('.') + 1).toLowerCase();
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video').prop('src', href);
// or
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video source').prop('type', '');
}
});

I managed to workaround the problem by replacing template for <video> tag. I added src="{{src}}" to the video tag. You can also pass that as a part of options.
$.fancybox.defaults.video = {
...$.fancybox.defaults.video,
tpl: `
<video class="fancybox-video" poster="{{poster}}" src="{{src}}">
<source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos,
download and watch with your favorite video player!
</video>`
};

Basic JQuery Slider Not working for Slide

I am using a Basic JQuery SLider from the following site.
http://www.basic-slider.com/
When I use animtype: 'fade' it works perfectly, but when I use animtype: 'slide' images does not appear.
My code is below.
$('#banner-slide').bjqs({
height : 500,
width : 800,
animspeed : 1000,
responsive : true,
randomstart : true,
showmarkers : false,
hoverpause : false,
animduration : 350,
prevtext : '<img src="../Images/arrow-prev.png">',
nexttext : '<img src="../Images/arrow-next.png">',
animtype : 'fade',
responsive : true
});

the prevtext and nexttext are not supposed to be the image src
add the images in the <li></li>
<div id="my-slideshow">
<ul class="bjqs">
<li><!-- Any content you like --></li>
<li><!-- Can go inside these slides--></li>
</ul>
</div>

Conflict between two scripts' links

I want to apply an image filtration technique and also want to make the image opens in a fancy box, I added the code and made links to the scripts that I need but while adding the below script link :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
above the filtering links and script, the filter works but the fancy box doesn't want to work and while adding the same link above fancy box links and script, the fancy box works but the filter doesn't want to work...
Here is some of my code:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Add jQuery library of fancybox -->
<script type="text/javascript" src="image-library/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="image-library/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="image-library/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="image-library/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = '';
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="filter/filtrify.css">
<script src="filter/highlight.pack.js"></script>
<script src="filter/script.js"></script>
<script src="filter/filtrify.min.js"></script>
<script type="text/javascript">
$(function() {
var ft = $.filtrify("cbp-rfgrid", "placeHolder");
$("a#1").click(function() {
ft.trigger({ categories : ["Photography"] });
});
$("a#2").click(function() {
ft.trigger({ categories : ["Retouching"] });
});
$("a#3").click(function() {
ft.trigger({ categories : ["CGI"] });
});
$("a#4").click(function() {
ft.trigger({ categories : ["Oranges"] });
});
$("div#triggers > a").click(function() {
$(this)
.addClass("selected")
.siblings("a")
.removeClass("selected");
});
$("a#reset strong").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
$("li").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
});
</script>
</head>
Also you can refer to the below link to see it alive with the fancy box problem...
http://arqqa.net/aostudio-beta/

In your live example, first you are calling upon jQuery (1.10.1), then you are embedding the Fancybox scripts, followed by the script to execute fancybox.
After your actions section you are calling upon another jQuery (1.8.2). Having multiple instances of jQuery is likely to give you the conflict.
Use jQuery only once, and make it the first script to be executed.
Make sure your actions are the last script to be executed.
Place your actions in an external javascript file.
Place javascript before the closing body tag in your document.

you can use two versions of jquery at the same time:
https://api.jquery.com/jQuery.noConflict/

Unfortunately I can confirm that this won't work with later versions of jQuery (1.0.7). I downloaded the demo found at
http://tutorialzine.com/2011/02/converting-jquery-code-plugin/
and replaced the jQuery lib reference to a later version and the ddl fails to function.
NB - I'm also aware that I'm not providing an answer here, but in the infinite wisdom of the site administrators I'm not allows to comment without having reached the required number of brownie points!

Add atrributes from image to javascript array and display

I need to add the attributes from the images inside this div to an JS array and run Supersized, with these images:
<div id="dgaslides">
<img src="img/temp/topimg01.jpg" title="Image 1">
<img src="img/temp/topimg02.jpg" title="Image 2">
<img src="img/temp/topimg03.jpg" title="Image 3">
</div>
My JS:
jQuery(function($){
var img_length = $('#dgaslides img').length-1;
var dgaslides = [];
$('#dgaslides img').each( function(i){
var src = $(this).attr('src');
var title = $(this).attr('title');
dgaslides.push("{image : '" + src + "', title : '" + title + "'}");
if(img_length == i){
$.supersized({
// Functionality
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
horizontal_center : 1, // Centers image horizontally. When turned off, the images resize/display from the left of the page.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : dgaslides
});
}
}); });
It does work, as im getting 3 images in my output, but the link (src) is "Undefined", and the title isn't there either?
The right way to hardcode it is:
var dgaslides = [ // Slideshow Images
{image : 'img/temp/topimg01.jpg', title : 'Reception'},
{image : 'img/temp/topimg02.jpg', title : 'Reception 2 og noget mere tekst her'},
{image : 'img/temp/topimg03.jpg', title : 'Reception 3'}
];
Can anyone help me figuring out what i'm doing wrong?

You could use jQuery's map method to simplify the task. Following is the code.
jQuery(function ($) {
var dgaslides = $('#dgaslides img').map(function () {
return {
image: $(this).attr('src'),
title: $(this).attr('title')
};
});
$.supersized({
slide_interval: 3000,
transition: 1,
transition_speed: 700,
horizontal_center: 1,
slide_links: 'blank',
slides: dgaslides
});
});
Hope this helps.

I think you need to pass an array of objects and not an array of strings.
dgaslides.push({image : src, title : title });

You're saving the strings to the array rather than the objects.
Here's a JSFiddle with a modified version of your code (without the supersized function) that works as intended: http://jsfiddle.net/SBuXF/
Main change: dgaslides.push({image : src, title : title});
I've output the generated array to the console, followed by your hardcoded one - they're identical.
Edit: Your hardcoded titles didn't match the HTML, so the content of the two arrays is slightly different, but they are both formatted correctly. A corrected fiddle is here: http://jsfiddle.net/SBuXF/1/