I need some help here..
I have linked video to my images so if someone clicks on my image a video pops up but I want the video should play as soon as someone hovers the image.
SCENARIO: there are 4 images in one row(250*250 pixel size) and If someone hovers the first image or any image the video should play in the same size of image(250*250) and if they move mouse to another image this video should stop and video for that particular image should start playing
HTML:
<div class="row">
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
< img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
</div>
JS:
function showVideo(obj){
$("#youtube").attr("src", $(obj).data("src"));
$("#videoModal").on("hide.bs.modal", function () {
$("#youtube").removeAttr("src");
}).modal('show');
}
HTML:
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="videoModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe id="youtube" width="100%" height="500px">
</iframe>
</div>
</div>
</div>
</div>
Add an iframe after each image with display:none. change to display:block for onMouseOver,and onMouseOut it should change to display:none. Create functions for onMouseOver and onMouseOut in yourjs`.
<div class="col-md-3">
<img id="image" src="resources/image.jpg" data-src = "https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick = "showVideo(this)" onMouseOver="showVideoOnHover(this)" onMouseOut="hideVideo()"/>
<iframe id="youtube" width="100%" height="500px" style="display:none;">
</iframe>
</div>
And in your js:
//add onHover function.
function showVideoOnHover(obj)
{
$("#image").css("display","none");
$("#youtube").css("display","block");
$("#youtube").attr("src", $(obj).data("src"));
}
function hideVideo()
{
$("#youtube").css("display","none");
$("#image").css("display","block");
}
Related
Im trying to load a modal after a 3 second page load delay
The code below opens the modal however i cannot close it and the grey overlay is on top of the content etc
Code below
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#myModal').modal();
}, 3000);
});
</script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join IQ Option Today</h4>
</div>
<div class="modal-body text-center">
<a target="_blank" href="mylink"><img src="myimage.jpg" width="300" height="600" /></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Fixed!
My css contained z-index:1
I've commented that out and it now works perfectly!
I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:
<div class="container fishing-picture-container">
<div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer">
<div class="col-md-4" ng-if="fishingPictures[$index].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 1].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 2].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" />
</figure>
</div>
</div>
</div>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:
http://www.w3schools.com/howto/howto_css_modal_images.asp
Angular script
$scope.showModal = function (imageName) {
angular.element("#imagemodal").modal("show");
$scope.ImageName = "Path here...."+ imageName;
}
Html
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
--------------------------------------or-------------------------------------
Html
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/>
</figure>
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
Angular script
$("#imagemodal").on("shown.bs.modal", function (event) {
var imgName= $(event.relatedTarget).data('imgname');
$scope.ImageName = "Path here...."+ imageName;
});
I am trying to play a video when someone hovers on an image and if they click it a pop should display playing that video so far I have achieved pop up and displaying video onclick but I want to achieve this hover thing
HTML
<div class="row">
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
< img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
</div>
JS
function showVideo(obj){
$("#youtube").attr("src", $(obj).data("src"));
$("#videoModal").on("hide.bs.modal", function () {
$("#youtube").removeAttr("src");
}).modal('show');
}
Some more HTML
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="videoModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe id="youtube" width="100%" height="500px">
</iframe>
</div>
</div>
</div>
</div>
You can use the jquery hover function and your own function to play the video:
$('#element').hover(function() {
showVideo();
});
I am very new to bootstrap and am trying to make my video sound stop playing when I click out of the modal.
I have looked on similar threads and tried the solutions but none seem to be working for me.
I know there must be a jQuery solution somewhere! I also want it to apply to everything in the class 'portfolio-modal modal fade'.
There are also two ways of closing - the X in the top right corner and the button underneath the video. Does this make a difference?
Thank you!
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Growing, Custo by LIDL</h2>
<p class="item-intro text-muted">Music Production for Growing, Custo.</p>
<iframe width="500" height="281" src="https://www.youtube.com/embed/knjuAUOWgas" frameborder="0" allowfullscreen></iframe>
<p>Description</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
i want to create dynamic model popup so i have write below js code..but when i have click on single image then model pop up show all images content in dynamic created div . i want same image and its content in model popup.
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('#imagemodal').modal('show');
});
</script>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >
<div class="row">
<div id="pop">
<a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
<div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
<span>{{Spaces.Name}}</span>
<img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
<span>{{Spaces.MaxCapacity}}</span>
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">{{Spaces.Name}}</h4>
</div>
<div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList">
<img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
<p class="parapadding">
Name:{{Spaces.Name}}<br />
Description:{{Spaces.Description}}<br />
Size:{{Spaces.Size}}<br />
Capacity:{{Spaces.MaxCapacity}}<br />
Configuration:<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>
ID param of any tag should be unique. And in your repeater you have same ids. Change it to smth like id="{{'imagepreview' + $index}}" and
ng-repeat="Spaces in SpaceList track by $index"