Changing img src in a nav page by clicking on home page

Question

I'm pretty new to JS, jQuery and all the others.

I have a navigation bar for an app with in the top a picture that needs to change when I click on a picture/link on my homepage.

HTML for navigation that will need to change

       <img class="campus" src="img/Dansaertrond.png">
       <h4>Stuvo <span class="light">EhB</br>
       Campus</span></h4>

HTML for the homepage where the pictures come from to change

      <div class="campus">
        <a href="#">
        <img class="photo" src="img/Dansaert.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/kaai.png">
        </a>
        <a href="#">
        <img class="photo" src="img/ttk.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/RITS.png">
        </a>
        <a href="#">
        <img class="photo" src="img/KCB.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/jette.png">
        </a>
      </div>

To explain fast - if you start the app you see your homepage with all pictures, you click one and that picture then appears in the navigation screen, same if you change it again.

The normal things you find to change img src aren't the things I need cause that mostly just changes the picture by clicking on it, which I do not need to.

Does anyone has any idea how to do this / if it's possible?

possible duplicate of [Set image src to another image jquery](http://stackoverflow.com/questions/22794641/set-image-src-to-another-image-jquery) — Andrejs Cainikovs, May 21 '15 at 08:23
@AndrejsCainikovs, I don't want another div to pop up, I already have everything there, just the image from the navigation bar should change when clicked on an image in the homepage — Appa, May 21 '15 at 08:27

connexo · Answer 1 · 2015-05-21T08:42:50.047

$(document).ready(function() {
  $('div.campus img').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.campus').attr('src', newSrc);
  });                       
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="campus">
  <img src="http://www.adweek.com/socialtimes/files/2012/03/The-Reply-Girl.jpg" />
  <img src="http://3.bp.blogspot.com/-e3s1wReW3d4/TgYzS8hG1CI/AAAAAAAAABM/NzRYQFTWWbM/s200/kim-kardashian-troy-jensen-nice.jpg" />
  <img src="http://slodive.com/wp-content/uploads/2012/10/gossip-girl-hairstyles/gossipgirlhairstyles200.jpg" />
</div>
<hr />
<img class="campus" src="http://lorempixel.com/200/200" />

Make sure the image on which you want the click trigger has the class .trigger, and the image where you want to change the src has the class .target. Or replace those classes by class name you currently use.

$('img.trigger').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.target').attr('src', newSrc);
};

Edit: I'll adjust the solution to your code:

$('div.campus img').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.campus').attr('src', newSrc);
};

You will probably want to initialize the event handlers when the page has loaded. The common way to achieve this in jQuery is using $(document).ready():

$(document).ready(function() {
    $('div.campus img').on('click', function() {
        var newSrc = $(this).attr('src');
        $('img.campus').attr('src', newSrc);
    };
});

Fully working example: http://codepen.io/anon/pen/oXzZBB

score 0 · Answer 2 · answered May 21 '15 at 08:32

0

Instead of getting image after click you can play the image as carousel.

Try this: Bootstrap Carousel

answered May 21 '15 at 08:32

Dimple

453
9
22

score 0 · Accepted Answer · edited May 23 '17 at 11:51

First, it would be easier to answer if you included some better information about your challenge, maybe some code snippets. Would this answer your question?

Changing the image source using jQuery

Otherwise,

I think what you have can be modelled by three elements. You click on one of the homepage elements and it changes the image source on the nav bar element.

$('#red').click(function() {
  $('#nav-img').attr("src","red.png").removeClass('green').addClass('red');
});
                  
$('#green').click(function() {
  $('#nav-img').attr("src","green.png").removeClass('red').addClass('green');
});

#red, .red {
  background-color: red;
  height: 20px;
  width: 20px;
}

#green, .green {
  background-color: green;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-bar">
  <img src="red.png" id="nav-img" class="red">
</div>
<div class="home-content">
  <img src="red.png" id="red">
  <img src="green.png" id="green">
</div>

Changing img src in a nav page by clicking on home page

3 Answers3