Loading some images after a click in different areas

Question

I'm new to jquery and javascripts but not to programming. I know C and Shell a little bit.

Coming to the point, in my blog I wanted to load some images after user click on a particular button. I googled to get an answer I ended up in the following stackoverflow link.

load an image after clicking a button

I could understand what the script is doing. But can't craft it for my own need.

My need is I have to load 3 different images in 3 distinct places. So, there will be three buttons.

If I click the buttons images are loaded, but If I go for the next button, in all three areas same images is replaced (I know why it's happening but can't prevent it).

How can I craft the script mentioned so that the images are distinct in all areas???

So, crack a tip, I would try to do it on my own.

Thanks in advance.

What have you tried upto now? Can you put your code in http://jsfiddle.net/ — Chamara Keragala, May 06 '14 at 08:26
@deadulya You have given the correct solution what I really need. Just now I have found a solution using w3schools tutorials by defining different classes instead of "this" and "button". But your solution is really cool. One another help, is there anyway to illustrate the loading process of the image? Ex: After clicking the button, until the time taken to load the full image, a sand clock rotates... — vicke4, May 06 '14 at 12:11

score 1 · Accepted Answer · answered May 06 '14 at 12:11

1

And for better future search the answer:

HTML:

<button data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png">Click!</button>
<div id="area1"></div>
<button data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg">Click!</button>
<div id="area2"></div>
<button data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg">Click!</button>
<div id="area3"></div>

JS:

$(document).ready(function(){
  $("button").click(function(){
    var imgUrl = $(this).data('rel');
    $(this).next().html("<img src='" + imgUrl + "' alt='description' />");
  });
});

FIDDLE

answered May 06 '14 at 12:11

deadulya

686
6
15

Did you notice my previous comment?? Is there any way to illustrate the loading process?? – vicke4 May 06 '14 at 12:16
Yes, thats problem already solved check that: http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading – deadulya May 06 '14 at 12:18
Thanks for the link I'll try to do it myself. If I can't I'll ask for your help...:) Any problem??? – vicke4 May 06 '14 at 12:21
feel free to ask any =) in our example it will something like that http://jsfiddle.net/GAt6N/ – deadulya May 06 '14 at 12:23
You are just awesome. You have saved my time...:) Last and final question is there any variety in showing the loading process....?? – vicke4 May 06 '14 at 12:31
Now, I understand you have already added an img in the html. I didn't note it...Thanks for the help..... – vicke4 May 06 '14 at 12:41
yes, in the begin you need to load your gif, then before changing src for img - show GIF, and after load image - hide gif – deadulya May 06 '14 at 13:28
I need to load the images which will be located in some distance. So, I need to load the loading.gif in the appropriate area before the image fully loads. How to do it? Once again sorry for disturbing you.... – vicke4 May 07 '14 at 14:28
Hi, for this you can move the "loading" gif. like this http://jsfiddle.net/wHKt7/ – deadulya May 08 '14 at 04:41

Loading some images after a click in different areas

1 Answers1