We Keep Coding

Post title in fancybox jquery

How can i call to the post title in this code in fancybox?
jQuery(document).ready(function() {
jQuery("a.popup, a[rel=group]").fancybox({
closeClick : true,
helpers : {
overlay : {
locked : false
}
}
});
jQuery(".video-popup").fancybox({
'width' : '70%',
'height' : '80%',
'autoScale' : false,
'type' : 'iframe',
closeClick : true,
helpers : {
overlay : {
locked : false
}
}
});
jQuery('.menu a').click(function(){
var href = jQuery(this).attr('href').replace('#filter=','').replace(',+.menu', '');
jQuery('.element.portfolio a.popup').attr('data-fancybox-group', 'invisible');
jQuery('a.popup', href).attr('data-fancybox-group', 'visible');
});
});

Titanium error in creating a form

I am new to titanium appcelerator and getting an error while creating a form with textfields and buttons..In this page there are 3 textfields and a button
Here is my code
var win1 = Titanium.UI.currentWindow;
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor:'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom: 40,
text:'Registration',
color:'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Username',
color:'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text:'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40, color:'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Password',
color: '#336699',
keyboardType: Titanium.UI.KEYBOARD_PHONE_PAD,// This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType: Ti.UI.RETURNKEY_DONE,
passwordMask:true,//This makes the letter display in ***** format
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Fullname',
color:'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title: 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click',function(e)
{
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url:'page2.js'
});
win2.open();
});
aview.add(buttons);
and these are the errors which I get when running the application,please help
Errors:
[ERROR] : TiExceptionHandler: (main) [235,235] ----- Titanium Javascript Runtime Error -----
[ERROR] : TiExceptionHandler: (main) [0,235] - In app.js:1,69
[ERROR] : TiExceptionHandler: (main) [0,235] - Message: Uncaught TypeError: Cannot call method 'add' of null
[ERROR] : TiExceptionHandler: (main) [0,235] - Source: h:Titanium.UI.FILL,height:Titanium.UI.FILL,layout:"vertical"});win1.add(aview)
[ERROR] : V8Exception: Exception occurred at app.js:1: Uncaught TypeError: Cannot call method 'add' of null

Check this out : I think this is your app.js, if yes it will work.
var win1 = Titanium.UI.createWindow({backgroundColor: "#ffffff"});
win1.open();
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor : 'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
var headings = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom : 40,
text : 'Registration',
color : 'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Username',
color : 'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text : 'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
color : 'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Password',
color : '#336699',
keyboardType : Titanium.UI.KEYBOARD_PHONE_PAD, // This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType : Ti.UI.RETURNKEY_DONE,
passwordMask : true, //This makes the letter display in ***** format
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Fullname',
color : 'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title : 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click', function(e) {
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url : 'page2.js'
});
win2.open();
});
aview.add(buttons);

Calling FancyBox from custom menu

I have a custom menu with a fixed position that allows users to navigate through FancyBox. It all works fine, except the part that the animation effects (those you have when you navigate through FancyBox by clicking the images) do not apply to the menu.
What do I have to do to get it working?
http://jsfiddle.net/PwMjP/866
FancyBox settings:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
wrapCSS : 'fancybox-custom-white',
closeClick : false,
topRatio : 0,
scrolling : 'no',
width : '100%',
padding : '0',
fitToView : false,
transitionIn : 'elastic',
transitionOut : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false,
nextMethod : 'changeIn',
nextSpeed : 250,
prevMethod : false,
helpers : {
title : {
type : 'inside'
}
}
});
$(".fancybox").click(function(){
$(".menu-content").css('background-color','rgba(0,0,0,0.95)');
});
P.S.: Would be great if anyone could post some working code or a fiddle. Thanks!

Hide Fancybox triggered on Page Load on Mobile

Site: beauforgovernor.com
I have a fancybox triggered on page load (only on the homepage), but I don't want it to show up on mobile phones; however, I do still want it to show up on tablets.
I'm not sure how to code this.
This is the JS i'm currently using:
<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});

Youll want to choose which screen dimensions you consider as mobile, might be hard as some tablet are barely bigger than some smartphone...
$(function(){
var viewport = {
width : $(window).width(),
height : $(window).height()
};
if(viewport.width>"480" && viewport.height>"600")
{
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
);

Adding caption to fancybox images/video

I currently have fancybox displaying all the correct images/videos that it should. However, I cannot seem to get it to display the caption associated with each time fancybox is called.
I am using Fancybox V2.1.5
$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titleShow' : 'true',
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true,
},
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
});
return false;
});
});
I am using caption= within the sections it is required, however it still doesn't display the caption text :(
I am also using the latest JQuery plugin with it.
Any help would be great, thanks!
EDIT: PROBLEM SOLVED:
$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'title' : this.title,
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
});
Only needed title : this.title,

If I remember well(I checked here too: http://fancybox.net/blog ) you need these parameters
'titlePosition' : 'inside',
'titleFormat' : formatTitle
Where the formatTitle is a function which appends the caption
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span><img src="/data/closelabel.gif" /></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}
I think there is something wrong here
this.title = $(this.element).attr('caption');
Try using ids with something like this(wherever it does not fit use an appropriate id)
$(this).html( $(this).attr('caption') );