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 over the screen. But I do not have much idea about javascript & jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. 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>
can anyone please help me how to show image in the pop up box. thanks in advance.
Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
Replace your jquery with below any try:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
I assume the images are displayed properly which you will click
I would recommend using Colorbox by Jack Moore. It uses JQuery, and is very customizable.
Colorbox: http://www.jacklmoore.com/colorbox/
Demo: http://www.jacklmoore.com/colorbox/example1/
If you aren't opposed to using PHP, you also may want to check out UberGallery. It uses colorbox internally and can be used simply with
<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
Related
I have a button on my web page. once I click on the button a pop-up will appear with some text. here I need to display another HTML page in that pop-up
I have given my code below please help me
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<button id="notifyModal_ex1" class="btn btn-primary">Example</button>
<div id="content2" style="display:none">
ghjgh
</div>
<script src="popModal.js"></script>
<script>
$(function(){
$('#notifyModal_ex1').click(function(){
$('#content2').notifyModal({
duration : 1500,
placement : 'center',
overlay : true,
type : 'notify',
onClose : function() {}
});
});
});
</script>
</body>
</html>
Try using jQuery's load():
$('#content2').load("page/url").notifyModal()
To show a loading message:
$('#content2').text("Loading, please wait...").load("page/url").notifyModal()
Or to open the modal when load ends:
$('#content2').load("page/url", function() {
$('#content2').notifyModal();
})
As described in load() docs:
Load data from the server and place the returned HTML into the matched element.
So it will load an html response and append it to the target element.
I'm trying to use Javascript to change the src attribute of an image (id: big-img) to that of a smaller image (class: clicky) when the smaller image is clicked to create . Unfortunately it doesn't seem to be working. Code provided below.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Always use meta tags in head first -->
<!-- Sets character encoding (utf-8 = unicode) -->
<meta charset="utf-8">
<!-- Sets width of the page to width of the device and sets initial zoom
value to 1.0. Used for mobile viewing -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Linking in bootstrap (css) and author styles. -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- For simple Javascript concept exercises -->
<div id="practice">
<p>
Does this work?
</p>
</div>
<!-- For image related complex(ish) Javascript exercises -->
<div class="container">
<div class="row">
<div class="clicky col-md-3"><img src="img/img1.jpg"></div>
<div class="clicky col-md-3"><img src="img/img2.jpg"></div>
<div class="clicky col-md-3"><img src="img/img3.jpg"></div>
<div class="clicky col-md-3"><img src="img/img4.jpg"></div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img id="big-img"
class="large-img"
src="img/img1.jpg">
</div>
</div>
</div>
<!-- <div class="col-md-12">
<img id="bigImage"
class="large-img"
src="img_1.jpg"
alt="graffittied building"/>
</div> -->
<!-- Linking in Jquery library, bootstrap (JS) and my scripts. Imported in
that order due to bootstrap requiring some Jquery features so needs to be
lower in source order -->
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
Javascript:
$(".clicky").click(function(){
$("#big-img").attr('src',
$(this).attr('src'));
});
As clicky is not img element it doesn't have src attribute thus the code is working as expected.
You need to traverse to img element the fetch its attribute, there are various ways to achieve that. Here in code I have used .find() method since img is child of clicky element
$(".clicky").click(function(){
$("#big-img").attr('src', $(this).find('img').attr('src'));
});
OR, You can bind event with img element then your code will work
$(".clicky img").click(function(){
$("#big-img").attr('src', this.src);
//$("#big-img").attr('src', $(this).attr('src'));
});
function change_img(){
$(document).on("click",".clicky img",function(){
var el = $(this);
var src = $.trim(el.attr("src"));
(src !=="") ? $("#big-img").attr("src",src) : '';
});
}
$(function(){
change_img();
});
Try this:
$(".clicky").click(function(){
$("#big-img").attr('src',
$(this).find('img').attr('src'));
});
clicky class is attached to a div not to an img so it does not have a src attribute
What you can do is this:
$(".clicky > img").click(function(){
$("#big-img").attr('src', $(this).attr('src'));
});
But if you want to to attach the listener on the div, you can do this:
$(".clicky").click(function(){
$("#big-img").attr('src', $(this).find("img").attr('src'));
});
$(this) refers to the clicked element : <div>. You need to get img thats inside the div.
$(".clicky").click(function(){
$("#big-img").attr('src',$('img', this).attr('src'));
});
To complete :
$(".clicky").on('click', function(e){
$("#big-img").attr('src',$('img', this).attr('src'));
});
I'm trying to add a help button in a Zend form using qTip 2. The button is a simple image, and I would like to open a pop-in when the image is clicked.
Here my code:
in Booostrap.php:
protected function _initView() {
...
$view->headLink()
->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}
protected function _initJQuery() {
...
$view->jQuery()
->setLocalPath('/js/jquery/jquery-1.9.1.min.js')
->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
->addJavascriptFile('/js/jquery.qtip.min.js')
->enable()
->uiEnable();
}
In my view:
<?php
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>
And the rendered result in my browser:
<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
//<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}}); //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>
which is what I wanted to get. Problem is, the tooltip doesn't show up. Not even is an event fired when I click on the picture, according to the Javascript console. So my idea i wrong, but I can't understand why. Any idea?
I Think that the problem is here: $(data-tooltip!="") instead of $('[data-tooltip!=""]').
An other problem is your call is before the tag img so use InlineScript ìnstead of headscript
To Finish, I think should precise de name of the tag (img) in the selector.
Try to replace
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
By
$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');
Not sure but your qtip initialization has to be in doc ready:
<?php
$this->headscript()->appendScript('$(function(){// here qtip code});');
?>
I need a way for user to select the portion of an image either by resizing transparent rectangle or by clicking and dragging the selection area (as it's done in desktop OS), both would work for me. Then i need to retrieve the coordinates of the selected area with jQuery.
Please recommend samples or tuts (if there are any), methods or API documentations sections that could help.
See Jcrop and it's demos.
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />
And the script:
<script type="text/javascript">
jQuery(function($){
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});
// Simple event handler, called from onChange and onSelect
// event handlers to show an alert, as per the Jcrop
// invocation above
function showCoords(c)
{
alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ c.y2)
alert('w='+c.w +' h='+ c.h)
};
</script>
<html>
<head>
<title>Image Processs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
</head>
<body>
<img src="https://i.stack.imgur.com/UYYqo.jpg" alt="" id="image">
<script>
$(document).ready(function(){
$('#image').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
}
})
})
</script>
</body>
</html>
Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<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>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.
replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});
below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready