jQuery function parameters to set SRC for image

Question

How can I set SRC from parameters for large number of images?

I have 5 links like

<span onclick="showim('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg');">Show Image 1</span>
<span onclick="showim('img2.jpg');">Show Image 2</span>
<span onclick="showim('img3.jpg');">Show Image 3</span>
<span onclick="showim('img4.jpg');">Show Image 4</span>
<span onclick="showim('img5.jpg');">Show Image 5</span>

Only one image placeholder

<img src="" id="implace" width="100" />

And, JS code like this

$(document).ready(function () {
     $(function showim(imid) {
         var src = $("implace").attr("src").match(/[^\.]+/) + imid;
         $("#implace").attr("src", src);
     });
});

How can I make this code work? Can't understand why it's not working. Thanks

JSFiddle link: http://jsfiddle.net/yessx/

Instead of changing the src, why not hide/show images? Then you won't have to wait to load the images. — ShadowCat7
– ShadowCat7, Commented Jan 27, 2014 at 22:05
@zaquest - Thanks, but still not working, please check the jsfiddle link. thanks — Karthik Malla
– Karthik Malla, Commented Jan 27, 2014 at 22:10

Jorge Eduardo · Accepted Answer · 2014-01-27 22:18:37Z

3

Put a class for each span, and add the attribute data:

    <span class="spanClick" data-image="http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg">Show Image 1</span>
    <span class="spanClick" data-image="img2.jpg">Show Image 2</span>
    <span class="spanClick" data-image="img3.jpg">Show Image 3</span>
    <span class="spanClick" data-image="img4.jpg">Show Image 4</span>
    <span class="spanClick" data-image="img5.jpg">Show Image 5</span>

in your js:

$(document).ready(function(){
  $(".spanClick").bind("click",function(){
      var src = $(this).data("image");

      $("#implace").attr("src",src);
  });
});

When you invoke your jquery file dont forget call the jquery-migrate file, cause the function "bind" dont work in all jquery versions

answered Jan 27, 2014 at 22:18

Jorge Eduardo

1415 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brooklyn Nicholson · Accepted Answer · 2014-01-28 00:15:35Z

1

Take it from here: http://jsfiddle.net/52dY7/

Need to make the function global, and also make sure to use # to select IDs.

Sample JS:

$(document).ready(function () {
    window.showim = function(src) {
        $("#imgLoader").attr("src", src);
    };
});

If you want to queue it until the image itself is loaded, check here for a quick example: http://jsfiddle.net/52dY7/3/

$(document).ready(function () {
    var $loader = $('#imgLoader');

    window.showim = function(src) {
        var $im = $('<img/>');
        $im.attr('src', src);

        $loader.addClass('loading');
        $im.one('load', function() {
            $loader.removeClass('loading').attr('src', src);
        });
    };
});

edited Jan 28, 2014 at 0:15

answered Jan 27, 2014 at 22:09

Brooklyn Nicholson

64610 silver badges25 bronze badges

4 Comments

jfriend00 Over a year ago

There is no need to put the showim function inside document.ready() at all. In fact, document.ready() isn't needed in this problem. Just define the showim function in the global scope.

Karthik Malla Over a year ago

Thanks, simple and effective code. Another thanks for the jsfiddle. :)

Karthik Malla Over a year ago

Can you please give tell how to load Ajax Loader image while the actual image is loading? Because actual images are high quality images and talking a while to load, in the meanwhile I want to display ajax loader gif image to make people understand they need to wait. Thanks

Brooklyn Nicholson Over a year ago

Added - jsfiddle.net/52dY7/3 for a quick example. Just use the .one('load') function on "fake" image.

Mike · Accepted Answer · 2014-01-27 22:17:12Z

1

You'd be better off preloading the images into hidden img containers, then showing them when the user clicks on the span.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

function showim(imid) {
//where imid is now the array index
$("#implace").append(arrayOfImages[imid]);
}

edited Jan 27, 2014 at 22:17

answered Jan 27, 2014 at 22:08

Mike

8941 gold badge8 silver badges15 bronze badges

7 Comments

Karthik Malla Over a year ago

True, but worrying need to change in many areas to add more number of images in the later stage. As of now, we have more than 50 to display.

Mike Over a year ago

You can code this generically and have it recursively load images... I don't see an issue.

Mike Over a year ago

I am using $.each() if you look closely, i'm passing in an ARRAY of strings (image hrefs).

Brooklyn Nicholson Over a year ago

Good solution for preloading, but it doesn't directly answer the OP?

Karthik Malla Over a year ago

+1 for the code, but yeah seems bit confusion as I am not good at arrays :p

|

Collectives™ on Stack Overflow

jQuery function parameters to set SRC for image

3 Answers 3

Comments

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related