I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}
Related
I'm looking for a way of getting QTip to concurrently display tooltips for each node in a Cytoscape.js graph, such that they are always displayed and anchored to the nodes in the graph without the user having to click or mouseover the node.
I got close with the code below:
$(document).ready(function(){
cy.nodes().qtip({
content: function(){ return 'Station: ' + this.id() +
'</br> Next Train: ' + this.data('nextTrain') +
'</br> Connections: ' + this.degree();
},
hide: false,
show: {
when: false,
ready: true
}
})
})
The above code displays tooltips on $(document).ready, but they are all located at one node in the Cytoscape graph and they disappear when I zoom in or pan at all.
The goal is to have tooltips anchored to each node in my graph such that when I zoom in and pan around they remain fixed to that node. I'm not sure if there is an easier way to do this just using Cytoscape (i.e., multi-feature labelling).
I'm using Qtip2, jQuery-2.0.3 and the most recent release of cytoscape.js
Any help is much appreciated.
EDIT: If you want to create these elements automatically, use a function and a loop to iterate over cy.nodes():
var makeTippy = function (nodeTemp, node) {
return tippy(node.popperRef(), {
html: (function () {
let div = document.createElement('div');
// do things in div
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'right',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var nodes = cy.nodes();
for (var i = 0; i < nodes.length; i++) {
var tippy = makeTippy(nodes[i]);
tippy.show();
}
If you want a sticky qTip, I would instead recommend the cytoscape extension for popper.js and specificly the tippy version (sticky divs):
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
}
],
edges: [{
data: {
source: 'a',
target: 'b'
}
}]
},
layout: {
name: 'grid'
}
});
var a = cy.getElementById('a');
var b = cy.getElementById('b');
var makeTippy = function(node, text) {
return tippy(node.popperRef(), {
html: (function() {
var div = document.createElement('div');
div.innerHTML = text;
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'bottom',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var tippyA = makeTippy(a, 'foo');
tippyA.show();
var tippyB = makeTippy(b, 'bar');
tippyB.show();
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
/* makes sticky faster; disable if you want animated tippies */
.tippy-popper {
transition: none !important;
}
<!DOCTYPE>
<html>
<head>
<title>Tippy > qTip</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="cytoscape-popper.js"></script>
<script src="https://unpkg.com/tippy.js#2.0.9/dist/tippy.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#2.0.9/dist/tippy.css" />
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper#1.0.2/cytoscape-popper.js"></script>
</head>
<body>
<h1>cytoscape-popper tippy demo</h1>
<div id="cy"></div>
</body>
</html>
I think popper is just easier to handle when having the divs 'stick around'
https://codepen.io/donnieberry97/pen/GGKQRN
var demo = new Vue({
el: '#main',
data: {
services: [
{
name: 'Item 1',
price: 200,
active: true
},
{
name: 'Item 2',
price: 500,
active: false
},
{
name: 'Item 3',
price: 700,
active: false
}
]
},
methods: {
addItem: function() {
var newItem= {
name:this.name,
price:this.price
};
this.services.push(newItem);
this.name="";
this.price="";
toggleActive();
},
toggleActive: function(f) {
f.active = !f.active;
},
total: function(){
var total=0;
this.services.forEach(function(f){
if(f.active){
total+=f.price;
}
});
return total;
}
}
});
When you use the input to add a new entry to the services array, upon clicking it afterwards, the active tag does not get applied to the new entry. It should turn blue and add to the total price but only the hover state works.
I've modified you code at method 'addItem' and use computed property total instead total method,have a look:
var demo = new Vue({
el: '#main',
data: {
services: [
{
name: 'Item 1',
price: 200,
active: true
},
{
name: 'Item 2',
price: 500,
active: false
},
{
name: 'Item 3',
price: 700,
active: false
}
]
},
computed: {
total () {
return this.services.reduce((last,item)=>last + parseInt(item.price) * item.active,0)
}
},
methods: {
addItem: function() {
var newItem= {
name:this.name,
price:this.price,
active: true
};
this.services.push(newItem);
this.name="";
this.price="";
},
toggleActive: function(f) {
f.active = !f.active;
}
}
});
* {
padding: 0;
margin: 0;
}
body{
font-family: 'Roboto', sans-serif !important;
}
h3 {
text-align:center;
padding: 2em 0em;
}
h5 {
padding: 1.5em 0.5em;;
box-sizing:border-box;
}
.container {
width:600px;
margin: 0 auto;
}
ul {
list-style:none;
}
li {
color:black;
border:1px solid #eeeeee;
padding:0.5em;
border-left: 5px solid #2196F3;
height:30px;
line-height:30px;
transition: 0.4s ease;
}
.active {
background-color:#2196F3;
color:white;
transition: 0.3s;
transition: 0.4s ease;
}
.active:hover {
background-color:#2196F3;
}
li:hover {
background-color:#82c4f8;
transition: 0.4s ease;
cursor:pointer;
}
span {
float:right;
}
#main {
box-shadow: 0 19px 38px rgba(0,0,0,0.0), 0 6px 12px rgba(0,0,0,0.22)
}
.text-center {
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<div class="container">
<div id="main">
<div class="header"><h3>Click the services you wish to have:</div>
<ul>
<li class="group-item" v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active': service.active}">{{service.name}} <span>{{service.price | currency}}</span></li>
</ul>
<h5>Total is: {{total | currency}}</h5>
<input type="text" v-model="name" placeholder="name">
<input type="text" v-model="price" placeholder="price">
<button v-on:click="addItem()">Add Item</button>
</div>
</div>
The main issue that you're running into is you're calling an undefined function and not passing a parameter into your toggleActive function.
Since toggleActive is a Vue method, you'll need to use this to reference it correctly and use the function from your Vue instance; once that problem is fixed, you'll need to pass in the item that you're wanting to toggle, because the way that function is written it requires a parameter to update active status.
Here's how you could update your addItem function to get it working:
addItem: function() {
var newItem= {
name:this.name,
price:this.price,
active: false,
};
this.services.push(newItem);
this.name="";
this.price="";
this.toggleActive(this.services[this.services.length - 1]);
},
Also notice that I added the active property during item creation so that Vue treats this as a reactive property. Otherwise, your item will be stuck in the active state (after toggling it) and cannot become inactive on click. You could change this to just be active: true during creation (and remove the call to make it active completely) if all new items are supposed to be active on creation. I didn't do that, though, as I wanted to show how to fix the call to toggleActive.
You can view a forked and updated Codepen here if you'd like to see the code in a fully working state.
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I have a list and I want have two icons per line using onItemDisclosure. How can I do that?
I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help you.
bye.
You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:
{
xtype: 'list',
onItemDisclosure: true,
cls: 'my-list-cls',
itemTpl: [
'<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'
]
}
Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.
Then, in your app.scss, add:
.my-list-cls {
.x-list.check-mark.x-list-disclosure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '3';
font-family: 'Pictos';
color: #fff;
text-align: center;
text-shadow: 0 0 0;
}
}
This controls the styling for your new disclosure icon.
By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).
The result:
It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.
So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:
logo = {
xtype: 'component',
autoEl: {
src: 'http://addressofmyimage.com/image.png',
tag: 'img',
style: { height: 100, width: 100 }
}
};
Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...
I'd rather not just insert raw html, as I cannot format that as I wish.
Probably better off using a panel to display the image itself. Replace the above code with...
logo = {
xtype: 'panel',
html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
You could override the Component's getElConfig method and return what you have in your autoEl object.
{
xtype: 'component',
getElConfig : function() {
return {tag: 'img',
src: 'http://addressofmyimage.com/image.png',
style: { height: 100, width: 100 },
id: this.id};
}
}
That method is used when the component is rendered to get the makeup of the underlying element.
You can use src.sencha.io API to resize image as you wish. Belowed example works for me.
{
xtype: 'image',
src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
height: 100
}
You can find documentation here.