如何使放大弹出窗口打开联机库中的选定项目
How can I make magnific-popup open an selected item in a inline gallery?
我使用放大弹出窗口来显示一个内联库(带有自定义HTML标记(,就像这里的例子一样。这将打开一个自定义标记库,您可以在其中单击3组化身/名称/位置数据。(试试下面的例子或代码,你就会明白我的意思了(。
然而,我找不到在点击锚点时打开第二个(或除第一个之外的任何东西(元素的方法。
是否有人使用了amplific popup和能够打开第一个元素以外的内联元素
HTML:
<button style="padding:20px;">Open popup</button>
CSS:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
Javascript:
// Define data for the popup
var data = [
{
username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
userLocation: 'Pittsburgh, PA'
},
{
username: "Paul Irish",
userWebsite_href: 'http://paulirish.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
userLocation: 'San Francisco'
},
{
username: "Chris Coyier",
userWebsite_href: 'http://css-tricks.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
userLocation: 'Palo Alto, California'
}
];
// initalize popup
$('button').magnificPopup({
key: 'my-popup',
items: data,
type: 'inline',
inline: {
// Define markup. Class names should match key names.
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'<h2 class="mfp-username"></h2>'+
'</a>'+
'<div class="mfp-userLocation"></div>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
}
}
});
将其添加到您的amplificPopup函数中,点击后将打开第二项:
index:2,
在此处的文档中列出。
示例Codepen
查看此Codepen:http://codepen.io/mgo/pen/ykgjb
或者试试我解决问题的方法:https://codepen.io/jnax/pen/RpyVxx
var clickedButton;
$('button').click(function(){
clickedButton = $('button').index(this);
}); //this indexing solution is obviously not the best for all situations
然后,当弹出窗口打开时,转到弹出窗口中的相应索引。
callbacks: {
open: function(){$('button').magnificPopup('goTo',clickedButton)}}
问题是,goTo操作是可见的,尽管我认为它可能被css转换
以上的轻微变化对我来说是
// Define data for the popup
var data = [
{
username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
userLocation: 'Pittsburgh, PA'
},
{
username: "Paul Irish",
userWebsite_href: 'http://paulirish.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
userLocation: 'San Francisco'
},
{
username: "Chris Coyier",
userWebsite_href: 'https://css-tricks.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
userLocation: 'Palo Alto, California'
}
];
// initalize popup
$('button').click(function(){
let index = $('button').index(this);
console.log("button index",index)
$(this).magnificPopup({
key: 'my-popup',
items: data,
type: 'inline',
index:index,
inline: {
// Define markup. Class names should match key names.
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'<h2 class="mfp-username"></h2>'+
'</a>'+
'<div class="mfp-userLocation"></div>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
},
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
console.log("inside open",index)
},
}
});
});
相关文章:
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何检查管道中未定义的项目
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- 如何获取不属于我项目的上一页的URL
- Dojo:访问dijit.form.Select中单击的项目
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 我需要为我的朋友在这个项目上提供帮助
- 如何从 HTML 查询中删除项目
- 在Meteor项目中安装并包含npm模块后出错
- 当在Ember中点击一个项目时,我如何将一个活动类添加到项目列表中
- 将单击事件添加到附加的项目中
- 通过另一个php应用程序将我的项目推送到Github存储库中
- 在javascript中搜索项目列表的性能
- 如何将本地依赖项添加到npm项目中
- angularjs移除焦点上的活动类并添加到下一个项目
- 为什么react/redux前端项目在package.json中包含生产依赖项
- 将webpack和babel与父项目目录中的文件一起使用
- 至少显示阵列中的一个联机项目