CODEWITHSUNDEEP
jquery
user900360
user900360

Reputation:

How can I make this 'click-gallery' jQuery code better?

Following is crude way that I could think of to implement a click-gallery. I know there are better ways to do so that doesn't require binding click with every button.

What I am looking for: Anyway through which I can guess which button (span in this case) was clicked. And bind it automatically.

Thanks. Here's code:

    <script type="text/javascript">
    $(document).ready(function () {

        $('#gallery-button-1').click(function () {
            $('#Image').css("background-image", "url(Content/images/koala.png)");
        });
        $('#gallery-button-2').click(function () {
            $('#Image').css("background-image", "url(Content/images/lighthouse.png)");
        });
        $('#gallery-button-3').click(function () {
            $('#Image').css("background-image", "url(Content/images/penguins.png)");
        });
        $('#gallery-button-4').click(function () {
            $('#Image').css("background-image", "url(Content/images/tulips.png)");
        });
        $('#gallery-button-5').click(function () {
            $('#Image').css("background-image", "url(Content/images/5.png)");
        });
        $('#gallery-button-6').click(function () {
            $('#Image').css("background-image", "url(Content/images/6.png)");
        });
        $('#gallery-button-7').click(function () {
            $('#Image').css("background-image", "url(Content/images/7.png)");
        });
        $('#gallery-button-8').click(function () {
            $('#Image').css("background-image", "url(Content/images/8.png)");
        });
    });
</script>

<div id="Gallery">

    <div id="ButtonBox">
        <span id="gallery-button-1">1</span>
        <span id="gallery-button-2">2</span>
        <span id="gallery-button-3">3</span>
        <span id="gallery-button-4">4</span>
        <span id="gallery-button-5">5</span>
        <span id="gallery-button-6">6</span>
        <span id="gallery-button-7">7</span>
        <span id="gallery-button-8">8</span>
    </div>
    <div id="Image"></div>

</div>

Upvotes: 0

Views: 85

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34416

Something like this - 

$('span[id^="gallery-button"]').click(function() {
    var currentID = $(this).attr('id');
    var buttonNum = currentID.substring(currentID.length - 1);
    var imgURL = 'Content/images/' + buttonNum + '.png';
    $('#Image').css("background-image", "url(" + imgURL + ")");
});

Of course this only works with numbered images. To get other images you need to find a way to include that in your markup as suggested with the data property above.

Upvotes: 1

Blender
Blender

Reputation: 298196

You can use HTML5 data attributes to simplify this greatly:

$(function() {
  $('#ButtonBox span').on('click', function() {
    $('#Image').css('background-image', 'url(' + $(this).data('image') + ')');
  });
});

And your modified HTML:

<span id="gallery-button-1" data-image="Content/images/koala.png">1</span>
...

A more compact solution with an array:

$(function() {
  var images = [
    'Content/images/koala.png',
    ...
  ];

  $.each(images, function(index, value) {
    $('<span />').text(index + 1).appendTo('#ButtonBox');
  });

  $('#ButtonBox').on('span', 'click', function() {
    $('#Image').css('background-image', 'url(' + images[$(this).index()] + ')');
  });
});

Now you can remove all the <span> elements.

Upvotes: 2

Related Questions