I have two different openers for fancybox on the same page. I want to have a black border on .fancybox2 and the regular white on .fancybox1. There are also some other minor differences. This is the script.
$(".fancybox").fancybox1({
padding:10,
helpers: {
title: {
type: 'inside'
},
overlay: {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
//Fancy box number 2 not working with different style
$(".fancybox2").fancybox({
padding:10,
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
title: {
type: 'inside'
},
overlay: {
locked: false,
css : {
'background': 'rgba(255,255,255, 0.6)'
}
}
}
});
I have tried to use this style but that will affect both, they will both have black border.enter code here
<style type="text/css">.fancybox-skin {background-color: #000 !important;}</style>
Anyone got some suggestions how to solve this?
Consider declaring your CSS using the Fancybox's Callbacks. For example; Here I can make use of the beforeShow event to change .fancybox-skin to white for every element with class .fancybox1
$(".fancybox1").fancybox({
beforeShow: function(){
// here set the border color for each class
$(".fancybox-skin").css("backgroundColor","white");
},
helpers : {
overlay : {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
Here is a full demo as per your requirements
Related
We're using fancybox 2 to launch a donation process in our app. Upon completion, the modal closes and opens up another "thank you" modal. We're seeing some odd behavior if you close that "thank you" modal and click on the "Donate" button again. The modal background overlay briefly appears and then disappears, and the modal doesn't show up. But, if you click it again, it works just fine.
I haven't been able to find any references to this happening to anyone else. We have a live demo where you can see the behavior here: https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate
(The donation modal should open automatically, but if not, click "Support Me") Make a donation using a test credit card number (e.g., 4111111111111111) -- obviously, this won't actually charge you anything.
The relevant javascript code starts at line 162 if you view source. (I'll also include it at the end of this post).
I thought maybe it was because I wasn't explicitly closing any fancybox modals prior to opening the new ones, but that didn't change anything. So, I'm open to suggestions on what may be causing this. It's very weird.
Thanks!
Relevant JS:
<script type="text/javascript">
jQuery(function($) {
openExpressDonate = function() {
$.fancybox({
closeBtn: false,
closeEffect: 'none',
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
margin: 0,
maxWidth: 400,
height: 'auto',
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
$('.js-express-donate').on('click', function(e) {
e.preventDefault();
if (window.ga) {
ga('send', {
hitType: 'event',
eventCategory: 'Express Donate - Participant',
eventAction: 'Donation Started',
eventLabel: 'Event 1183'
});
}
openExpressDonate();
});
if (location.hash && location.hash == '#donate') {
$('.js-express-donate').click();
}
resizeExpressDonateModal = function() {
$.fancybox.update();
}
showExpressDonateThankYou = function(target, data) {
$.fancybox({
afterShow: function () {
fancyParent = $('.fancybox-wrap').parents(); // normally html and body
fancyParent.on('click.modalThanks', function () {
$.fancybox.close();
fancyParent.off('click.modalThanks');
});
$('.fancybox-wrap').on('click', function (event) {
// prevents closing when clicking inside the fancybox wrap
event.stopPropagation();
});
},
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
margin: 0,
maxWidth: 400,
minHeight: 300,
modal: 1,
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
});
</script>
We've solved this. A fresh set of eyes found that we had an explicit fancybox.close() call that was firing when clicking on the "thank you" modal's parent (a holdover from another feature where we have such a modal, but the user can't re-open it from that same page). We removed that and it appears to be fixed.
I have this fancybox code -->
jsfiddle: http://jsfiddle.net/uZCC6/5192/
CSS:
.hidden {
display: none;
}
JQUERY:
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
I'm trying to add a description to the image popping out using this method provided by JFK Adding a title to fancy box.
<img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
}); // fancybox
}); // ready
However when i try to implement his code, the thumbnails are disappearing, any help on the correct method of applying his answer?
I have some sample code up at http://defyordie.com/testbed/
This is for my portfolio and I'm working on replacing my old plugin with fancybox. My issue is with the responsiveness of the work sample popups. Scroll down to my 'work' section and click on one of the top 3 boxes since those are finished.
I'm working on a big cinema display, so I've noticed that as i expand my window, the royalslider running the slideshow expands horizontally but doesnt expand vertically until i make the browser window almost entirely fill my screen. I had hoped that it would scale proportionally. I've either initalized the fancybox incorrectly, royalslider incorrectly, or I have some sort of CSS issue.
The code :
$(document).ready(function () {
$('.fancybox').fancybox({
beforeShow: function () {
$(window).on({
'resize.fancybox': function () {
$.fancybox.update();
}
});
},
afterClose: function () {
$(window).off('resize.fancybox');
},
padding: 0,
margin: [60, 15, 0, 15],
nextEffect: 'fade',
prevEffect: 'none',
helpers: {
overlay: {
locked: false
}
},
afterLoad: function () {
$.extend(this, {
type: 'html',
width: '95%',
height: '100%',
minWidth: '930px'
});
}
});
});
I'm using Flow Player in ASP.NET Web Forms (VS 2010) and want to set some of its properties, like autoPlay, dynamically (read from a config file). But autoPlay don’t seem to be set dynamically. For example, the following code with autoPlay set to true (or false) works correctly:
function initialize() {
player = flowplayer("flowPlayer", "<%=HttpType %>://releases.flowplayer.org/swf/flowplayer.commercial-3.2.15.swf", {
key: '#$b9299630d834a59dcb9',
clip: {
autoPlay: true,
autoBuffering: true,
scaling: 'fit',
onFinish: function () {
}
},
canvas: {
// configure background properties
background: '#000000',
// remove default canvas gradient
backgroundGradient: 'none'
}
});
}
However, obtaining the value AutoPlay from code-behind (which would obtain a value from a config file) doesn’t work. Is there a better way to set the value dynamically? I can’t find online documentation that addresses setting these value dynamically:
function initialize() {
player = flowplayer("flowPlayer", "<%=HttpType %>://releases.flowplayer.org/swf/flowplayer.commercial-3.2.15.swf", {
key: '#$b9299630d834a59dcb9',
clip: {
autoPlay: <%=AutoPlay%>,
autoBuffering: true,
scaling: 'fit',
onFinish: function () {
}
},
canvas: {
// configure background properties
background: '#000000',
// remove default canvas gradient
backgroundGradient: 'none'
}
});
}
Thanks!
<body/>
<div id="player" class="fixed-controls"></div>
HTML
<script>
$(function() { // make sure the DOM is ready
$("#player").flowplayer({
ratio: 5/12,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
playlist: [
[
{ webm: "http://stream.flowplayer.org/bauhaus.webm" },
{ mp4: "http://stream.flowplayer.org/bauhaus.mp4" },
{ flash: "mp4:bauhaus" }
]
]
}).one('ready', function(ev, api) {
api.resume();
});
});
Here is a piece of code from FancyBox ...
JQUERY
// Set custom style, close if clicked, change title type and overlay color
$(".mainmenu").fancybox({
wrapCSS: 'fancybox-custom',
closeClick: false,
topRatio: 0,
scrolling: 'no',
fitToView: 'false',
helpers: {
title: {
type: 'inside'
},
overlay: {
css: {
'background': 'url(img/misc/fancybox_overlay.png)'
}
}
}
});
and additionally, I would like to add the following line to it, but somwhow it doesn't seem to work - getting tons of syntax errors here.
JQUERY
$(".blabla").css({"background-color":"yellow"});
Would be great if anyone could help.
Add your css here:
css : {
'background' : 'url(img/misc/fancybox_overlay.png)',
'background-color': 'yellow',
}
EDITED:
After seen the above discussion on the basis of the answer will be:
$(".maincontent").click(function(){
$(this).css('background-color','yellow');
});
I reckon that should be:
$(".blabla").css("background-color", "yellow");