Replace given source

Question

I made a plugin with Google Weather API and I am currently pulling the images from Google's API. For a sunny day I'm pulling http://www.google.com//ig/images/weather/sunny.gif.

I am looking for a way so that when ever sunny.gif is pulled, replace with with an image of my choice.

Is that possible with jQuery or other way?

Thanks alot

I might re-tag your question then to be PHP rather than javascript and jQuery.. You'll want to edit that data server-side rather than client-side. — Demian Brecht, Aug 26 '11 at 00:41
This is where I'm pulling off: http://www.google.co.uk/ig/api?weather=london ... You think it better to do it in PHP an set, when img = sunny.gif, show customsunny.gif or something? — jQuerybeast, Aug 26 '11 at 00:46
If you're replacing a string that you've received from a data source server side, then yes. It's always better to do the replace there. Having it in the client side means that you might get a flicker (unless you're handling it) and worst case, you have an unneeded server request. — Demian Brecht, Aug 26 '11 at 00:48

score 10 · Accepted Answer · answered Aug 26 '11 at 00:40

10

$("#my_image").attr("src","http://www.myimagepath.com/image.jpg");

answered Aug 26 '11 at 00:40

Book Of Zeus

49,509
18
174
171

I thought of that sir, but every day has the same class. It's not possible to set each day a different class or ID. – jQuerybeast Aug 26 '11 at 00:41
like you have a 7 day forecast and you want to know images for each day? – Book Of Zeus Aug 26 '11 at 00:45

goatslacker · Answer 2 · 2011-08-26T00:47:01.167

5

Depends on how you're receiving/passing the image, just set it to a variable and check for it. This is the easy/lazy solution to this simple problem, if your problem is more complex you could turn this into a function that checks and replaces sunny, stormy, etc...

if (img === "http://www.google.com//ig/images/weather/sunny.gif") {
  img = "myownimage.gif";
}

PHP/JS anti-pattern:

<?php if ($image === "http://www.google.com//ig/images/weather/sunny.gif"): ?>
  <script type="text/javascript">
    $("#image").attr('src', 'foo.gif');
  </script>
<?php endif; ?>

But honestly if you're receiving the image in PHP, then I'd just manipulate it server-side and display it to the client then rather than have JavaScript do it...

<?php
if ($image === "http://www.google.com//ig/images/weather/sunny.gif") {
  $image = 'foo.gif';
}
?>

<img src="<?php echo $image ?>" alt="my sunny day image" />

edited Aug 26 '11 at 00:47

answered Aug 26 '11 at 00:41

goatslacker

10,032
2
15
15

Something likes is what I was looking for. Can you set a class instead. Like: If ($('.day img') img == "http://www.google.com//ig/images/weather/sunny.gif") {} ??? – jQuerybeast Aug 26 '11 at 00:43
You can set a class if in your css you are setting your image as a background image. – goatslacker Aug 26 '11 at 00:45
Not possible, every day has the same class with different background image. – jQuerybeast Aug 26 '11 at 00:47
that's fine. in JavaScript you can pull the src of an image and just check for sunny/rainy/cloudy/etc... document.getElementById('image').src will give you it's src, then you can just use the function `indexOf` to determine if it's sunny or whatever. – goatslacker Aug 26 '11 at 00:50

score 0 · Answer 3 · answered Aug 26 '11 at 01:40

There is a live document.images collection of all img elements in the document. You can conditionally change the src property of any particular image based on whatever logic you like:

var image, images = document.images;

for (var i=0, iLen=images.length; i<iLen; i++) {
  image = images[i];
  if (image.src == 'whatever') image.src = 'new value';
}

You may want to access the image's parentNode and some of its properties too.

But is seems to me that this is much better done on the server.

Replace given source

3 Answers3