I'm new to using both RequireJS and Magnific Popup, and I was wondering if anyone had successfully gotten them to play nice together. If so, what was the basic structure of your code?
Thank you!
First setup an emtry point in your html file:
<!DOCTYPE html>
<html>
<body>
<script data-main="entrypoint" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
</body>
</html>
Then in entrypoint.js you can configure jquery and magnific popup:
require.config({
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min',
magnificpopup : 'path/to/magnific-popup.min',
},
shim: {
'magnificpopup': ['jquery']
}
});
require([ 'popuptest' ], function(popuptest) {
popuptest.show();
});
Finally, on popuptest.js we can open a youtube popup like this:
define(['jquery', 'magnificpopup'], function($, magnificpopup) {
return {
show: function() {
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=btPJPFnesV4'
},
type: 'iframe',
iframe: {
cursor: null,
titleSrc: function(item) {
return 'Video title';
},
patterns: {
youtube_short: {
index: 'youtu.be/',
id: 'youtu.be/',
src: '//www.youtube.com/embed/%id%?autoplay=1'
}
}
}
});
}
});
});
Hope this helps.
Related
I recently had an issue with triggering Fancybox after xx amount of seconds which was resolved kindly by Janis.
I should have thought of this before, however is there a way of altering the code below so the lightbox doesn't trigger for mobile users?
<script type="text/javascript">
setTimeout(function() {
$.fancybox.open({
type: 'iframe',
src: '/contact-us/voucher-request-nc.aspx?Enquiry_Type=Sales%20Special%20Offers&Make=Vauxhall&Model=ADAM',
width: "100%",
opts: {
iframe: {
preload: false
}
}
});
}, 15000);
</script>
Thanks for any help guys.
The simplest solution would be to use built-in mobile device detection of fancyBox, like so:
if ( !$.fancybox.isMobile ) {
setTimeout(function() {
$.fancybox.open({
type: 'iframe',
src: '/contact-us/voucher-request-nc.aspx?Enquiry_Type=Sales%20Special%20Offers&Make=Vauxhall&Model=ADAM',
width: "100%",
opts: {
iframe: {
preload: false
}
}
});
}, 500);
}
I am using the plugin off of http://vegas.jaysalvat.com/documentation/slideshow/
The backgrounds are changing fine, but the overlay image is not working or rendering.
Here is my code I have in the head of the page:
<script>
$.vegas('slideshow', {
backgrounds:
[
{ src:'/../../images/backdrop.png' },
{ src:'/../../images/backdrop_yellow_trees.png' },
{ src:'/../../images/backdrop.png' }
]
})('overlay', {
src:'/../../assets/vegas/overlays/13.png'
});
</script>
Same problem here, but based on the #pawel reply over I came to this
$(function() {
$.vegas('slideshow', {
backgrounds:[
{ src:'images/pic1.jpg', fade:800 },
{ src:'images/pic2.jpg', fade:800 },
{ src:'images/pic3.jpg', fade:800 },
{ src:'images/pic4.jpg', fade:800 }
]
})('overlay', {
src:'vegas/overlays/15.png'
});
});
We probably made the same mistake, just copy paste from the documentation...
I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}
I have the following problem:
I am trying add routes js files in php.
In a html file works perfectly.
Why not work in a php file?
Try:
grunt bower-install
Error:
Verifying property bower-install.app.src exists in config...OK
Reading bower.json...OK
Parsing bower.json...OK
Warning: Cannot read property 'block' of undefined Use --force to continue.
The code:
bower: {
dev: {
dest: './components'
},
},
'bower-install': {
app: {
src: ['template.php']
},
},
}
There is a issue since a week ago, but no response there.
https://github.com/stephenplusplus/grunt-bower-install/issues/33
It's like says #SimonBoudrias. You have to go to the following file path:
node_modules/grunt-bower-install/node_modules/wiredep/lib/inject-dependencies.js
Add to fileTypesDefaults object, the object php
var fileTypesDefault = {
html: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}, php: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
},
yaml: {
block: /(([\s\t]*)#\s*bower:*(\S*))(\n|\r|.)*?(#\s*endbower)/gi,
detect: {
js: /-\s(.+)/gi,
css: /-\s(.+)/gi
},
replace: {
js: '- {{filePath}}',
css: '- {{filePath}}'
}
}
};
A regards
index.html
<link href="Styles/bootstrap.css" rel="stylesheet" />
<script data-main="Scripts/app" src="Scripts/require.js"></script>
<a class="btn0">button 0</a>
<div class="target"></div>
app.js
require({
paths : {
jQuery : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
tooltip : 'bootstrap-tooltip'
}
});
require([ 'jQuery' ], function() {
require(['tooltip' ], function() {
$(".btn0").click(function() {
$(".target").load('btn0.html');
});
$('[rel=tooltip]').tooltip();
});
});
btn0.html
Wouldn't it be nice to see a Tooltip here?
In this situation, the tooltip doesn't work. Only works if i cut $('[rel=tooltip]').tooltip(); and paste in btn0.html like:
<script>
$('[rel=tooltip]').tooltip();
</script>
My question is. How organize the javascript code that is needed in btn0.html? It is possible put the JS content of btn0.html in app.js?
You have to call tooltip() function when btn0.html is loaded.
Element with rel="tooltip" does not exist when inicializing that page.
require([ 'jQuery' ], function() {
require(['tooltip' ], function() {
$(".btn0").click(function() {
$(".target").load('btn0.html', function ()
{
$('[rel=tooltip]').tooltip();
})
});
});
});