In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size. But I do not have much idea about javascript & jquery. I try to do this but do not work. can u please tell me where is the wrong or give me a proper code for popup image after click.
my header link is below. is there need any other link to be added??
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
here is html part:
<div>
<td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>
here is the javascript:
<script type="text/javascript">
function popup() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
});
}
</script>
there is a problem in my script. it popup a box but dont show the picture. can anyone please help me how to show image in the pop up box. thanks in advance.
Related
I am a novice with jquery and am having great trouble implementing fancy box. I've followed all of the instructions according to the user guide and have scoured the internet for many examples. I'm tying it into code-igniter so not sure if that is making a difference.
I am trying to just use it for a simple - click a link and show a text box with content and hyperlinks.
I have all of the files in a folder called 'fancybox' in my applications folder.
Here is my header:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
content:kljsadlkfajsdlfkjasdflkjads;
});
</script>
and here is the html view:
<div class="resources">
<a class="fancybox" rel="group" href="#">test</a>
</div>
thanks for the help
If you want fancybox to automatically find the element to show, put the id of that element in the href attribute.
Show box 1
<div style="display:none"><div id="box1">I am in fancybox!</div></div>
And the javascript:
$(document).ready(function() {
$("a.fancybox").fancybox();
});
If you want to manually show a fancybox dialog, just call it:
$("#box1").fancybox();
The error is in how you are calling fancybox. You've got the syntax wrong.
You need to pass your options as an object.
e.g
// Override content
$(".fancybox").fancybox({
content: "kljsadlkfajsdlfkjasdflkjads"
});
Further examples are shown in the docs
I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?
http://jsfiddle.net/cBwEK/10/
<html>
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<div id="invokeDP"></div>
<script type="text/javascript">
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['invokeDP']
});
</script>
</body>
</html>
EDIT: I have taken all scripts inside head section, previously these scripts were in body section
I think you miss a mootools core library.
<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)
Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:
http://jsfiddle.net/cBwEK/11/
Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
.......
Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.
I have an HTML page. I want to show a video on a javascript block UI anytime when a user lands on that page. Any help on it? Thanks.
Grab the fancybox code and then..
Example:
<html>
<head>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(function() {
// show modal window that has content of #popcontent div in its body
$.fancybox(
$('#popcontent").html(),
{
'autoDimensions': true,
'modal': true
}
);
})
</script>
</head>
<body>
<h1>Some example page content</h1>
<div id="popcontent" style="display:none;">
<video src="yourlinktovideo.ogg" width="640" height="480"></video>
</div>
</body>
</html>
Popoup with a video player will be opened as soon as the DOM is ready (and the documentready event of jQuery if fired). In my example it is a modal window so user won't be able to close it to return to content of the page which is underneath.
I have a problem with Jquery load in dialog box.
I spent all night trying to figure out why the dialog box shifts to the right side of the screen when I loaded another file. Apparently loading different pages can affect it randomly. It can be center but at the very bottom, but I don't know why it is happening. All I know is the loading another page into a dialog box displaces the dialog box from the center.
This is the code i have:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="ProfilePage/jqueries.js"></script>
<script type="text/javascript">
$(
function()
{
$("#box").load("jquery1.html").dialog({modal:true,height:400,width:400});
}
)
</script>
</head>
<body>
<div id="parent" style="background-color:red;height:800px;width:800px;">
<div id="circle" style="position:relative;left:0px;height:800px;width:400px;background-color:green;float:left;">
</div>
<div id="box">
I want milk
</div>
<div id="sds" style="position:relative;float:left;left:5px;height:800px;width:399px;background-color:yellow;">
</div>
</div>
</body>
</html>
If I remove the load and just put a normal text in the div it works fine.
Can someone suggest an idea? Thanks!
just try to add it to the new line
$("#box").load("jquery1.html")
$("#box").dialog({modal:true,height:400,width:400});
I have a page, i want it to display some content in a modal dialog (jquery UI dialog) as soon as the page is loaded.
$(document).ready(function(){
$("#example").dialog();
});
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
Thanks
Your div tag isn't properly formatted and it needs to be closed. The following worked for me, but it needs proper CSS files.
<html>
<head>
<script type="text/javascript" language="javascript"
src="jquery/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="jquery/jquery.ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#example").dialog({modal: true});
});
</script>
</head>
<body>
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
</body>
</html>
Wayne Khan is right in that
the default behavior is to open when you call dialog(), unless you set autoOpen to false.
and tvanfosson has it nearly correct, though the default dialog is not Modal. To display a modal window, you must set the modal option to true
To illustrate, here's a trimmed-down excerpt from a small project I was working on tonight:
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript" src="./init.js"></script>
<link rel="stylesheet" href="./css.css" type="text/css" />
<script type="text/javascript">
$(function() {
$('#exampleNode').dialog({
modal: 'true'
});
});
</script>
...
For your reference:
The jQuery Dialog Documentation (see the bottom for a styling reference)
A Modal Dialog example
My small MIT licensed project, which has a modal dialog: inComeAgain?