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

Center text vertically even when its number of lines is unknown

What is the best way to design a large grid layout using HTML5?

Making use of JavaScript's XMLHttpRequest() function allows for seamless

Conceal the overflow from absolutely positioned elements

Modify the value of a variable every 250 milliseconds

What is the reason behind jQuery's .html("abc") only providing temporary insertion?

Discovering a particular string within a jQuery array object: Tips and tricks

Leveraging Javascript to generate universal HTML content for various Javascript files

How can I find the hexadecimal color value from this jQuery plugin?

What is the best way to set breakpoints on Material UI components?

Utilize the DataTables plugin to arrange a column based on icons with hidden boolean values in rows

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

Displaying PHP output within a JavaScript expression

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Creating text input without borders using HTML and CSS

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

Tips for retrieving a collection of nodes using a specific CSS selector in jQuery

developing a dropdown menu feature

The li elements within a 960.gs layout will not extend to fill the entire width of the

Submitting forms with Ajax