I am using Lightbox v2.10.0 by Lokesh Dhakar in Bootstrap 4, instead of image want to play Youtube video in the modal window, please help me how to do it.
here is what I tried, but i am unable to play Youtube link
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="img/portfolio/app1.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div>
<a rel="iframeLink" href="https://www.youtube.com/watch?v=_n3b0rcDEIk" data-lightbox="portfolio" data-title="App 1" class="link-preview" title="Preview"><i class="ion ion-eye"></i></a>
</div>
</div>
</div>
</div>
Lightbox2 does not support videos.
Your best bet is to use an alternative 'lightbox' library that has video support. You could also modify Lightbox2 to have video support, using existing work as a starting point (https://github.com/lokesh/lightbox2/pull/564), but this would be substantially more challenging.
Related
I'm using Bootstrap 5, and in many places I combine a label and an anchor link, and I style the anchor link as small and fig-caption so you get a light gray link that is about the same size as the label.
This works okay on my PC and iPad, but on my phone the link is much larger than the label text.
Why is that, what is better way to do this so remains consistent for all platforms
<div class="row g-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
</span>
</span>
</div>
</div>
Update:Actually I have analysed the problem further and it turns out the issue that I have a heading near the top of the page, and if the heading is longer than the width of the screen I get the issue.
e.g
<div class="row g-0">
<div class="col mx-2">
<h4>
Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)
</h4>
</div>
I don't get the issue if I use h6 instead of h4 even when text is still wider than screen but then the text is smaller than I would like
I don't get the issue if I don't wrap within bootstrap row and column, if I just do:
<h4>Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)</h4>
then it works, but then I have the issue that I dont have the same margin to the left
I am wondering, I did not find carousel component in Semantic UI.
I feel it is very common and useful component.
I know one option OWL Carouse. I do not want to use jQuery, though for Semantic UI I will just include jQuery. Rest of the things I want to achieve via Angular.
I need to know the possible options without writing jQuery code.
Semantic UI evidently does not currently have a carousel module, and it is an open issue.
There are, however, some small snippets on that page that can achieve what you'd like to. See slick and Swiper.
Here is another alternative.
fotorama.io
yes there is no carousel in Semantic UI at moment but you can use cards somewhat similar here is one I found to be closest to bootstrap carousel;
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="/images/avatar/large/jenny.jpg" class="visible content">
<img src="/images/avatar/large/elliot.jpg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
hope this helps,
cheers.
Here is the link you can create a coursel in semantic ui.
https://codesandbox.io/s/43pv7wm6n9
Hopefully it will help you.
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I am trying to use angular-ui/ui-sortable for a portal application.
My application will be similar to the portlet example given in Jquery UI sortable JQuery UI Sortable Portlets.
Is it possible for some one to give an example or point me in the right direction to implement this with angular-ui/ui-sortable?
I asked this question in the angular-ui/ui-sortable and they referred me to Stack Overflow Issue portlets example #356
using connected lists should serve your purpose if I understand what you're looking for:
example pen
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list1">
<div class="app" ng-repeat="app in list1">{{$index}} {{app.title}}</div>
</div>
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2">
<div class="app" ng-repeat="app in list2">{{$index}} {{app.title}}</div>
</div>
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list3">
<div class="app" ng-repeat="app in list3">{{$index}} {{app.title}}</div>
</div>