Im using fotorama as a image gallery, So I want to add custom button for images or video when its on full screen. Is there any way to add custom buttons (eg. for share, like ...) or toolbar when fotorama image in full screen mode.
Custom fotorama toolbar/buttons on full screen
I got a solution to adding toolbar for fotorama gallery. Need to append the html for toolbar of gallery after initialize the fotorama.
i) Following is my custom html code(for my gallery toolbar )
var fotoramaCustomToolbarHtml = '<span class="salon-name">'+salonName+'</span><img src="'+profileImage+'" class="profile-img"> \
<span rel="tooltip" data-placement="top" \
class="sf add-to-favourits add-to-favourits-gallery pull-left '+favouritsActiveClass+'" \
data-id="'+salonId+'" data-isYelp="'+isYe+'" style=""> \
<i class=" fa fa-heart" aria-hidden="true"></i> </span> \
<input type="button" id="booking-fullscreen-btn" class="btn btn-default pull-right" \
value="Book this salon" style="margin-top: 10px;"> ';
ii) Initialize the library as usual(I have initialized my custom functionlities also). You can find any other events from http://fotorama.io/customize/api/
$('.fotorama').on('fotorama:ready',
function (e, fotorama, extra) {
bookingFromGallery(); // my custom functions that you don't need
initTooltip(); // my custom functions that you don't need
}).fotorama(); // initializing the fotorama gallery
iii) After initialize the gallery need to append the custom html
$('.fotorama').append('<div class="my-custom-fotorama-toolbar"><div class="fot-cus-tb-inner">'+fotoramaCustomToolbarHtml+'</div></div>');
Then I got the solution & work perfectly.
Related
I used ngMap with AngularJS to display marker and info window.
The info window is used with customized template and HTML.
However, when I used a button and click event inside the info window, it didn't work.
I tried $compile and addListener but it failed to work too.
var infoTemplate = `<button class="btn btn-success" ng-click="$ctrl.myFunction();">Add</button>`
this.markerCustomTemplate = $sce.trustAsHtml(marker.infoTemplate);
<info-window id="marker-info-custom-template">
<div ng-non-bindable="">
<span ng-bind-html="$ctrl.markerCustomTemplate"></span>
</div>
</info-window>
Sample code: https://plnkr.co/edit/mBeJb7EErrkts6Fq?preview
You should use ng-bind-compile instead of ng-bind-html.
Don't forget to include angular-bind-compile.min.js in your project.
<span ng-bind-compile="$ctrl.markerCustomTemplate"></span>
I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
For every element in ng-repeat I need to display an icon with it.That is for each div a different icon should be displayed depending on the content.What is the right way to go about it?
Here is the code:
<div class="overview">
<i class="fa fa-{{}}"></i>
<div class="overflow-h padding-top" ng-repeat="attributes in places.attributes">
{{attributes.name}}
</div>
</div>
For every attribute a different icon should be displayed.
In this example, I've used FontAwesome icons and added a class based on the value of an object attribute.
<div ng-repeat='row in data'>
<i class='fa fa-{{row.icon}}'></i>
</div>
This will generate a div having the icon specified in the row.icon attribute. For the mapping between names and icons you can consult the FontAwesome site.
In need a directive that does an instantaneous show (without
fade in), and when it gets hidden (ng-show='false'), does a progressive
fade out.
here is my attempt :
http://plnkr.co/edit/bEzAlwjNOsxLodnawu3s?p=preview
<span ng-show="inProgress" class="animate-fade">
<i class="glyphicon glyphicon-ok"></i>
<span ng-if="inProgress">save in progress...</span>
<span ng-if="! inProgress">saved</span>
</span>
You can create a new animation class and define .new-anim to appear, and .new-anim-remove.new-anim-remove-active class selector to animate, although this would require you to use the $animate service.