I want to display only the first image in each div.className.
This...
<div class="className">
<p>Yo yo yo</p>
<p><img src="snoop.jpg" /></p>
</div>
<div class="className">
Helloooooo
<img src="biggie.jpg" />
<img src="tupac.jpg" />
<img src="coolio.jpg" />
Blah blah blah
</div>
<div class="className">
<div><img src="dmx.jpg" /></div>
<div><img src="willsmith.jpg" /></div>
</div>
Would display as...
[snoop.jpg]
[biggie.jpg]
[dmx.jpg]
ONLY the first image of each div.className would display, without all of the other content. The content is dynamic and changes frequently.
jQuery I've tried:
var imgarray = $(".className").find("img:first").attr('src');
for(i = 0; i < imgarray.length; i++){
$('body').append('<img src=\"'+imgarray[i]+'\">');
}
...
(to try to get the SRC of each image...)
$('.className').each(function() {
alert( $('img').attr('src') );
});
Nothing is working. Thanks for the help (in advance)! BTW, I'm very front-end HTML/CSS and not great at jQuery.
EDIT: Fixed typos (left out quote marks after image SRC's)
EDIT: Thanks so much everyone! Here's how I implemented the checked answer to work for me:
<style type="text/css">
.className {
display: none;
}
</style>
<div class="className">
<p>Yo yo yo</p>
<p><img src="snoop.jpg" /></p>
</div>
<div class="className">
Helloooooo
<img src="biggie.jpg" />
<img src="tupac.jpg" />
<img src="coolio.jpg" />
Blah blah blah
</div>
<div class="className">
<div><img src="dmx.jpg" /></div>
<div><img src="willsmith.jpg" /></div>
</div>
<script type="text/javascript">
$('.className').each(function() {
var imagesrc = $(this).find('img').first().attr('src') ;
$('body').append( '<img src=\"' + imagesrc + '\">');
});
</script>
You have to use .find() along with .first() to accomplish what you want.
Try,
$('.className').each(function() {
alert( $(this).find('img').first().attr('src') );
});
You can use .find() and the :first-selector
$('.className').find('img:first').show()
Demo: Fiddle
Here is a JavaScript solution that will do a linear search on each of the child nodes of the element with the class name className. The one question that needs to be asked is: By default, is each image hidden?
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<script>
var el = document.getElementsByClassName('className');
for(var a = 0; a < el.length; a++) {
for (var i = 0; i < el[a].childNodes.length; i++) {
if(el[a].childNodes[i].tagName == "IMG") {
el[a].childNodes[i].style.display="block";
console.log(el[a].childNodes[i].src);
break;
}
}
}
</script>
Demo: Fiddle
After clarifying your question, I made my answer in three parts.
Firstly, wrap text in hide span
$('.className').contents().filter(function(){
return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="spanhide" style="display: none;" />');
Secondly, hide all images
$('img', '.className').each(function () {
var img = $(this);
console.log("hide->" + img.attr('src'));
img.hide();
});
Third, display first image in each className div
$('img:first', '.className').each(function () {
var img = $(this)
console.log("show->" + img.attr('src'));
img.show();
});
Related
I am looking to use jQuery to view a bunch of <div> elements which all have the same class name, and check to see if the h3 within these <div> elements has any content. I was thinking this would work (as below) but its not... what am I doing wrong?
$('.wrapperDIV').each(function (i) {
if( $(this).closest('h3').val().length == 0 ) {
$(this).addClass('.hideME');
}
});
Markup is:
<div class="wrapperDIV">
<span class="ItemNo">5.</span>
<img src="" title="" alt="">
<h3></h3>
<div class="composer-button">
Read more
</div>
</div>
Try to use get text instead of value
$('.wrapperDIV').each(function (i) {
if( $(this).find('h3').text() === "" ) {
$(this).addClass('.hideME');
}
});
<div class="wrapperDIV">
<span class="ItemNo">5.</span>
<img src="" title="" alt="">
<h3></h3>
<div class="composer-button">Read more</div>
</div>
Try to use .find('h3') instead of .closest('h3').
Also when using .addClass() you dont need to include the dot.
$('.wrapperDIV').each(function (i) {
if( $(this).find('h3').val().empty()) {
$(this).addClass('hideME');
}
});
<div class="wrapperDIV">
<span class="ItemNo">5.</span>
<img src="" title="" alt="">
<h3></h3>
<div class="composer-button">Read more</div>
</div>
This should solve your problem.
For more info, read this
post or the jQuery .addClass() Documentation.
You can achieve this effect using CSS alone, by using the :empty pseudo-class:
.wrapperDIV h3:empty {
display: none;
}
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
You may try this workable code in vanilla JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script>
window.onload = function(){
let div = document.getElementsByClassName('wrapperDIV');
let ch = div[0].children;
for(let i=0;i<ch.length; i++){
if ( ch[i].tagName=='H3' ){
let text = ch[i].textContent;
if (!text) console.log('It\'s h3 without text')
}
}
}
</script>
</head>
<body>
<div class="wrapperDIV">
<span class="ItemNo">5.</span>
<img src="" title="" alt="">
<h3></h3>
<div class="composer-button">
Read more
</div>
</div>
</body>
</html>
In jQuery you may use the code as under:
$(document).ready(function(){
let h3 = $(".wrapperDIV > h3");
if ( !h3.textContent ) console.log('h3 has no text contents');
});
Im curently creating a picture gallery for my project in school. I came across the problem that i don't know how to add a picture description that will only show under the big preview picture and not next to the small pictures at the top. Every small picture will have a different description. I tried some stuff myself but i failed miserably, Im still new to all of this :)
Any solutions to that problem?
<head>
<title>Gallery</title>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body background="cosmic.jpg">
<div class="gallery" align="center">
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png" />
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
</div>
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
or
<div class="smallpics">
<img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
function showInBig(element){
document.getElementById('bigpic').setAttribute('src',element.getAttribute('src'));
document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}
Given that alt of the small images are the descriptions.
The first thing is to clean up your HTML and separate out the JavaScript. This has a number of benefits. It keeps your HTML and JS separate without muddying one with the other.
All of your onclick code can be handled thus:
var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
}, false);
Now, let's consider adding a description. The first question is, how are you going to store these, and in relation to the images?
An obvious solution is to store them in a data attribute on the pictures elements. So just as we read the src from the clicked pic's element, we'll read its description from the same source.
So our elements become:
<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />
Then you're going to need a description placeholder in the big picture area, so add a paragraph.
Finally, change the above JS code to factor in the description also:
var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);
Could be done in 2 ways, first by making use of data- attribute (1)
jsFiddle 1
var pics = document.querySelectorAll('.smallpics img'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src and data-desc attributes to the function.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}
function theClickFunction($th, $src, $desc) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
descP.innerHTML = $desc;
});
}
body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}
<div class="gallery" align="center">
<div class="smallpics">
<img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" />
<img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" />
<img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" />
<img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" />
<img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" />
<img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" />
<img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" />
<img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" />
<img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" />
<img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" />
</div>
<hr>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<p id="description"></p>
</div>
The other way is by using some hidden element, I used <ul> with its lis here but it could be divs or p etc.., while this way adds extra markup to the page it suits better when you have HTML, styled and/or long descriptions rather than just normal text.
jsFiddle 2
var pics = document.querySelectorAll('.smallpics img'),
DescLis = document.querySelectorAll('#hiddenDescs li'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src attribute.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), i);
}
function theClickFunction($th, $src, i) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
// get the inner html of the corresponding li and inject it as innerHTML
// of the descreption p
descP.innerHTML = DescLis[i].innerHTML;
});
}
(1) Using alt attribute, as in #Thuin's answer, rather than data-* is better because: This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
I have the following code
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I want to add <a> before and after the image tag with jQuery. This would be the result:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
Edit: Details from comments
So far, I have tried like this:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
i have add like
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional information from comments
I want to use a different url for each image, like:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
You can do it using the JQuery wrap() function like so:
var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];
$("#slider img").each(function(index, value){
$(this).wrap("<a href='"+arr[index]+"'></a>");
});
Here is the JSFiddle demo
Use .wrap()
Wrap an HTML structure around each element in the set of matched elements.
Here you can store different url in custom attributes which can later be used to wrap element.
$('#slider img').wrap(function() {
return $('<a />', {
"href": $(this).data('url'),
"class" : "myClass"
});
})
.myClass {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img src="images/p1.jpg" data-url='facebook.com' />
<img src="images/p2.jpg" data-url='google.com' />
<img src="images/p3.jpg" data-url='example.com' />
</div>
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.