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') );
Related
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');
});
});
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!
I want to make a jquery alert box with an body overlapping transparent background but it doesn't work, can somebody help me?
$("body").css({
'height' : '100%',
'height' : '100%',
});
$("#alert").css({
'height' : '100%',
'height' : '100%',
'left' : '0px',
'right' : '0px',
'top' : '0px',
'bottom' : '0px',
'z-index' : '98',
'background-color' : "rgba(0,0,0,1)",
});
$("#alertBox").css({
'border-color' : settings.bordercolor,
'border-width' : settings.borderwidth,
'border-style' : settings.borderstyle,
'border-radius' : settings.borderradius,
'background-color' : settings.backgroundcolor,
'color' : settings.color,
'padding' : settings.padding,
'width' : '500px',
'position' : 'absolute',
'left' : '30%',
'right' : '30%',
'top' : settings.top,
'text-align' : settings.align,
'z-index' : '98',
});
Hi you need to set position:fixed to the overlap div. Also set the width:100%' you have doubleheight` declarations.
And the rgba() has the alpha channel in 1 so change it for 0.2 to give it opacity.
I think to change something like as under:
<!DOCTYPE html>
<html>
<head>
<style>html{height:100%;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("body").css({
'height' : '100%',
'width' : '100%',
});
$("#alert").css({
'width' : '100%',
'height' : '100%',
'left' : '0px',
'right' : '0px',
'top' : '0px',
'bottom' : '0px',
'z-index' : '98',
'background-color' : "rgba(0,0,0,0.5)",
});
$("#alertBox").css({
'border-color' : settings.bordercolor,
'border-width' : settings.borderwidth,
'border-style' : settings.borderstyle,
'border-radius' : settings.borderradius,
'background-color' : settings.backgroundcolor,
'color' : settings.color,
'padding' : settings.padding,
'width' : '500px',
'position' : 'absolute',
'left' : '30%',
'right' : '30%',
'top' : settings.top,
'text-align' : settings.align,
'z-index' : '98',
});
});
</script>
</head>
<body>
<div id="alert"><div id="alertBox">AAA</div></div>
</body>
</html>
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'
});
}
);
This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// 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 = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + 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>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.
Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});
You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs