I want to load image after I click link and next show Exif data.
I have code like this.
<div class="row">
<div class="col-md-4 link">
<a id="link" href="http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG" class="img-link">DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
JS
$("a").click(function(event) {
event.preventDefault();
console.log($(this).attr("href"));
var self = $(this);
var link = $(this).attr("href");
var img = $("<img />").attr('src', link).load(function() {
self.parent().parent().children('.image').append(img);
$(this).exifLoad(function() {
self.parent().parent().children('.exif').append($(this).exifAll());
});
});});
And it is not working.
Someone may look where I have error?
Thanks.
You can load image like this :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function openImage(url)
{
var img = $('<img id="dynamic" />');
img.attr('src',url);
img.appendTo('.image');
}
</script>
</head>
<body>
<div class="row">
this is page
<div class="col-md-4 link">
<a id="link" href="javascript:openImage('http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG')" >DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
</body>
</html>
And than after you can load other <div class="col-md-4 exif"> in same function.
Here is jsfiddle
Related
this is my card where i have passed the title and image
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 200px; background-color: black;" onclick="pass()">
<img class="card-img-top" src="{{ image[0] }}" alt="k" style="width: 180px;">
<div class="card-body">
<a href="{{ url_for('info'}}">
<h5 class="card-title">{{ book[0] }}</h5>
</a>
</div>
</div>
</div>
how to get the value from the a tag and img tag and send it to the particular route ie /info, this is my scripts where i tried to get value
<script>
function pass(){
var a = document.getElementByTagName('a')
var img =document.getElementByTagName('img')
}
</script>
Try this Js code and check your console
<script>
function pass(){
var a = document.getElementsByTagName('a');
var img =document.getElementsByTagName('img');
console.log(a[0].outerHTML);
console.log(img[0].outerHTML);
}
</script>
I am developing a chat screen and i want to initiate a modal when an option on the screen is selected, i am unable t do it. kindly help me.
here is my html code where you can insert the option code.
<section id="demo">
<div class="vertical-align">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
<div class="card no-border">
<div id="chat" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<select data-conv-question="Here is my features! Enjoy.">
<option value="google" data-callback="googleMap">Google Map</option>
<option value="bing" data-callback="dawaai">Medicine Comparison`</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The function called when data-call-back is:
function google(stateWrapper, ready) {
window.open("https://www.google.com/maps/place/Agha+Khan+Hospital+Pond+No.1/#24.8935763,67.0690012,17z/data=!3m1!4b1!4m5!3m4!1s0x3eb33edd90fa1943:0xd423034e388220fa!8m2!3d24.8935997!4d67.0713131");
ready();
}
function bing(stateWrapper, ready) {
window.open("https://dawaai.pk/");
ready();
}
The code for jquery is here:
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="dist/autosize.min.js"></script>
<script type="text/javascript" src="dist/jquery.convform.js"></script>
as i am unable to insert the complete file for jquery i am inserting the link form where you can have the complete code for chatbot.
https://github.com/eduardotkoller/convForm
You can try this:
View:
<div id="DemoModal" class="modal fade" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
</div>
</div>
</div>
Jquery:
function OpenModel(Title, Body, modalsize) {
$("#DemoModal").find(".modal-content").html(Body).after(function (e) {
if (modalsize == null) {
modalsize = 'modal-lg'
}
$("#DemoModal").find(".modal-dialog").attr('class', 'modal-dialog ' + modalsize + '');
$("#DemoModal").find(" ").html(Title);
$("#DemoModal").modal("show");
})
}
And when you need to call pop up then simply pass:
OpenModel("", data, '')
in jquery.
I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working
You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
Using the jQuery lightGallery plugin: http://sachinchoolur.github.io/lightGallery/
So I have the following code:
JSON (array):
var gallery_json = '[{"src":"/assets/Images/Gallery-Images/img-1.jpg","thumb":"/assets/Images/Gallery-Images/img-2.jpg"},{"src":"/assets/Images/Gallery-Images/img-3.jpg","thumb":"/assets/Images/Gallery-Images/img-4.jpg"},{"src":"/assets/Images/Gallery-Images/img-5.jpg","thumb":"/assets/Images/Gallery-Images/img-wool-2015-hero-crop-sheep-river.jpg"},{"src":"/assets/Images/Gallery-Images/img-6.jpg","thumb":"/assets/Images/Gallery-Images/img-7.jpg"},{"src":"/assets/Images/Gallery-Images/img-8.jpg","thumb":"/assets/Images/Gallery-Images/img-9.jpg"}]';
JS:
$(document).ready(function () {
var $gallery = $('[data-hook="gallery"]');
if ($gallery && typeof gallery_json !== 'undefined') {
$gallery.on('click', 'img', function () {
$gallery.lightGallery({
dynamic: true,
dynamicEl: JSON.parse(gallery_json)
});
$gallery.data('lightGallery').slide($(this).parent().index());
});
}
});
MarkUp:
<div class="row" data-hook="gallery">
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-1.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-2.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-3.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-4.jpg" class="img-responsive">
</div>
</div>
So basically what I am after is whichever image in the [data-hook="gallery"] is selected the dynamic light gallery will load up showing this image as the index, bear in mind my JS skills are really limited so please walk my through any solutions.
.I do an example embled video: http://sachinchoolur.github.io/lightGallery/examples.html
and i have a problem with json! I can't load video when click image(div json) on website!!
But when I click image(div) slide video load complete and on this slide I can load all video(div and div json) !! Please help me when I click image(div json) video must be load.
this my code:
<script type="text/javascript">
$(document).ready(function () {
$.post("listvideojson.aspx", function (response) {
var listlinks = JSON.parse(response);
for (var i = 0; i < listlinks.length; i++) {
$("#video").append("<div data-src='" + listlinks[i].link + "'><img class='hinh' src='Images/149712_133340426820507_1784820870_n.jpg' /></div>");
}
});
});
</script>
<link href="CSS/lightGallery.css" rel="stylesheet" />
<script src="Scripts/lightGallery.js"></script>
This my html body:
<div id="video">
<div data-src="https://vimeo.com/110223381">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110223326">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214790">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214789">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
</div>