I'm trying to create a pop-up to show images which have been uploaded into my database.
I have tried
echo '<td><a class=help href="'.$dbRow['image'].'"></td></tr>';
the class represents the pop-up class
<SCRIPT type="text/javascript">
$('.help').popupWindow({ height:400, width:500, top:100, left:100 });
</SCRIPT>
Any suggestions how I get the image to display from the database as a pop-up? The image field is retrieving on my webpage from the database but need it to click as a pop-up to display
Use jQuery for this.
Use an loop to echo all images to the certain div.
<div class="help">
<?php
foreach($key as $value) {
echo '<a class="help" href="'.$value.'"><br/>';
}
?>
</div>
then display the dialog
<script>
$('.help').dialog({
//your dialog options here
height:'500',
width:'500',
});
</script>
See jQuery dialog for more info about the dialogs
Related
How can I make each button instead of going to another page to display the information on a dialog box in the same page.
This code here is in the head to call the id from the other file
<script type="text/javascript">
function getvoucher(id){
return data;
});
}
</script>
Then I have this button in my while loop:
<td><?php echo $row['voucher_id']; ?></td>
<td> <?php echo' Click here'; ?></td>
When I click on the button it displays what I want in test but instead I want it to show in a dialog box, any help?
you can use JQuery's UI dialog which is pretty widely used today. Here is the link for demo:
https://jqueryui.com/dialog/
What you can do is to set the content you want to display in the dialog div's tag and then bind the dialog to the button id.
Example
JAVASCRIPT
$("#voucher_id").click(function() {
$.get("http://52.91.139.19/inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
HTML
<div id="dialog" title="Basic dialog">
<p id="content">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You should then put Id on button and in script
$("#id").click(function(){
alert("You clicked the button");
});
Did you try with alert something like this echo <script>alert("Message");</script>;
Or did you try to open fancybox you can use for example <a class="className" data-fancybox-type="iframe" href="yourhreftodisplayinfoonfancybox">Open</a>
<script>
$(".className").fancybox({
maxWidth:500,
maxHeight:600,
fitToView:false,
width:'60%',
height:'100%'
}
});</script>`
If you want on button then try with onclick to rised fancybox or dialog I don't do like that
$("#id").click(function() {
$.get("http://inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
I'm trying to make a content popup using colorbox.
This is my code
<script type="text/javascript">
$(document).ready(function() {
$('.colorbox').colorbox({
inline:true,
width: 640,
height: 480
});
});
</script>
</head>
<body>
<div style="display:none">
<div id="popup">
<?php echo $row["content"]; ?>
</div>
</div>
<?php echo $row["content"]; ?> <a class='colorbox' href='#popup'><span>PopUp</span></a><br>
The problem is it always show the same content, example like this:
content one PopUp
content two PopUp
content three PopUp
content four PopUp
if i click content one PopUp link it will show "content one" in the colorbox although i click PopUp in content two or three or four it will always show "content one" in the colorbox, so how to fix this
I want to make if I click content one PopUp link it will show "content one", if I click content two PopUp link it will show "content two" and etc
======================================================================================
I can solve the problem but I have to change in
I change it into like this
<a class='colorbox' href='' onclick="$.fn.colorbox({ html:'<?php echo $row["comment"]; ?>'}); return false"><span>PopUp</span></a>
but how to change onclick function into jquery ? I don't want to use onclick..
please help me
You should change the content of #popup after clicking each .colorbox . You may do this as below :
$(function(){
$(".colorbox").on('click',function(){
//do someting to change the content of #popup
//eg:
//$("#popup").html(Math.rand())
}).colorbox({
inline:true,
width: 640,
height: 480
});
});
I have this div named "pachete" which generates image links(click on an image and the corresponding address from the database loads) which works I get sent to correct page but what i want is to load that page into the page where I'm at(right below the image links ) into the new_page div , not get redirected to it.The class "poza_efect" is a simple opacity effect. I have a JavaScript function but for some reason it does not work.
<script>
$('.stil_link_img').click(function () {
$('#new_page').load($(this).attr('href'));
return false;
});
</script>
<div id="pachete">
<?php $result=mysql_query( "SELECT* FROM imagini"); while($data=mysql_fetch_row($result)){ if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<a href="<?php echo $data[4];?>" class="poza_efect">
<img src="upload/<?php echo $data[1];?>">
</a>
</div>
<?php } }?>
</div>
<div id="new_page">//some content which should be replaced with my loaded page</div>
In your Javascript function, the reference $(this) is not pointing to the A element, but to the container DIV. Try to do it like this:
$('.stil_link_img a').click(function() ...
And also, wrap this into the $(document).ready(function() { .... }); handler to ensure that the elements are completely loaded.
The stil_link_img click event is registered before the elements are loaded, so the event is never attached. Use
$(".stil_link_img").live(..) or
attach the event after the page is loaded completely
move the .click after your loop
Also you should register the click event to the a-tag instead of the div(or if you want that, be sure to set some clickable background..)
<a data-toggle="modal" href="msg_id=<?php echo $id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your message ID is :
<?php
echo $msg_id = $_GET['msg_id'];
?>
</div>
When I try to mouseover to Comment link, in status URL : I can see the msg_id value. But When I try to click the comment link (I using Jquery modal), it can't be show the value of the link.
So my question, how can I do that to make the value of msg_id show in Jquery modal.
Thanks for your help.
Since you open #example div with jquery Modal, it dosen't reload the page, hence $_GET is empty.
You can achieve what your goal in at least 2 ways:
Use Ajax to load contents of #example div when link is clicked.
<a data-toggle="modal" href="<?php echo $id; ?>#example" class="link_comment">Comment</a>
<script type='text/javascript'>
$('.link_comment').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$.get('givemycomments.php?id='+id, function(data) {
$('#example').html(data);
});
});
</script>
Load all possible contents when page is rendered with php. For example, you would have #example_1 , #example_2 divs. When link is clicked, get value of its ID, and fire Modal with correct div. edit: after writing example code i realized that if you have lots of comments, it can be quite heavy to load em all.
I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.
This is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.links').click( function(){
var linkclicked = this.id;
var url = $j(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$j('#image-holder'+linkclicked).empty().append(image);
/* The above line shows the image on first click.
Adding slideToggle hides the image again */
};
image.onerror = function () {
$j('#image-holder'+linkclicked).empty()
.html('That image is not available.');
}
$j('#image-holder'+linkclicked).empty().html('Loading...');
return false;
});
});
function loadnow() {
}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>
Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.
The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.
The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren't shown. All you have to do them is call the .slideToggle() function on the link click event.
See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.
Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.
Good Luck!