i have this html:
<ul class="cont_ul4">
<li class="cont_li">
<div class="cont_picture">
<img src="1.jpg" width="150" height="225" >
</div>
</li>
<li class="cont_li">
<div class="cont_picture">
<img src="2.jpg" width="150" height="225" >
</div>
</li>
</ul>
and this function:
function ajax_request() {
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>');
$('#placeholder').load("/test.php?id=1234556");
}
what i need is when i click on the image to trigger this function.
with an input button i could do this:
<input type="button" onclick="ajax_request()" value="Click Me!" />
any ideas?
Thanks
Give your image an id:
<img id="myImage" src="1.jpg" width="150" height="225" style="cursor:pointer">
Then in Javascript:
$("#myImage").click(ajax_request);
Or if you want to run the same function for all images:
$("img").click(ajax_request);
However it would be better to give your images a CSS class and then use that. That way you can restrict the click action to specific images:
<img class="link-image" src="1.jpg" width="150" height="225">
...
<img class="link-image" src="2.jpg" width="150" height="225">
Then:
$(".link-image").click(ajax_request);
Are you lookin for something like this?:
$(function(){
$("img").click(function(){
ajax_request();
});
});
Try this:
JS:
function ajax_request() {
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>');
$('#placeholder').load("/test.php?id=1234556");
}
$('#run_ajax').click(ajax_request);
HTML:
<input type="button" id='run_ajax' value="Click Me!" />
Related
I am facing one problem that I want to drag image and drop in between two images or swap two images with the help of javascript. But I am unable to do this. As in the below code there is a div of background color in that while I am clicking below icons they will move on that div one by one. But the next thing I have to do is that I have to drag and drop the images that are going to that div or even swap them or placed a image in between the two. I am unable to does that task. Can anyone help me.
Thanks in advance.
This is my code :
function changeHome() {
document.getElementById('color').style.backgroundColor = "coral";
}
function changeGray() {
document.getElementById('color').style.backgroundColor = "gray";
}
function changeRed() {
document.getElementById('color').style.backgroundColor = "red";
}
function changeGreen() {
document.getElementById('color').style.backgroundColor = "green";
}
function changeBlue() {
document.getElementById('color').style.backgroundColor = "blue";
}
$(document).ready(function() {
$('.image').click(function() {
var srcimg = $(this).attr('src');
$('#color').append("<img src=" + srcimg + " width='70' height='70'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div class="container">
<h1 align="center"><u> JavaScript Simple learning </u></h1>
<h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3>
<br/> <br/>
<div class="col-md-10">
<div id="color">
</div>
</div>
<div class="col-md-2">
<button onclick="changeHome()"> Home Color </button> <br/><br/><br/>
<button onclick="changeGray()"> Click for Gray </button> <br/><br/>
<button onclick="changeRed()"> Click for Red </button> <br/><br/>
<button onclick="changeGreen()"> Click for Green </button> <br/><br/>
<button onclick="changeBlue()"> Click for Blue </button> <br/><br/>
</div>
</div>
<div class="container">
<h2><u> List of Icons </u></h2>
<img class="image" src="images/fb.jpeg" width="70" height="70" />
<img class="image" src="images/twitter.jpeg" width="70" height="70" />
<img class="image" src="images/linkedin.jpeg" width="70" height="70" />
<img class="image" src="images/gmail.jpeg" width="70" height="70" />
<img class="image" src="images/instagram.jpeg" width="70" height="70" />
<img class="image" src="images/whatsapp.jpeg" width="70" height="70" />
<img class="image" src="images/telegram.jpeg" width="70" height="70" />
</div>
There are two separate methods for drop.One is for appending an image and another is for replacing an image.You can try the following :
SCRIPT Content
<script>
function changeHome() {
document.getElementById('color').style.backgroundColor = "coral";
}
function changeGray() {
document.getElementById('color').style.backgroundColor = "gray";
}
function changeRed() {
document.getElementById('color').style.backgroundColor = "red";
}
function changeGreen() {
document.getElementById('color').style.backgroundColor = "green";
}
function changeBlue() {
document.getElementById('color').style.backgroundColor = "blue";
}
$(document).ready(function () {
$('.image').click(function () {
var srcimg = $(this).attr('src');
var imgid = $(this).attr('id');
console.log($(this));
$('#color').append('<div ondrop="drop(event)" ondragover="allowDrop(event)" style="float:left;display:block;height:50px;width:50px"><img id=' + imgid + "1" + ' src=' + srcimg + ' draggable="true" ondragstart="drag(event)" width="70" height="70">');
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("src", ev.target.id);
}
function drop(ev,ui) {
console.log("evvv" + ev.srcElement);
console.log($(this).parent('div'));
ev.preventDefault();
var src = document.getElementById(ev.dataTransfer.getData("src"));
var srcParent = src.parentNode;
if (srcParent.parentNode.id == "div1")
{
var data = ev.dataTransfer.getData("src");
ev.target.appendChild(document.getElementById(data));
}
else
{
var tgt = ev.currentTarget.firstElementChild;
ev.currentTarget.replaceChild(src, tgt);
srcParent.appendChild(tgt);
}
}
function drop1(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("src");
ev.target.appendChild(document.getElementById(data));
}
</script>
HTML Content
<div class="container">
<h1 align="center"><u> JavaScript Simple learning </u></h1>
<h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3>
<br /> <br />
<div class="col-md-10">
<div id="color" style="height:100px" ondragover="allowDrop(event)" ondrop="drop(event)" >
</div>
</div><br /><br />
<div class="col-md-2">
<button onclick="changeHome()"> Home Color </button> <br /><br /><br />
<button onclick="changeGray()"> Click for Gray </button> <br /><br />
<button onclick="changeRed()"> Click for Red </button> <br /><br />
<button onclick="changeGreen()"> Click for Green </button> <br /><br />
<button onclick="changeBlue()"> Click for Blue </button> <br /><br />
</div>
</div>
<div class="container" id="div1">
<h2><u> List of Icons </u></h2>
<div style="float:left;display:block">
<img class="image" id="img1" src="Images/natural.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img2" src="Images/nature2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img3" src="Images/sunset.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img4" src="Images/dp1.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img5" src="Images/dp2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img6" src="Images/guitar.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
<div style="float:left;display:block">
<img class="image" id="img7" src="Images/images.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
</div>
</div>
You can remove single photo on double click event by using the following function:
SCRIPT Content
function ImageDel(elem)
{
elem.parentElement.remove(); //to remove an parent div of the image
elem.remove(); //to remove the image
}
HTML Content
<img ondblclick="ImageDel(this)" width="70" height="70">
I encountered a little problem. I am making a little gallery and saw html like this:
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
</div><br/>
<div class="preview" align="center">
<img name="preview" src="images/img1.jpg" alt=""/>
</div>
And now I wanted to do it repeatedly from json object So I did sth like this:
<div class="mythumbnails">
<img ng-click="mypreview.src=img{{$index}}.src" src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt=""/>
</div><br/>
<div class="mypreview" align="center">
<img name="mypreview" src="data:image/png;base64,{{ data.gallery[0] }}" alt=""/>
</div>
Firstly I did mouseover but I couldn't use {{ $index }}, so I did ng-mouseover and ng-click. I don't know if the expression is wrong or what.
Thanks up front :)
#edit
The problem is when I click the main picture from mypreview doesn't change.
#edit2
In Firebug:
<img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">
So it the index works.
#edit3
At the beginning I got error in console: Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=18&p3=mypreview.src%3Dimg%7B%7B%24index%7D%7D.src&p4=%7B%7B%24index%7D%7D.src
Try to replace
src="data:image/png;base64,{{ data.gallery[0] }}"
to
data-ng-src="data:image/png;base64,{{ data.gallery[0] }}"
If anyone would be interested I did this:
onmouseover="mypreview.src=this.src"
I have this code:
$('.myClass')[0].src += "somethinghere";
And I also have multiple Div's with myClass.
How can I have the [0] to by relevant to the selected Div?
For example:
$('.myClass')[this].src += "somethinghere";
Here is the js:
$(document).ready(function() {
$(document).on("mouseover",".myClass",function(){
//code here
});
});
The HTML is :
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
What seems to work everytime is:
$('.myIframeClass')[0].src += "something";
but it will only work for the first iframe and not for the others
You could use the this directly
update: after the updated answer (with the real html) it turns out you need to use the closest method to find the container div and then the .find to locate the actual iframe
$(document).ready(function() {
$(document).on("mouseover", ".myLinkClass", function() {
var iframe = $(this).closest('div').find('iframe').get(0);
iframe.src += 'something%20';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-1" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-2" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-3" frameborder="0"></iframe>
</div>
</div>
Keep in mind that div elements do not have a src property.
If they are indeed div elements you might want to use the .attr method instead.
$(document).ready(function() {
$(document).on("mouseover",".myClass",function() {
var element = $(this),
currentSrc = $(this).attr('src');
element.attr('src', currentSrc + 'something');
});
});
I am working on a simple gallery for my site.
Demo: http://jsfiddle.net/fdr6y6y7/
I have a large image that changes when you click a thumbnail underneath it.
However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.
For example, if I click the 2nd thumbnail image the hyperlink inside the largeimg div should really change to http://placehold.it/250x250.
Can I use jQuery to do this?
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<img src="http://placehold.it/200x200" />
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<img src="http://placehold.it/100x100" />
</li>
<li>
<img src="http://placehold.it/100x100" />
</li>
</ul>
</div>
</div>
</div>
Thanks to the Anon SO user for this: http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>
I am trying to make a prev and a next button that changes de "src" attribute of the "lightbox" img. Basically when you click on a thumbnail, jquery script gets its src and places on the lightbox, now i need to make a button that let me get the src of the next and prev img ( or thumbnail ?)..
$(document).ready(function(){
$(".thumbnail").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
$(".footer").fadeToggle("fast");
});
$("#close").click(function(){
$("#popup").fadeOut("slow",function(){
$(".footer").fadeToggle("fast");
});
});
$("#next").click(function(){
$("#lightbox").removeAttr("src");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="popupslide">
<div id="popup">
<div id="center">
<img id="lightbox" src="" >
<img id="close" src="fotos/fotoscidade/close.png">
<img id="next" src="fotos/fotoscidade/close.png">
<img id="prev" src="fotos/fotoscidade/close.png">
</div>
</div>
</div>
<div>
<ul class="sidebside">
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
</ul>
</div>
Give your imgs attribute called img_no with values like 0,1,2,3,4 etc. Use that value, parseInt it and get src based on it.
Refer this link to understand what I mean. Infinite carousel doesnt work