I'm trying to figure out how to load a new image with ajax when a link is clicked on.
The link looks like this (there are several links like this on the page they have little image thumbnails inside them so user can know approximately what image will load when he/she clicks on the link):
<div class="box-content2">
<a href="/path/to/image/2.jpg" id="2">
<img src="/path/to/image/thumbnail/2.jpg" title="Image Title 2" />
</a>
<a href="/path/to/image/3.jpg" id="3">
<img src="/path/to/image/thumbnail/3.jpg" title="Image Title 3" />
</a>
</div>
Href attribute contains relative path to the image and the id is the image name (also it's id in the database if it's relevant).
And on the same page I have this markup:
<div id="media-photo">
<img src="/path/to/image/1.jpg" alt="Image Title 1" />
</div>
I would like the image in #media-photo div to change without the page being reloaded.
This is what I have so far:
$(document).ready(function() {
$('.box-content2 a').click(function() {
var path = $(this).attr('href');
$('#media-photo img').html('<img src="' + path + '" />');
});
});
Not sure if what I'm doing is possible, maybe I need ajax?
You're definitely on the right track:
$(document).ready(function() {
$('.box-content2 a').click(function() {
var path = $(this).attr('href');
$('#media-photo img').attr('src', path)
.attr('alt', $('img', this).attr('title')); // in anticipation of your need
return false; // stop the default behavior (following the link)
});
});
The html method sets the html content of the element it's called on.
Your code is putting a new IMG element inside the old one, which is meaningless.
You need to to use the attr method to set the src attribute of the existing image, like this:
$('#media-photo img').attr('src', path);
Also, you need to add return false; to the end (or call event.preventDefault() and take an event parameter) to prevent the browser from following the link.
Related
When the user clicks a "Vacation" image on the left, a larger copy
of it will appear to the right of the images in the image with
an id of "currentimage" inside the "bigimage" div. (See the HTML file)
At the same time one of the following should appear below
the "currentimage": "Mountain Vacation", "Ocean Vacation", or "Desert Vacation"
depending on which image was selected.
this is part of the HTML code
<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>
This is part of the JS code
$("img").click(function ()
{
var mySrc = $(this).attr("src");
$("#currentimage").attr("src", mySrc);
$("#imagedesc").html(this.alt);
});
I also tried
$("img").click(function ()
{
$("#currentimage").attr("src", this.src);
$("#imagedesc").html(this.alt);
});
but when i click the image a larger copy of it is not appearing on the right
Browsers not reload image after change src. Try remove old element with old image and paste new element with new image src.
Or: How to reload/refresh an element(image) in jQuery
Your click handler is on any img this means that the #currentimage element is the only element which this handler is added. You are then setting the src to the src that it already is.
you instead want to change the src to something else. Here I set an initial smaller placeholder which is replaced with a larger one on click.
$("img").click(function() {
this.src = 'https://placeimg.com/500/500';
$("#imagedesc").html(this.alt);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>
At this current iteration, I have it where if a user clicks on an image thumbnail, the thumbnail image displays in a different div (the main div) and in doing so, it rewrites the main div img src attr with the thumbnail img attr minus the "-thumbnail". This part is good, or at least I believe it is.
With that said, after the user clicks on a thumbnail and the main div img appears, it lingers...and what I mean by lingers is that for example, if a user closes the div and re-opens it or another div just like it, the last image shows (stays) when it shouldn't in the main div. Instead, it should be showing the first thumbnail img in the main div...
Any suggestions is appreciated and below is what I currently have (or at least a portion of it). There is a lot more, but below is the main stuff that's giving me troubles...
The HTML part is within a div class called "t_1". I have 24 of these..."t_1", "t_2", "t_3" respectively. And within this class, I have what is posted below in all using the same div classes. The only difference is the folder names in the img tag.
So, when a user clicks on that thumbnail and that thumbnail image gets rewritten so that it can be displayed in the main div "t_main_screenshot", all is good...but then, if the user clicks out of the "t_1" etc. divs, and opens up another "t_2", that last image thumbnail that was clicked previously shows in the main div (t_main_screenshot) instead of the first image thumbnail for what should be in "t_2"...
Hopefully this is a bit better in clarity...It's kind of hard to explain.
HTML:
<div class="t_main_screenshot">
<img src="_framework/images/slides/simplicity/2.png" alt="" title="" />
</div>
<div class="t_thumbnail_wrapper">
<div class="t_thumbnail active">
<img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" />
</div>
</div>
JS/JQuery:
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$('.t_main_screenshot img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
Try this code :
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
As you are updating directly on .t_main_screenshot class. So it will update all places, in this case in all your modals .t_1, .t_2, ...etc.
$('a.screenshots_1').click(function() {
$('.t_main_screenshot img').find('img').attr('src' , "");
});
This will help you to initialize the main screenshot on modal screenshot icon click.
I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.
<div id="img"><img src="download1.jpg"></div>
<div><img src="" class="img2"></div>
<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
</script>
Fiddle
Tried using a fiddle and it works, here is the code which I used.
HTML
<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>
<div><img src="" class="img2"></div>
<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />
Jquery
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.
You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:
$('.source-img').on('click', function(){
var src = $(this).children('img').attr('src');
$('#destination').children('img').attr('src', src);
});
Check out this jsFiddle.
If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.
If you're looking for a better method, see this JSFiddle
It uses the clone function
$('.imgs').click(function(){
$(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});
It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).
If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.
I got a page. Its a key shop website.
I want to make that when the customer clicks on the icon, for example windows7, it removes the other products beside it, and write its description and payment button.
I already succeeded in not allowing the page to refresh, and only view the content.
But the problem is the tab; I want to change it in the end of the page, and whenever I click on the icon for windows7 it opens to me the page I want, but from the top.
I'am using the following code:
<script>
$("div.haha").tabs("img.one > div", {effect: 'ajax'});
</script>
i just want it to change content and not to start from top
<div id="haha">
<img class="one" src="imgs/product1.png">
<img class="two" src="imgs/product2.png">
<img class="three" src="imgs/product 3.png">
<img class="four" src="imgs/product4.png">
</div>
Actually to access div with "haha" id you should use
$("div#haha")
selector.
I am changing the code, because I had this code on hand and it works pretty well from what I've seen and appears to fit all your needs.
Javascript: (tested with jquery 1.9.1)
<script type="text/javascript">
$(function(){
$("a[rel='haha']").click(function(e){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'haha'
$.ajax({url:pageurl+'?rel=haha',success: function(data){
$('#haha').html(data);
}});
//stop refreshing to the page given in
return false;
});
});
</script>
html example:
This is the code outside the div. This shouldnt be effected.
<br /><br />
Here are the links outside the div to show you how it works. IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
IMG 1
IMG2 - NO REL
IMG3
RESET
<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
IMG1
IMG2
IMG3 - NO REL
</div>
Just know, any link you want to load into the div needs a rel="haha" (which can be changed to whatever you want to call it). If you want the page to load completely (like changing pages), just leave out the rel="haha" from the url.
Demo of how the code works: http://kygar.com/code/haha.php
My CMS's lightbox-style photo gallery outputs code like below. I've provided code for two thumbnails.
The parameter values for "m" and "s" will always be "150" and "true." I'd like to change that to m=250 and s=false.
I'm new to JavaScript and jQuery. If you have a suggestion, please help me out with where to put the code on the page. Thank you.
<div class="thumbTight MainContent">
<div class="thumbContents">
<a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
<img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&m=150&s=true" alt="Banana" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
<div class="thumbTight">
<div class="thumbContents">
<a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
<img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&m=150&s=true" alt="Cantaloupe" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
In your document ready handler, use each to iterate over the thumbnails (images inside divs with the thumbContents class) and assign the src attribute to the original src attribute with the required substitutions.
$(function() {
$('.thumbContents img').each( function() {
var $img = $(this);
$img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
});
});
You can run this jQuery after the page has loaded. The images will start loading with the different URL, your code will run and change the image URLs and then the new one will load and display. There is nothing you can do client-side to prevent the initial display unless you actually use CSS such that they images are initially hidden and only made visible AFTER you've set the desired URL.
$(".thumbTight img").each(function() {
this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});
You can see a demo here: http://jsfiddle.net/jfriend00/UdnFE/.