0

I'm trying to make a simple gallery with 4 images.
I wrote a pice of code but the result is always undefined.
What I want is to show by default the first picture in div with class little

This is HTML code : 

<img class="imageToShow" />
<div class="little">
    <img class="imageNotToShow" src="../Images/gallery1.jpg" />
    <img class="imageNotToShow" src="../Images/gallery2.jpg" />
    <img class="imageNotToShow" src="../Images/gallery3.jpg" />
    <img class="imageNotToShow" src="../Images/gallery4.jpg" />
</div>

This is the js code : 

var firstImageSrc;
firstImageSrc = $('.imageNotToShow').first().attr("src");
alert(firstImageSRC);
$('.ImageToShow').attr("src", firstImageSrc);
lloiacono
  • 4,714
  • 2
  • 30
  • 46
Karam Haj
  • 1,080
  • 2
  • 9
  • 20
  • Try with Id for the image. Class will call all images. – Tammy Feb 08 '18 at 12:38
  • @TanmoySarkar That's why there's `first()`... as the name suggests, it grabs the first element from the array. – Adrian Feb 08 '18 at 12:39
  • Is the code wrapped in `ready`? What do you get in ``? – Tushar Feb 08 '18 at 12:41
  • 1
    We need more context. If this code is in a script tag at the **end** of the HTML, just before the closing `

    ` tag (e.g., where it should be), it should work fine. (You'll also get people telling you to put it in a `ready` callback, but that's unnecessary if the script tag is in the right place.)

     – T.J. Crowder Feb 08 '18 at 12:43
  • 1
    Almost certainly a duplicate of [*Why does jQuery or a DOM method such as getElementById not find the element?*](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – T.J. Crowder Feb 08 '18 at 12:44
  • Your alert is undefined because you use `firstImageSRC` instead of `firstImageSrc`, your image isn't updated as you use `.ImageToShow` instead of `.imageToShow` - watch your cases, js is case sensitive when it comes to variables names and class selectors – Pete Feb 08 '18 at 12:50
  • @T.J.Crowder Thanks brother, I just change the just before the closing

    and it works fine for me thank you again

     – Karam Haj Feb 08 '18 at 13:53
  • If you want to lazy load the images (currently they're all loaded at once), you could use HTML like `` then use `$(".imageNotToShow").first().data("src");` to get the 1st URL – DJDaveMark Mar 05 '18 at 15:20

2 Answers2

1

Jquery selectors are case sensitive so correct your class selector ImageToShow to imageToShow...

var firstImageSrc = $('.imageNotToShow').first().attr("src");
$('.imageToShow').attr("src", firstImageSrc);
.imageNotToShow{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="imageToShow" />
<div class="little">
    <img class="imageNotToShow" src="http://via.placeholder.com/350x151" />
    <img class="imageNotToShow" src="http://via.placeholder.com/350x152" />
    <img class="imageNotToShow" src="http://via.placeholder.com/350x153" />
    <img class="imageNotToShow" src="http://via.placeholder.com/350x154" />
</div>
Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
  • i changed the selector after i posted the question, $('.imageNotToShow').first().attr("src") = 'undefined' – Karam Haj Feb 08 '18 at 13:38
0

$('.ImageToShow').attr("src", firstImageSrc);

Your CSS selector in jQuery code is not matching. Change ImageToShow to imageToShow and things will work fine.

Nikhil Vartak
  • 5,002
  • 3
  • 26
  • 32