Fancybox V2 CSS for V3
0
I am trying to migrate a project with Fancybox V2.5 to V3, but it needs to retain the original look.
How can I get the original X in a circle on the top right corner and other options such as rounded corners, shadow, etc to work in V3?
fancybox-2 fancybox-3
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
add a comment |
0
I am trying to migrate a project with Fancybox V2.5 to V3, but it needs to retain the original look.
How can I get the original X in a circle on the top right corner and other options such as rounded corners, shadow, etc to work in V3?
fancybox-2 fancybox-3
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
add a comment |
0
0
0
I am trying to migrate a project with Fancybox V2.5 to V3, but it needs to retain the original look.
How can I get the original X in a circle on the top right corner and other options such as rounded corners, shadow, etc to work in V3?
fancybox-2 fancybox-3
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
I am trying to migrate a project with Fancybox V2.5 to V3, but it needs to retain the original look.
How can I get the original X in a circle on the top right corner and other options such as rounded corners, shadow, etc to work in V3?
fancybox-2 fancybox-3
fancybox-2 fancybox-3
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
asked Nov 13 '18 at 22:09
user1480192user1480192
231216
231216
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:
$('[data-fancybox="images"]').fancybox(
toolbar : false,
smallBtn : false,
arrows : false,
idleTime : false,
loop : true,
transitionEffect : false,
animationDuration : 333,
afterLoad : function(instance, slide)
$('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
);
Demo - https://codepen.io/fancyapps/full/ePYNZo
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.
– Janis
Nov 14 '18 at 8:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290249%2ffancybox-v2-css-for-v3%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:
$('[data-fancybox="images"]').fancybox(
toolbar : false,
smallBtn : false,
arrows : false,
idleTime : false,
loop : true,
transitionEffect : false,
animationDuration : 333,
afterLoad : function(instance, slide)
$('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
);
Demo - https://codepen.io/fancyapps/full/ePYNZo
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.
– Janis
Nov 14 '18 at 8:31
add a comment |
1
You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:
$('[data-fancybox="images"]').fancybox(
toolbar : false,
smallBtn : false,
arrows : false,
idleTime : false,
loop : true,
transitionEffect : false,
animationDuration : 333,
afterLoad : function(instance, slide)
$('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
);
Demo - https://codepen.io/fancyapps/full/ePYNZo
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.
– Janis
Nov 14 '18 at 8:31
add a comment |
1
1
1
You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:
$('[data-fancybox="images"]').fancybox(
toolbar : false,
smallBtn : false,
arrows : false,
idleTime : false,
loop : true,
transitionEffect : false,
animationDuration : 333,
afterLoad : function(instance, slide)
$('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
);
Demo - https://codepen.io/fancyapps/full/ePYNZo
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
You could simply use callback to add additional elements and then use css snippets from v2 to style, for example:
$('[data-fancybox="images"]').fancybox(
toolbar : false,
smallBtn : false,
arrows : false,
idleTime : false,
loop : true,
transitionEffect : false,
animationDuration : 333,
afterLoad : function(instance, slide)
$('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
);
Demo - https://codepen.io/fancyapps/full/ePYNZo
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
answered Nov 13 '18 at 22:40
JanisJanis
6,26211422
6,26211422
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.
– Janis
Nov 14 '18 at 8:31
add a comment |
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.
– Janis
Nov 14 '18 at 8:31
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Thanks. But the rounded corners from the old fancybox-skin are missing? To which element should this be applied for an iframe?
– user1480192
Nov 14 '18 at 6:05
Since iframe (
.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.– Janis
Nov 14 '18 at 8:31
Since iframe (
.fancybox-iframe) covers whole parent element (.fancybox-content) and both can have background color, you have to set border-radius to both of those elements.– Janis
Nov 14 '18 at 8:31
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290249%2ffancybox-v2-css-for-v3%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
