Develop Reference

How to add a preloader to an iframe that its src changes dynamically?

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');

Image pop up using bootstrap Modal?

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.

Getting the id of the anchor tag which was clicked

This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.
<?php foreach($array as $iterate):?>
<div class="col-sm-3">
<div class="panel panel-default">
**<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">**
<div class="panel-heading">
<img src ="audi_sillhouete.jpg" style="height:100%; width:100%;">
<p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p>
</div>
</a>
</div>
</div>
<?php endforeach;?>
As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page.
The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part.
So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.
<script type="text/javascript">
function theFunction()
{
var id = $('a', this).attr('id');
alert(id);
}</script>
From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.
$('a',this).attr('id');
$this.id;
Everything return 'undefined'.
Reference-This is the code for the modal window part.
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Please try this
$(document).on('click', 'a', function () {
alert(this.id);
});
DEMO

You can use other attribute in anchor like :
<a href='' id='hello' para-id='somevalue'></a>
alert($("#hello").attr("para-id"));

The below jQuery function runs through all the a tags on page load and adds id to the end of the link.
$(function(){
$('a').each(function(){
var id = $(this).attr('id');
var url = $(this).attr('href') + '?id=' + id;
$(this).attr('href',url);
});
});
https://jsfiddle.net/yc1hswet/

Show Modal From dynamically inserted button

I have a table element :
<table id="postcon-table-success" class="table table-hover">
</table>
and I am inserting rows dynamically in the table:
postConTable = "<tr><td><input id=\""+value.processId+"-details\" type=\"button\" class=\"btn btn-primary view-details\" value=\"View Details\" /></td></tr>";
$("#postcon-table-success").append(postConTable);
here button has id as dynamic variable (processID) followed by "-value"
eg.230002-details, where 230002 is processID.
Now I am clicking the button
$('#postcon-table-running').on('click',".view-details", function() {
console.log(this.id);
$('#myModal').modal('show');
});
which is calling the jquery function and the log is getting printed :
230002-details
But its not showing the modal which is in the body tag.
<body id="fixedbody" data-spy="scroll" data-target=".bs-docs-sidebar">
<div id="master-container" class="container-fluid">
<div id="myModal" class="modal hide fade" tabindex="-1" aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">Please wait</h3>
</div>
<div class="modal-body">
<p>We are fetching data</p>
</div>
</div>
Please help.
To ADD- when I create my modal in the parent tag of '#postcon-table-running', it is working.
But I cant do it that way because I want to implement same functionaliy from various buttons in various other divs.

It could be that the modal is not visible to the on click function. Put your modal at the very end of the page.

Lightbox functinality with html content (Bootstrap Thumbnails)

plz help me(beginner) to solve a problem.
I am coding a site with bootstrap 3. I have bootstrap thumbnail on it.
when user will click an specific link in the thumbnail, it will show in an modal/popup.
modals primary contents will be same with the thumbnail was clicked.
but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail.
There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view.
by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel).
The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview,
or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality.
Please don't answer with just a lightbox plugin link, i want to use the basic jquery.
Here's the thumbnails in my html:
<div class="container" id="lightbox">
<div class="row">
<div class="lightbox-thumbs-wrap">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon2.png">
<h3>Description heading2</h3>
<p>
Description2 details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
</div>
</div>
And, the modal i want will look like:
<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
click to close modal
<div class="container-fluid">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->
<a class="next-img"><img src="img/xyz/next.png"></a>
<a class="prev-img"><img src="img/xyz/prev.png"></a>
</div>
</div>
</div>

Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.
Secondly read Varying modal content based on trigger button at Bootstrap's docs.
And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/
First create a array of object that describe your images / thumbs:
var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'});
}
Alternatively you could read the above information from your thumb's grid.
html of the modal
You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: http://getbootstrap.com/javascript/#modals
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->
<a class="prev-img btn btn-primary">Previous</a>
<a class="next-img btn btn-primary">Next</a>
</div>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div>
A button to open the modal can look like that shown below:
<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
First Thumb
</button>
The on click event of the above button:
$('.openmodal').on('click',function(){
setModalContent($( this ).data('thumb'));
$('#myModal').modal('show');//pop up modal
});
The setModalContent function used in the preceding code can look like as follows:
function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}
And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:
$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});