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>
Related
I have this old website that needs some fixes, but they need to be quick.
Now I have this image with
Iam going to change the source with the following code:
$("img").click(function(){
// Change src attribute of image
$(this).attr("src", "images/card-front.jpg");
});
But I cant select the image, since it is dynamic content.
How do I add a class or ID to this image, based on its title or alt?
If it's created dynamically, listen on document.
Also .click() is deprecated. Use .on():
$(document).on("click", '[alt="Schwimmbäder"]', function(){
// Change src attribute of image
$(this).attr("src", "https://via.placeholder.com/200x200");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click the image:</p>
<img src="unknown" title="Schwimmbäder" alt="Schwimmbäder">
Targetting title and setting a class to an image and then use that new class to handle click events: this is how you can do it...
$('img[title="imgTitle"]').addClass("newClass");
$('.newClass').click(function(){
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/peppers.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img width="250" title="imgTitle" src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" />
i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>
You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);
You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");
Use
$(".test_img").attr("src","abc.jpg");
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 am supposed to
Write and use a JavaScript function to insert content into an HTML element:
• Create a function named swapOut that includes the statement: document.imageFlip.src="name of the first image".
• Create a function named swapBack that includes the statement: document.imageFlip.src="name of the second image".
• Insert a div tag with an id and name of myImage.
• Inside the div container, insert an image tag with an id and name of imageFlip. Initialize the image tag to display the first image. Set the height and width attributes. Set the alt and title attributes to "Swappable image".
alt="Swappable image" title="Swappable image" height="" width=""
• Inside the image tag, add onmouseover="swapOut()" and onmouseout= "swapBack()". These define events that the image element recognizes. The first calls your swapOut function when you move the mouse over the image; the second calls your swapBack function when you move the mouse off the image.
So far i have done this.
in my .js form i have
function swapOut() {
document.imageFlip.src = "firstImage"
}
function swapBack() {
document.imageFlip.src = "secondImage"
}
and in my .htm form I have
<div id="myImage" name="myImage">
<img src="firstImage.png" alt="Swappable image" title="Swappable image" id="imageFlip"
name="imageFlip" onmouseout="swapBack()" onmouseover="swapOut()" height="200" width="200"/>
</div>
I need the images to swap but I get the first image however when i hover over it i only get a box with no picture
Make sure what your assigning to your 'src' attribute has the full image path and extension.
For your case it would be
document.imageFlip.src = "firstImage.png"
// or
document.imageFlip.src = "secondImage.png"
Also you can use
document.getElementById('imageFlip').src = "firstImage.png"
If you don't want to use the name attribute everywhere, this is the common way to do this type of thing, and (I could be wrong on this) but I think the name attribute is deprecated in HTML5.
you miss the extension of your image.
<img src="firstImage.png" alt="Swappable image" title="Swappable image" onMouseOver="this.src='secondImage.png'" onMouseOut="this.src='firstImage.png'" height="200" width="200"/>
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.