I have a slider with miniature of video and when a click on a miniature, whatever, a modal with the first video of my list was open, not with the video who correspond to the miniature
I want to use ng-if to compare an id of a video with the miniature of the video in a slider, but i with what ? Can i use a syntax who what similar like data.id == data.miniature.id ? I really don't know ...
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 contVideo">
<div>
<div class="video" ng-controller="videoCtrl">
<slick class="carousel" infinite="true" settings="slickConfig">
<div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
<a data-toggle="modal" data-target="#myModal">
<img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
</a>
<div class="descriptionVideo">
<p>{{data.legende}}</p>
</div>
</div>
</slick>
<div class="modal fade" id="myModal" ng-repeat="(key, data) in video" ng-if="data.id == ?">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<video ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can use ng-if like any other normal IF statement.
<div ng-if="data.id == 1 || data.string == 'string'">
<p>Paragraph goes here</p>
</div>
As you can see in the example above you can include || or && into ng-if
Hope this helps.
Why not?))
*ngIf=data.id == data.miniature.id
If you data not on onInit, you can use elvis:) syntax.Here it is, protecting against a view render failure if value is null
data?.id == data?.miniature?.id
Related
I have images and videos dynamically but I want to display images or videos at a time.
I want to that When i click on images id then it will show images and when i click on video Id then it will show video.
html code:
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<div class="mySlides" >
<div class="numbertext">{{img.id}}</div>
<img class="size-i" ng-src="{{img.oe_images}}" ng-show="isActive($index)" ng-if="img.type == 'image'" type="image"style="width:100%;">
</div>
<video ng-if="img.type == 'video'" type="video"width="100%" ng-click="video()" id="video" controls="controls" ng-show="isActive($index)">
<source src="./assets/vdo/{{img.oe_images}}" type="video"type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-md-12" >
<a class="prev" ng-click="showPrev()"style="font-size:36px;" >❮</a>
<a class="next" ng-click="showNext()"style="font-size:36px;" >❯</a>
<div class="row paddi" >
<div class="column" ng-repeat="img in images">
<img class="demo cursor border-demo" ng-src="{{img.oe_images}}" ng-if="img.type == 'image'" type="image"ng-show="isActive($index)"style="width:100%; display: block !important;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}" type="image">
</div>
<video ng-if="img.type == 'video'" type="video" controls="controls" src="./assets/vdo/{{img.oe_images}}" type="video/mp4" ng-show="isActive($index)"style="width:100%"></video>
</div>
</div>
</div>
</div>
</div>
Here i am using ng-if to display images or Video at a time but after using ng-if no data diplay. Please tell what is my mistake.
thank you in advance
Try to wrap <video>s into <div> containers and apply ng-show instead of ng-if to containers not <video>s:
<div ng-show='condition1'>
<video id='video1'/>
</div>
<div ng-show='condition2'>
<video id='video2'/>
</div>
Check this topic. Look the first answer about trustAsResourceUrl.
Perhaps, it will resolve your issue.
app.filter("trustUrl", ['$sce', function ($sce) {
return function (recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
In HTML - view file:
<video src="{{ Your_URL | trustUrl }}" videoplayer controls></video>
On the same page, I have about a dozen images and on each image at the click you open a modal. I made a script for each modal, how can I make a single script for all the modal?
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
var undici = document.getElementById('lele');
var lele = document.getElementById("img11");
function myLele(el) {
var ImgSrc = el.src;
undici.style.display = "block";
lele.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == undici) {
undici.style.display = "none";
}
}
</script>
<script>
var dieci = document.getElementById('jessy');
var jessy = document.getElementById("img10");
function myJessy(el) {
var ImgSrc = el.src;
dieci.style.display = "block";
jessy.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == dieci) {
dieci.style.display = "none";
}
}
</script>
I tried different ways, but not on multiple modals on the same page does not work.
Can I do a foreach () loop?
IDs should be unique for each element. Change the IDs of both your images from myImg to something unique like myImg1 and myImg2 respectively.
Also, you don't need to write a custom function for toggling your modals. Just use the in-build modals in Bootstrap by adding data-toggle="modal" data-target="#lele" to your modal 1 image and data-toggle="modal" data-target="#jessy" to your modal 2 image like this:
<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
You also need to add the data-dismiss attribute to your close button like this:
<span class="close" data-dismiss="modal">×</span>
Check and run the following Code Snippet for a practical exmaple of what I have described above:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
</div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
</div>
How can I load a plain text inside a Bootstrap popup via javascript? I want to set pTitle text but innerHtml doesnt work.
var $modal = $('#preview_dialog');
var $title = $modal.find('#pTitle');
$title.innerHtml = ($("#Title").val());
<div id="preview_dialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" style="height: 600px;">
<div class="row">
<div class="col-xs-12">
<div class="left-inner-addon">
<span id="pTitle" class="form-control-static"></span>
<input class="form-control" id="pTitle2" type="text" class="input-medium" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to hook the code to some event - for example keyup if you want title to be changed "on live" or change if you want title to change when input's value will change.
You can also use html() function to change the value of <span> content
$('#pTitle2').on("keyup", function() {
$('#preview_dialog #pTitle').html( $("#pTitle2").val() );
});
I am displaying some images on my picture gallery page.
On this page I am using a jquery lightbox to display images.
The lightbox is working fine,but it doesn't have next and previous buttons .
How can I add the next and previous buttons on those pages.
There are number of pages having the lightbox so I don't want a major change.
Can anyone suggest me how can I add next and previous buttons with little changes ?
Here is my aspx page code :
<div class="row">
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="9.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="10.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="11.jpg" alt="..." class="styleforimg"/>
</a>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="<%= ResolveUrl("~") %>Images/logo.png" alt="" />
</div>
</div>
</div>
</div>
Here is the javascript file code:
$(document).ready(function () {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function (event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({ 'width': $img.width() });
$lightbox.find('.close').removeClass('hidden');
});
});
Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox