I am listing out video data from sql table.
Fields in tha table:
- sidebar_video_id (auto increment)
- sidebar_video_nev
- sidebar_video_link (full url)
- sidebar_video_v_id (video id from at the url end)
What i want, is when i click on each video, it opens and play in a bootstrap modal box. Now the box opens, but its empty and i dont get any console erros.
<?php
$get_videos = mysqli_query($kapcs, "SELECT * FROM sidebar_video");
if(mysqli_num_rows($get_videos) > 0 )
{
while($vid = mysqli_fetch_assoc($get_videos))
{
echo '<div class="sidebar_youtube_box">';
echo '<img src="http://img.youtube.com/vi/'.$vid['sidebar_video_v_id'].'/hqdefault.jpg" class="img-responsive">';
echo '</div>';
}
}
?>
<div class="modal fade" id="videoModal" 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">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Videó megtekintése</h4>
</div>
<div class="modal-body" id="video_modal_body">
</div>
</div>
</div>
</div>
$('.open_youtube_modal').click(function(e) {
e.preventDefault();
var v_id = $(this).attr('id');
var full_url = $(this).attr('data-url');
var embed_html = '<iframe width="560" height="315" src="' + full_url + '" frameborder="0" allowfullscreen></iframe>';
//alert(embed_html);
$('#video_modal_body').html(embed_html);
$('#videoModal').modal('show');
});
You have to use the https://www.youtube.com/embed/[videoId] format as opposed to the https://www.youtube.com/watch?v=[videoId]. Youtube does not permit cross-origin framing with the latter one.
Related
I'd like to autoplay a video in a pop-up once the user clicks "watch video". Right now my code is working fine on desktop, but on mobile (IOS) the video iframe opens but doesn't autoplay. I'm currently using a bootstrap modal and attaching & removing the video source on the click events, like this:
Watch Video
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<iframe width="100" height="180" id="myVideo" src="../static/img/videos/Whatsfordinner with filter.mp4" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>
</div>
</div>
$(document).ready(function(){
// Save the url of the video in a variable
var url = $("#myVideo").attr('src');
// When the modal is closed remove the url of the iframe
$("#videoModal").on('hide.bs.modal', function(){
$("#myVideo").attr('src', '');
});
// When the modal is opened, add the url to the iframe
$("#videoModal").on('show.bs.modal', function(){
$("#myVideo").attr('src', url);
});
});
Should I be using a different solution?
I figured it out now - you need to use video instead of iframe. Here's my code for those interested:
<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal">
<div class="watch-now">
<img src="../static/img/Watch_Video.png" alt="Watch Video">
</div>
</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<video autoplay playsinline id="myVideo">
<source src="../static/img/videos/Whatsfordinner with filter.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
$(document).ready(function(){
// Save the url of the video in a variable
var url = "../static/img/videos/Whatsfordinner with filter.mp4";
// When the modal is closed remove the url of the iframe
$("#videoModal").on('hide.bs.modal', function(){
$("#myVideo").attr('src', '');
});
// When the modal is opened, add the url to the iframe
$("#videoModal").on('show.bs.modal', function(){
$("#myVideo").attr('src', url);
});
Hope this helps someone out there!
I am currently using Javascript to build a string from an array and pass that to an HTML modal, however I am unclear as to how to display the string with line breaks in between, as now the HTML is representing the built string in Javascript as a single line. Any help would be appreciated.
Javascript:
function ShowCrashString(str) {
var temp_split = str.split(';');
temp_str = '';
for (var i=0; i < temp_split.length; i++) {
temp_str += temp_split[i] + '\n;'
}
document.getElementById("crash-modal").innerHTML = temp_str;
}
HTML Modal Code:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Crash Analysis</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="crash-modal">
<!-- data gets populated here -->
</div>
<div class="modal-footer" id="to-copy">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
id="closeModal">Close</button>
<button class="btn btn-primary" onClick="CopyToClipboard('crash-modal')">Copy</button>
</div>
</div>
</div>
</div>
You need to use <br/> instead \n for HTML
temp_str += temp_split[i] + '<br/>'
Two ways you could do this:
Put your text in a <pre> tag. This will show your newlines
Use str.replace(/\n/g,"<br>") to replace your newlines with <br /> tags
I think that will solve your problem
function ShowCrashString(str) {
var temp_split = str.split(';');
temp_str = '';
for (var i=0; i < temp_split.length; i++) {
temp_str += temp_split[i] + '<br/>'
}
document.getElementById("crash-modal").innerHTML = temp_str;
}
I'm using an iframe inside of bootstrap modal:
<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newsModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<div id="loadingMessage">Loading...</div>
<iframe width="100%" class="frame embed-responsive-item" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
That iframe is open when an element of some elements with the same class clicked:
<?php foreach($new as $news){ ?>
<div class="post_frame" data-link="<?php echo $news['link']; ?>" data-toggle="modal" data-target="#newsModal">
Lorem ipsum dolor sit amet
</div>
<?php } ?>
I'm using that code to set the source of the iframe:
$('.post_frame').each(function() {
$(this).click(function() {
var data = $(this).data('link'),
frame = $('.frame');
frame.attr('src', data);
});
});
To hide the preloader I use:
frame.load(function() {
$('#loadingMessage').css('display', 'none');
});
But the preloader still there.
And when I close that modal and click on another element with the same class post_frame, The previous source content still there until the content of the new source loads.
How to create a preloader before each source is loaded?
Change this:
var data = $(this).data('link'),
To this:
var data = $(this).data('link');
And then remove this from where it currently is (inside function):
frame = $('.frame');
And place it in the global scope outside the function:
var frame = $('.frame');
I want to pop up image on clicking it. Images are added by using advanced custom field.
Here is my code
<?php
$args=array(
'post_type' => 'map',
);
$staffs = new WP_Query( $args );
if( $staffs->have_posts() ) {
while( $staffs->have_posts() ) {
$staffs->the_post();
?>
<div class="div_img">
<div class="col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<h4 class="map_titles"><?php the_title();?></h4>
<img src="<?php the_field('map_image'); ?>" />
</a>
</div>
</div>
<div class="map_modal">
<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-header">
<h4 class="modal-title"><?php the_title();?></h4>
</div>
<div class="modal-body">
<img src="<?php the_field( 'map_image' ); ?>" />
</div>
</div>
</div>
</div>
</div>
<?php
}?>
<?php
};?>
script
<script>
jQuery(document).ready(function() {
var $lightbox = jQuery('#lightbox');
jQuery('[data-target="#lightbox"]').on('click', function(event) {
var $img = jQuery(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': jQuery(window).width() - 100,
'maxHeight': jQuery(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');
});
});</script>
when I click on each image each image pop up nicely but the title remain same for all images. However my requirement is to show the title of each image with its image .Here is link
Any help would be highly appreciated
Hi I am not sure if I understand your question, however this is the simple way I will go about it.
1; query database and get the image and the title use for each loop.
2,Add Data-dir attribute to the image tag and put the title inside like below.
<div class="div_img">
<div class="col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<h4 class="map_titles"><?php the_title();?></h4>
<img src="<?php the_field('map_image'); ?> data-dir="<?php the_title();?>"/>
</a>
</div>
</div>
3.When you grab the image on click using jquery I can see you are grabbing other attribute, grab the data-dir attribute as well like below, and using jquery .html() put the title in the modal-title.
var title = $img.attr('data-dir'),
$('.modal-title').html(title);
Hopes this help if not let me know.
I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" 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="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}
You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.