Changing Image to url

[Mike4997955]

I need to change the image on a screen, and load it from the web. On load i used the following javascript:
$('#CrystalImage').css('src', 'url("http://mobilepublications.net/Healing...")');

I checked the debugger, and the class is correct. But the image isn't changing. I've tried many different things with no luck

Any suggestions?

[Kateryna Grynko]

Hello.
To change src on the picture use following JavaScript:
code$('#CrystalImage').prop('src','http://mobilepublications.net/HealingCrystals/Images/Amethyst.jpg');
/code

[Mike4997955]

I'm still not able to get the image. I've tried a few things and none worked. If you help me get can get one of these to work, that would be great:

1. Using the builder i set a local storage variable with the http address, and then set the property of the image asset.

2. Javascript: $('#CrystalImage1').prop('src','http://mobilepublications.net/Healing...');

3. Javascript: $('img[dsid="CrystalImage"]').css('src','http://mobilepublications.net/Healing...');

[maxkatz]

The syntax seems correct but you need to make sure $('#CrystalImage1') returns the image. Launch the app in Chrome without the mobile frame and open Chrome Dev. Tools console.

[Mike4997955]

That is the problem, $('#CrystalImage1') is not returning the image.

This is the html i find in chrom dev:

http://project.tiggzi.com/views/8d54594 ... -image.jpg" rel="nofollow"http://project.tiggzi.com/views/8d545.../a" id="j_38" dsid="CrystalImage" name="CrystalImage" style="border-top-left-radius: 10%; border-top-right-radius: 10%; border-bottom-right-radius: 10%; border-bottom-left-radius: 10%; width: 100%; height: auto; display: block;""

It's not excepting the new image on page load, and I've tried a few different methods.

I just need to do this the easiest way. So i switched to using the tiggzi builder. Using the builder i set a local storage variable with the http address, and then set the property of the image asset, to that variable. It didn't work either, but this is what i got:

div data-role="page" style="min-height:480px;" dsid="CrystalPage" id="j_32" src=""http://mobilepublications.net/Healing...;"
class="type-interior" data-theme='e' data-add-back-btn="true" data-back-btn-text="Back"

and this remained the same:

http://project.tiggzi.com/views/8d54594 ... -image.jpg" rel="nofollow"http://project.tiggzi.com/views/8d545.../a" id="j_38" dsid="CrystalImage" name="CrystalImage" style="border-top-left-radius: 10%; border-top-right-radius: 10%; border-bottom-right-radius: 10%; border-bottom-left-radius: 10%; width: 100%; height: auto; display: block;"

Not sure why the image ended up on the page. But it also added an extra quote for some reason. there aren't any quotes on the original storage variable. Any thoughts on how to fix this?

[maxkatz]

$('#CrystalImage1') doesn't work because it looks up the component by id and the id is different, it is id=j_38:

code
...
src="http://project.tiggzi.com/views/8d545..." id="j_38" dsid="CrystalImage"
...
/code

You could try to get the component by its class, or dsid, use Tiggzi(..) function: http://docs.tiggzi.com/javascript-api/

[Mike4997955]

I thought I was it looking up by class.

I changed it to this, and it works fine:

$('img[dsid="CrystalImage"]').attr('src','http://mobilepublications.net/Healing...');

Thanks Max!!