Using fancyBox, I want to open an images gallery clicking on a single button. This is clearly detailed on the site but it doesn't work?! I am not an expert and maybe I am doing something wrong. Here is the code:
HTML:
<a class="open_fancybox" href="image1.jpg">BUTTON</a>
JavaScript:
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'image1.jpg',
title : '1st title'
},
{
href : 'image2.jpg',
title : '2nd title'
},
], {
padding : 0
});
return false;
});
External resources used: jquery.fancybox.js & jquery.fancybox.css
Anyone who knows what's wrong?
Related
I am using swal2 to get a confirm dialog on a page (sourcepage.html) after clicking on a link before redirecting to another page (targetpage.html).
This works well so far.
However, after being redirected to targetpage.html and want to go back using the browsers "back-button" to sourcepage.html, the page is "darkened" and not usable anymore and this is because the
<div class="swal2-container .....> is still there and covers the page completely.
If I hit "reload" on that page, the container is gone.
Here´s my current code:
HTML
Redirect me to targetpage.html
JS
function JSconfirm(){
swal.fire({
title: "Redirect",
type: "warning",
html: "Here comes custom text with html",
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "No",
confirmButtonText: "Yes"
}).then(function (result) {
if (result.value) {
window.location = "targetpage.html";
}
});
}
What can I do to make sure that this div isn´t visible anymore. It should be "deleted" from sourcepage.html after clicking "yes" to confirm to be redirected to "targetpage.html".
Thanks a lot
I found a solution myself
Adding swal.close and a timeout before the redirect did the trick.
}).then(function (result) {
if (result.value) {
swal.close();
setTimeout (
() => {
window.location.href = "targetpage.html";
},
1 * 500
);
}});
}
I’m trying to achieve the following configuration in my Ionic (3.9.2) app using the Ionic 2 DeepLinker, where I have regular versions of my pages at index.html, /terms, and /card, and differently styled versions at /club/index.html, /club/terms and /club/card:
#NgModule({
declarations: MyComponents,
imports: [
BrowserModule,
HttpClientModule,
// DeepLinker!!
IonicModule.forRoot(MyApp, { locationStrategy : 'path' }, {
links : [
{ component : HomePage, name : 'Home', segment : '' },
{ component : TermsPage, name : 'Terms of Use', segment : 'terms' },
{ component : CardPage, name : 'Savings Card', segment : 'card' },
// Club Aliases; these pages will have the same content as above,
// but slightly different styles, defined elsewhere.
{ component : HomePage, name : 'Home', segment : 'club' }
{ component : TermsPage, name : 'Terms of Use', segment : 'club/terms' },
{ component : CardPage, name : 'Savings Card', segment : 'club/card' },
//...
Is there a way to achieve this using the Ionic 2 DeepLinker?
Some notes:
We navigate to pages by following links (and preventing default):
Terms of Use
where openPage pushes a page onto the nav stack using NavController's Nav Component, like so:
$event.preventDefault();
this.nav.push(page.component, params);
We also had to setup our webserver to rewrite subdirectories (e.g. “/terms”) to index.html. Info: https://github.com/ionic-team/ionic/issues/10565#issuecomment-282659179
And I also forked #ionic-app-scripts to get this (rewrite to index.html) working on my local development (e.g. live reload) server:
https://github.com/senseijames/ionic-app-scripts
In the DeepLinkConfig links 'name' is simply a string identifier which can be used to resolve the page component by its string alias. I would recommend omitting whitespaces and capitalization and adjusting your implementation like so:
Refactor DeepLinkConfig
links : [
{ component : HomePage, name : 'home', segment : '' },
{ component : TermsPage, name : 'terms', segment : 'terms' },
{ component : CardPage, name : 'card', segment : 'card' },
{ component : HomePage, name : 'club', segment : 'club' }
{ component : TermsPage, name : 'club-terms', segment : 'club/terms' },
{ component : CardPage, name : 'club-card', segment : 'club/card' }
]
Refactor click handler
openPage(name: string, params: any) {
this.nav.push(name, params);
}
Refactor button markup
<button ion-button (click)="openPage('terms', {})">Terms of Use</button>
<button ion-button (click)="openPage('club-terms', {})">Club Terms</button>
<button ion-button (click)="openPage('club-card', { id: 1234, username: 'someuser', rewards: false })">Savings Card</button>
This way you can navigate by name and not have to import page components into each controller in order to link to the page component itself. Also ion-button attribute decorated button elements are the preferred navigation UI per IonicFramework documentation and using them would avoid the need to prevent the default behavior of vanilla html anchors.
I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:
<script type="text/javascript">
var file_frame;
jQuery('.button-secondary').live('click', function( event ){
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
jQuery('#IMGsrc').val(attachment.url);
});
file_frame.open();
});
</script>
The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:
displaySettings: true,
displayUserSettings: true
But it also doesn't work.
Does the page have the <script type="text/html" id="tmpl-attachment-details">... template in the source? If not, you'll need to call wp_print_media_templates(), to write the styles from wp-includes/media-template.php
This is the code I use. Source: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ It seems to work pretty well, but the sidebar on the left is missing. (Intentional, but I don't want it anyways).
<?php wp_enqueue_media(); ?>
<script>
function showAddPhotos() {
// Uploading files
var file_frame;
// event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
}
</script>
I'm using:
https://github.com/frozeman/MediaEmbed
To embed youtube videos etc in CKEditor, and it works fine, except i've got an error in IE9... The more annoying thing is that it's not even showing up as an error, it's just not working!
In firefox the box opens up and then after adding the embed code, you click "ok" and it puts it in the editor, however in ie9, the box opens up, and you can paste your code the box, you can click the cancel button and the box closes, but if you click ok, nothing at all happens!
Any help appreciated, completely blown away by this now!
Code here:
/*
* Embed Media Dialog based on http://www.fluidbyte.net/embed-youtube-vimeo-etc-into-ckeditor
*
* Plugin name: mediaembed
* Menu button name: MediaEmbed
*
* Youtube Editor Icon
* http://paulrobertlloyd.com/
*
* #author Fabian Vogelsteller [frozeman.de]
* #version 0.1
*/
( function() {
CKEDITOR.plugins.add( 'mediaembed',
{
init: function( editor )
{
var me = this;
CKEDITOR.dialog.add( 'MediaEmbedDialog', function ()
{
return {
title : 'Embed Media',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
expand : true,
elements :[{
id : 'embedArea',
type : 'textarea',
label : 'Paste Embed Code Here',
'autofocus':'autofocus',
setup: function(element){
},
commit: function(element){
}
}]
}
],
onOk : function() {
for (var i=0; i<window.frames.length; i++) {
if(window.frames[i].name == 'iframeMediaEmbed') {
var content = window.frames[i].document.getElementById('embed').value;
}
}
console.log(this.getContentElement( 'iframe', 'embedArea' ).getValue());
editor.insertHtml(this.getContentElement( 'iframe', 'embedArea' ).getValue());
}
};
} );
editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );
editor.ui.addButton( 'MediaEmbed',
{
label: 'Embed Media',
command: 'MediaEmbed',
icon: this.path + 'images/icon.png'
} );
}
} );
} )();
Thanks in advance!
Which version of CKEditor are you using?
I tested it with CKEditor 4.0 and WFM in lastest Chrome, Firefox & IE9. It seems that your plugin has some issues in 3.6.x branch. Why don't you consider updating to the latest stable version?
Working on a webshop, and using fancybox to a quickshop type thing. My problem is that when user click "Add to basket" in fancybox, fancybox should close and refresh parent page. Using this:
$(".quickshop").fancybox({
'autoDimensions' : true,
'width' : 798,
'height' : 480,
'autoScale' : true,
'scrolling' : 'true',
'type' : 'iframe',
'titleShow' : false,
'onClosed': function() {
parent.location.reload(true);
}
});
And it does the trick, but it also reloads page when user just clicks the normal close button.
So is there any way to check if "Add to basket" link has been clicked, and only then reload page?
This should work:
Add to basket
Where "webshob.aspx" is a link to the page you have a fancybox on.