My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.
You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute
I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!
Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.
Related
I am trying to get image src using jquery like this:
HTML
<div class="post_container">
<img src="http://imageurl.com">
</div>
<div class="appendedimageContainer"></div>
Javascript
var imageSrc = $('.post_container img').attr('src');
$(".appendedimageContainer").append('<div class="appended"><img src="'+imageSrc+'"></div>');
The code above works in a healthy way, but the question I would like to ask is here. If the pictures are more than one I want them not to be append. I just want to get one of them append.
For example if a situation as follows:
<div class="post_container">
<img src="http://imageurl1.com">
<img src="http://imageurl2.com">
<img src="http://imageurl3.com">
<img src="http://imageurl4.com">
</div>
<div class="appendedimageContainer"></div>
Just let one of them get a image url and ignore other image src. Can you help How can I do this?
Use nth-child selector to obtain your desired image, e.g.
var imageSrc = $('.post_container img:nth-child(0)').attr('src');
you can use first() to get the first element :-
var imageSrc = $('.post_container img').first().attr('src');
I have a CSS lightbox gallery on my website, however it loaded the thumbnails and the large images at the same time.
Below are the contents of my various files;
HTML:
<div class=galerie>
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
</div>
CSS:
.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}
I've added a script (jQuery):
<script>
$("a.galimg").click(function() {
$(".lightbox").each(function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
});
</script>
And now the large files are loaded only after I click a thumbnail.
The problem is that they all load at once, and I want only the clicked one to load at a time.
Is there a way to do this?
I know the each function does that, is there any other function I could use?
I'm not sure why you want to do something like this (would be easier if you post a link to your site) but i'll try to help.
Just don't use 'each' function. So your code should look something like this:
$("a.galimg").click(function() {
var imgID = $(this).attr('href');
$(imgID).attr("src", $(this).data('srcbig'));
});
And for HTML:
<div class=galerie>
<img src=/images/thumbnail.jpg /><img src="" alt="remember about me">
</div>
You could even delete the second 'a href' and image and just create it dynamically. It all depends on how your lightbox library works and what you need.
Attr sets an attribute, if you're trying to use it, I would go with something like this. I'm not sure what you're trying to set the attribute to, but this is the syntax:
<script>
$("a.galimg").click(function() {
$(this).attr("data-src", "your desired data attribute");
})
});
</script>
http://www.w3schools.com/jquery/html_attr.asp
I have a img which is displaying fine, however I now want to hide the image (display: none) and get the value of its title and display that in its parent div instead, using JQuery. I'm sure it's relatively simple, I'm just drawing a massive mind blank at the moment.
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>
You can insert the title after the image like
$('.cardBrand.image img').after(function() {
return this.title;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cardBrand image">
<img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>
var image_title=$('.card-logo').attr('title'); // get title of image
$('.card-logo').hide(); // hide image
$('.cardBrand').text(image_title); // set title in parent div
You can get the title of the image using $('#img-id').attr('title'); and then use it to set the html using $('#div-id').html($('#img-id').attr('title'));
Note : You can use the class also. But, it will change all the div with the same class. It is recommended that you use an id for the div for these purposes
var imgTitle="<span>" + $(".card-logo").attr("title") + "</span>";
$(imgTitle).insertAfter($(".card-logo"));
$(".card-logo").hide();
i have a simple html site where at the top is a main image with a download button.
The download works with the html5 download attribute.
Now i have some thumbnails underneath the main image - which when clicked replace the main image with the thumbnail image.
Following issue: I use the same javascript code to also replace the url of the download button with the thumbnails url, but when clicking the download button it still opens the hardcoded download link from the html instead of using the replaced url.
HTML
<div class="dwnldcntnr">
<img src="imgage1.jpg" alt="Image Title 1" />
</div>
<div id="btncntnr">
<a href="imgage/image1.jpg" download="image1.jpg">
<button id="btn">Download</button></a>
</div>
<div class="itemcntnr">
<a href="image2.jpg" title="2.jpg">
<img src="image2.jpg" />
</a></div>
JS code for replacing download url with thumbnail url
<script type="text/javascript">
$(document).ready(function() {
$('.itemcntnr a').click(function() {
var path = $(this).attr('href');
$('#btncntnr a').attr('href', path)
.attr('download', $('a', this).attr('title'));
return false;
});
});
</script>
Don't put hard coded href for the link in html instead try to add it on $(document).ready
Also I agree with ahren that you should never put button inside an a tag. Instead apply styles to a tag so that it will look like a button
Try replacing the whole DOM element.
I don't think you should be nesting a button inside an a tag, as they're both elements that have native interactivity. You'll most likely come across HTML parsing errors in earlier versions of IE.
$('.itemcntnr a').click(function() {
var $this = $this.clone().empty().html('Download');
$('#btncntnr a').replaceWith($this);
return false;
});
<img src="pic1.jpg" class="mythumbs">
<img src="pic2.jpg" class="mythumbs">
<img src="pic3.jpg" class="mythumbs">
<img src="pic4.jpg" class="mythumbs">
<script>
/*
here is the code which makes me when i click on any image, it shows me its src attribute
(without using idTag 'preferred').
*/
alert(theAttribute);
</script>
i need to type a code which shows me the clicked item's src attribute without using idTags
$(function(){
$("img.mythumbs").click(function(){
alert($(this).attr("src"));
});
});
This code will alert the src attribute of all img elements which has a css class mythumbs
Working sample : http://jsfiddle.net/tZcpw/1/
Here is a solution without ID and Class. This will alert src when you click images.
$("img").click(function(){
alert($(this).attr("src"));
});
You may replace $("img") with $(".your_class-here") if you want to do this with a class.
Here is a working Live Demo.