Switching the image by clicking on the link

Question

Switching the image by clicking on the link

Looking for assistance with a code that displays three button images and fades in the relevant div when clicked using jQuery...

http://jsfiddle.net/ttj9J/11/

HTML

<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/RxSLu4i.png"></a>
<a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/U8Jw3U6.png"></a>


<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
</div>

CSS

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JQUERY

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');

});

$( document ).ready(function() {
    $(".link")[0].click(); 
});

Want to change button images to these when clicked:

http://i.imgur.com/vi1KLp9.png
http://i.imgur.com/syroxDR.png
http://i.imgur.com/l91OpLL.png

Can anyone provide guidance on this?

jquery html css

Answer 1

Answer №1

One effective strategy is to keep all display code within CSS and structure your HTML for more intuitive functionality. This means that by looking at the HTML code alone, you can easily see if a button has been pressed by checking if the 'Down' class has been added to it.

CSS:

        .redButton > div
        {
            background-image: url('http://i.imgur.com/u1SbuRE.png');
        }
        .redButton.Down > div
        {
            background-image: url('http://i.imgur.com/vi1KLp9.png');
        }
        .link > div
        {
            width: 88px;
            height: 88px;
            display:inline-block;
        }

JavaScript:

 $(".link").click(function(e) {
             e.preventDefault();

             var mainButton = $(e.target).parent();

             $('.link').not(mainButton).removeClass('Down');  

             mainButton.toggleClass('Down');
             $('.content-container div').fadeOut('slow');    
             $('#' + $(this).data('rel')).fadeIn('slow');        
             });

HTML:

 <a class="link redButton" href="#" data-rel="content1">
        <div></div>
        </a>
    <div class="content-container">
        <div id="content1">This is the test content for part 1</div>
    </div>

Avoid the need to manage an image array in JavaScript (yuck). By utilizing each layer of the HTML stack correctly, you maintain cleaner code and improved functionality.

Check out the jsFiddle Hot Demo for a live example.

Answer 2

One effective strategy is to keep all display code within CSS and structure your HTML for more intuitive functionality. This means that by looking at the HTML code alone, you can easily see if a button has been pressed by checking if the 'Down' class has been added to it.

CSS:

        .redButton > div
        {
            background-image: url('http://i.imgur.com/u1SbuRE.png');
        }
        .redButton.Down > div
        {
            background-image: url('http://i.imgur.com/vi1KLp9.png');
        }
        .link > div
        {
            width: 88px;
            height: 88px;
            display:inline-block;
        }

JavaScript:

 $(".link").click(function(e) {
             e.preventDefault();

             var mainButton = $(e.target).parent();

             $('.link').not(mainButton).removeClass('Down');  

             mainButton.toggleClass('Down');
             $('.content-container div').fadeOut('slow');    
             $('#' + $(this).data('rel')).fadeIn('slow');        
             });

HTML:

 <a class="link redButton" href="#" data-rel="content1">
        <div></div>
        </a>
    <div class="content-container">
        <div id="content1">This is the test content for part 1</div>
    </div>

Avoid the need to manage an image array in JavaScript (yuck). By utilizing each layer of the HTML stack correctly, you maintain cleaner code and improved functionality.

Check out the jsFiddle Hot Demo for a live example.

Answer 3

Answer №2

Give this a try:

var imageCollection = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
];

$(".link").click(function(e) {
      e.preventDefault();
      // Update the image source.
      $(this).find('img').prop('src', imageCollection[$(this).index()]);

      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
});

View JSFiddle Demo

Additional Information #2:

If you want to revert other images when clicking on one, save the default image sources initially:

var imageCollection = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
], defaultImages = [];

$('.link').find('img').each(function(){
    defaultImages.push($(this).prop('src'));
});

$(".link").click(function(e) {
    e.preventDefault();
    
    $(".link").find('img').each(function(i) {
        $(this).prop('src', defaultImages[i]);
    });

    $(this).find('img').prop('src', imageCollection[$(this).index()]);

    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

View Updated JSFiddle Demo

Further Update #3:

If using imageCollection to store new src attributes seems too complex, you can utilize data-* attributes for storing the src, like:

data-newsrc="path/to/new/src"

. Then access it easily with $(selector).data('newsrc');

$(this).find('img').prop('src', $(this).find('img').data('newsrc'));

View Third JSFiddle Demo

Answer 4

Give this a try:

var imageCollection = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
];

$(".link").click(function(e) {
      e.preventDefault();
      // Update the image source.
      $(this).find('img').prop('src', imageCollection[$(this).index()]);

      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
});

View JSFiddle Demo

Additional Information #2:

If you want to revert other images when clicking on one, save the default image sources initially:

var imageCollection = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
], defaultImages = [];

