I want to open fancybox with open api method and have share menu.
<a class="box" href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-
fancybox="images" data-caption="Backpackers following a dirt trail">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
This opens the image when clicked but the share button is missing. How can I have share button?
https://jsfiddle.net/92vepwLr/2/
Use buttons option to specify buttons in the toolbar. Example:
HTML
<a class="item">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
JS
$('.item').on('click', function() {
$.fancybox.open({
src: "https://source.unsplash.com/juHayWuaaoQ/1500x1000",
opts: {
thumb: "https://source.unsplash.com/juHayWuaaoQ/240x160",
caption: "lorem ipsum dolor",
buttons: ['zoom', 'share', 'close']
}
});
});
Demo - https://jsfiddle.net/8mh15gwd/
Related
I am using instafeed js to get instagram images to display on my website. I want to pull 5 images and display it together like this example that I have created on codepen. However, the template feature for the instafeed js posed a constraint on how I can organize the images the way that I had on the codepen example since there isn't a way to specifically target each image to a div.
The code on codepen showing how I would want to place each of my images.
<div class="row1">
<div class="column1">
<img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%">
<img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%">
<img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%">
</div>
</div>
Here's the code using instafeedjs
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<img src="{{image}}" />'
});
feed.run();
You can use the mock option to fetch only the image data without updating the DOM. Then use the success option to do something with that data:
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
clientId: 'xxxxxxxxxxxxxx',
resolution: 'standard_resolution',
mock: true,
success: function(images) {
//iterate over images and add them to the DOM as you wish
}
});
This allows you to display the images in any manner you wish.
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
I am using magnific popup for popup image slideshow. Below is what i have done.
$('.parent-container').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
// options for gallery
enabled: true
},
image: {
// options for image content type
titleSrc: 'title'
}
});
And this is my HTML Markup
<div class="parent-container">
<ul class="row carousel-inner" style="margin:0; padding:0; background:red;">
<li class="active item gallery-photo" style="margin:0; padding:0; background:red;">
<img class="img-responsive" src="images/gallery-1.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-2.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-3.jpg">
</li>
</ul>
</div>
Now, everything is working fine, but i want the image to change automatically, like when i launch the popup first image will be displayed and then it should change automatically. I am not able to fine anything to make it auto in the documentation .
Your efforts will be greatly apprecialted.
I have found it, i am adding this as an answer so that someone else also can benefit out of it.
You just need to add callbacks.
I have added below code after magnificPopup({}) function. And that will solve the problem images will start moving automatically.
callbacks: {
open: {
setInterval(function() {
$.magnificPopup.instance.next();
}, 2000);
}
}
Here is the code of my HTML iPhone app: http://summerblast.pt/iphone/code.html
I would like the icons of the bar to have a link. Lets say the first btn called "Emissão" will redirect to http://www.summerblast.pt/player.html
How can I do That?
Go to your ul tag with the id tabSelector and under it you'll find the li with each tab. Surrounding the contents of each li is a a tag. If you add href="[insert link to site here]", the contents of the li and therefor the icons will be clickable and link to the site.
An example of the edited tag would be this: <a data-bind="click: selectTab" href = "www.google.com"> Notice the href
Here would be the full contents of the li for the first icon:
<li data-bind="attr: {'data-tabid': TabId}" data-tabid="1263865">
<a data-bind="click: selectTab" href = "www.google.com">
<img data-bind="attr: {src: TabId == $root.CurrentTab().topLevelSectionID ? TABU.getImageUrl(SelectedTabIcon, $element) : TABU.getImageUrl(TabIcon, $element)}" src="http://myapp.is/image/aHR0cDovL3RhYi1iYXNlLXVybC50aGVhcHBidWlsZGVyLmNvbS9hcHBidWlsZGVyYXNzZXRzL2Fzc2V0cy90YWJiYXJfaWNvbnMvaW9zX3NlbGVjdGVkLzMyMC9SZXNpc3RvcnMucG5n/0/0">
<div data-bind="text: TabTitle">Emissão</div>
</a>
</li>
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/