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.
Related
I've been working with modal fade and it didn't work
what suppose happen is adding a new grade in partial view so i decided to work with modal fade and i didn't know anything about it.
so there is the code and please help me to fix the problem
<p>#* Button *#
New Grades
</p>
<div class="modal fade" id="mymodal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Add/Edit Grades</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Image/load2.gif" width="150" />
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
var AddEdit = function (id) {
var url = "/Grades/AddEditGrade/" + id;
$("#myModalBodyDiv1").load(url, function () {
$("mymodal1").modal("show");
})
}
</script>
any idea how can i fix it ??
you are missing ID selector symbol in this line:
wrong: $("mymodal1").modal("show");
modified: $("#mymodal1").modal("show");
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');
*Repeat Post
I have searched around and found a potential answer to adding a modal to one page for multiple images. This solution I found is giving me my modal but when the modal pops up the image is not showing and the console showing the "img src" is "(unknown)".
The solution I found:
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
<img id="1" data-toggle="modal" data-target="#myModal" class="image" src="/images/hieroglyphics/9.jpg">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated! Thanks!
I can confirm that your code seems to work correctly.
here is a fiddle with your code.
https://jsfiddle.net/jammer99/y0w1t95u/
Are you sure there isn't anything else opening the modal?
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
can you paste a screenshot of your console? to check if there are any other errors?
Is there another way to varying modal with Picture based on trigger button?
If I have the trigger button which contains the picture:
<button type="button" data-toggle="modal" data-target="#ViewModal" data-picture="<?php echo $user->getPicture(); ?>"></button>
What's the best approach to fetch and show the picture on the modal?
This is my picture field in that modal:
<div class="modal-body">
<center>
<img src="**(SHOULD I PUT THE PICTURE IN HERE?)**" name="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
And this is the javascript who handle the modal :
<script type="text/javascript">
$('#ViewModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var picture = button.data('picture')
var modal = $(this)
modal.find('.modal-body img[name="picture"]').val(picture)
})
</script>
Note : I can not fetch the picture in modal with this line of code
Is there another way to varying modal with Picture based on trigger button?
In my opinion you should declare your modal html somewhere in the footer of the page, so you have more control and more ease in displaying your image.
<div class="modal fade" id="my_image" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="" id="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
</div>
</div>
</div>
And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')
$('#picture').attr('src',picture);
Below is my Code for edit vehicle modal call
<?php for($i=0;$i<count($vhcl);$i++){
echo "<a data-toggle='modal' href=' ' data-remote='using/vehicles/vehicle-form.php?id=".$vhcl[$i]['mvid']."&m=e' data-target='#vehicle-modal'><i class='icon-pencil color-orange'></i></a>";
} ?>
<div class="modal fade" id="vehicle-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
Now when I first time click on this link it takes few seconds and modal appears with 1st vehicle edit data,
But now when I click on 2nd vehicle modal appears instantly with same data, and its refreshed after 2 3 seconds( it may also take more time in slow connections ).
So question is can we have any modal-body load completed check ?
Until the modal body is loaded with new refreshed data, loading image should be there in modal body and then the actual data.
You can do the following:
Try to call modal using javascript instead of attributes. Before modal start to download remote path content you can delete the modal content.
This is example in JSFiddle
Html:
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div id="modal"></div>
Javascript:
$(function(){
$("a.open-modal").click(function(e){
e.preventDefault();
var modal=$("#modal");
modal.empty();
modal.append("<div class='modal fade modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>");
$('.modal-dialog').modal({
remote:$(e.currentTarget).attr("data-remote")
});
});
});
EDIT:
You also can place some image or text like "Loading..." while loading.
This is example in JSFiddle
Html:
<span id="onLoad" style="position:absolute;left:100px;top:100px;z-index:1000000;" hidden>Loading...</span>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div class='modal fade' id='modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>
Javascript:
$(function(){
$("a.open-modal").click(function(e){
$('#onLoad').show();
e.preventDefault();
var modal=$("#modal-dialog");
modal.empty();
modal.modal({
}).load($(e.currentTarget).attr("data-remote"), function (e) {
$('#onLoad').hide();
});
});
});
Here is the easier solution based on the #Nicolai's solution
I was experiencing issues with the solutions above, that's I'm also posting my solution, so someone can get it correctly in future :)
HTML:
<a class="open-custom-modal" data-remote="/url/1" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<br />
<a class="open-custom-modal" data-remote="/url/2" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<div class="modal fade" id="custom_modal" tabindex="-1" role="dialog" aria-labelledby="custom_modal_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("a.open-custom-modal").click(function(e) {
e.preventDefault();
$('#custom_modal').modal({
}).find('.modal-body').load($(e.currentTarget).attr("data-remote"), function(e) {
//loading completes here
});
});
});