$('.link').find('img').each(function(){
    defaultImages.push($(this).prop('src'));
});

$(".link").click(function(e) {
    e.preventDefault();
    
    $(".link").find('img').each(function(i) {
        $(this).prop('src', defaultImages[i]);
    });

    $(this).find('img').prop('src', imageCollection[$(this).index()]);

    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

View Updated JSFiddle Demo

Further Update #3:

If using imageCollection to store new src attributes seems too complex, you can utilize data-* attributes for storing the src, like:

data-newsrc="path/to/new/src"

. Then access it easily with $(selector).data('newsrc');

$(this).find('img').prop('src', $(this).find('img').data('newsrc'));

View Third JSFiddle Demo

Answer 5

Answer №3

Click here for the code on JSFiddle

JavaScript:

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');

      //retrieve src for the new img
      var new_img_src = $(this).data('newimg');
      var current_img = jQuery("img", this);

      //swap data-newimg src with current src
      $(this).data('newimg', current_img.attr("src"));    
      current_img.attr("src",new_img_src);

      $('#' + $(this).data('rel')).fadeIn('slow');     
});

HTML:

<a class="link" href="#" data-rel="content1" data-newimg="http://i.imgur.com/vi1KLp9.png">
    <img src="http://i.imgur.com/u1SbuRE.png">
</a>
<a class="link" href="#" data-rel="content2" data-newimg="http://i.imgur.com/syroxDR.png">
    <img src="http://i.imgur.com/RxSLu4i.png">
</a>
<a class="link" href="#" data-rel="content3" data-newimg="http://i.imgur.com/l91OpLL.png">
    <img src="http://i.imgur.com/U8Jw3U6.png">
</a>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
</div>

Answer 6

Click here for the code on JSFiddle

JavaScript:

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');

      //retrieve src for the new img
      var new_img_src = $(this).data('newimg');
      var current_img = jQuery("img", this);

      //swap data-newimg src with current src
      $(this).data('newimg', current_img.attr("src"));    
      current_img.attr("src",new_img_src);

      $('#' + $(this).data('rel')).fadeIn('slow');     
});

HTML:

<a class="link" href="#" data-rel="content1" data-newimg="http://i.imgur.com/vi1KLp9.png">
    <img src="http://i.imgur.com/u1SbuRE.png">
</a>
<a class="link" href="#" data-rel="content2" data-newimg="http://i.imgur.com/syroxDR.png">
    <img src="http://i.imgur.com/RxSLu4i.png">
</a>
<a class="link" href="#" data-rel="content3" data-newimg="http://i.imgur.com/l91OpLL.png">
    <img src="http://i.imgur.com/U8Jw3U6.png">
</a>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
</div>

Switching the image by clicking on the link

Answer №1

Answer №2

Further Update #3:

Answer №3

Similar questions

Learning how to invoke a JavaScript function from a Ruby on Rails layout

Why is the Bootstrap tooltip flickering and not closing on mouseout? And why are duplicate entries not being triggered?

Receiving an error when triggering an onclick event for a checkbox in TypeScript

Using jQuery and AJAX to fetch the return value of a PHP class method

How can I create my own unique scrolling behavior in JavaScript?

Does Javascript support annotation? If not, what is the best way to easily switch between debug and productive modes in a declarative manner?

Issue with Jquery ajax functionality

Having trouble with button styling, unsure how to fix it

Having trouble getting the form to submit with jQuery's submitHandler

Combining two CSS classes to create an "alias"

Secondary navigation bar remains hidden

Angular application not displaying refreshed data after fetching information from the server

Tips for concealing a div using an article until it is activated by hovering over it

Utilize JavaScript/jQuery to implement a prompt for saving downloaded files

What could be causing my ASP.Net MVC script bundles to load on every page view?

Is it simple to customize the color of the close button in Bootstrap 5?

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

Using PHP and JQuery to send two variables via the post method

Creating a customizable date format feature in Spring MVC and jQuery

Pass a data variable to an HTML file using express's sendfile function (quick inquiry)