3 Replies Latest reply on Nov 10, 2016 10:56 AM by Moshe.assulin

    symbols

    Moshe.assulin Level 1

      Hi

       

      I have a symbol that contains a picture, I duplicated the symbol several times. Now I want to replace the image with another, so that each symbol will contain a different picture, there is a way to get there?

       

      TIA

        • 1. Re: symbols
          joel_pau Level 5

          Hi,

           

          I assume you drag and drop your symbol from library to stage.

          You can use code or open your symbol and change your picture.

          Using code, there are 2 cases. Your picture is within a div tag or an img tag.

          So you open the creationComplete panel or the compositionReady panel.

          codePanelUI.png

           

          1) div tag:

          sym.getSymbol("symbolName").$("imageContainer")

          .css({"background-image": "url(images/imageName.jpg)", "background-repeat": "no-repeat", "background-size": "100% 100%" });

           

          2) img tag:

          sym.getSymbol("symbolName").$("imageContainer").attr("src", "images/imageName.jpg");

           

          You have to target each symbol. I assume you named your symbols: "picture1", "picture2"...

          It will be:

          sym.getSymbol("picture1").$("imageContainer")...

          sym.getSymbol("picture2").$("imageContainer")...

          • 2. Re: symbols
            joel_pau Level 5

            Here are demo files:

             

            div tag symbols.zip - Box

             

            img tag symbols.zip - Box

             

            About the css property (case #1). A shorthand can be used:

            sym.getSymbol("symbolName").$("imageContainer")

            .css( "background", "#ffffff url(images/imageName.jpg) no-repeat center / contain" );

            See: CSS background property

            • 3. Re: symbols
              Moshe.assulin Level 1

              Thank You.