CODEWITHSUNDEEP
jqueryhtmlfunctiononclickclick
Eiliv
Eiliv

Reputation: 13

changing img src of another div with jquery?

I have a trouble changing the src of my image with jquery :

I have my div projectName with all the buttons which will be clicked on for changing the images. Those images will be contained in another div called projectImg.

But when I click on my buttons, nothing is happening. Someone know if there is a way to make my jquery work??

EDIT : Found the error ! I only needed to put a type="button" into my html buttons. Thanks for the help though !

$(document).ready(function(){
	$('.sliding').click(function(){
   		var url_img = $(this).attr('id');
   		$('#projImg img').attr('src',url_img)
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="galerie" class="galerie-section content-section">
      <div class="container">
        <div class="row">
        
          <div class="container-fluid projectName text-center col-sm-6" id="projName">
              <button id="img/img1.jpg" class="sliding" type="button">img1</button>
              <button id="img/img2.jpg" class="sliding" type="button">img2</button>
              <button id="img/img3.jpg" class="sliding" type="button">img3</button>  
          </div>
          
          <div class="container-fluid projectImg col-sm-6" id="projImg">  
            <img src="img/img1.jpg" class="img-fluid img-galerie">
          </div> 
        </div>
      </div>
    </section>

Upvotes: 1

Views: 294

Answers (2)

Sylwek
Sylwek

Reputation: 866

You have wrong selector - your selector is to div, not to img. This should be $('#projImage img').attr('src',url_img)

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122026

Multiple errors.

1) Ready function won't accept your direct function should be wrapped by function(){}

2) Your div directly do not have an src attribute. You have to find the image inside that and set.

3) Your id to the target div is wrong. Corrected.

$(document).ready(function(){
	$('.sliding').click(function(){
  debugger;
   		var url_img = $(this).attr('id');
   		$('#projImg').find("img").attr('src',url_img)
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="galerie" class="galerie-section content-section">
      <div class="container">
        <div class="row">
        
          <div class="container-fluid projectName text-center col-sm-6" id="projName">
              <button id="img1" class="sliding">img1</button>
              <button id="img2" class="sliding">img2</button>
              <button id="img3" class="sliding">img3</button>  
          </div>
          
          <div class="container-fluid projectImg col-sm-6" id="projImg">  test
            <img src="img/img1.jpg" class="img-fluid img-galerie">
          </div>
          
        </div>
      </div>
    </section>

Upvotes: 1

Related Questions