2 Replies Latest reply on Sep 15, 2014 8:24 AM by wertyuifg

    How to include an external jQuery together with the HTML code in my Edge composition?

    wertyuifg

      Hi! I'm trying to include an external jQuery (cube caousel) script into my Adobe Edge composition. I think I know how to call the jQuery files by yepnope but I'm unsure how to "translate/convert" the HTML parts on the sample page into my Edge composition. The sample page is pretty straight forward (please find the code below). I want to build up the same application but within my Edge composition i.e.affect the images in the comp in the very same 3D manner. Could you please give me a hint how to make the jQuery script affect my images within the comp instead of having them outside Edge as HTML code on the HTML-page.

       

      Here is the code on sample page;

      ------------------------------------------------------------------------

      <!DOCTYPE html>

      <html class="no-js" lang="en">

      <head>

        <meta content="charset=utf-8">

        <title>ImpulseSlider Demo</title>

        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

        <link rel="stylesheet" href="css/impulseslider.css" type="text/css" media="screen" />

      </head>

      <body>

       

      <div id="cubeCarousel">

          <div id="cubeSpinner">

              <div class="face one">

                   <img class="img_slider active" src="img/black.jpg">

              </div>

              <div class="face two">

                  <img class="img_slider" src="img/blue.jpg">

              </div>

              <div class="face three">

                  <img class="img_slider" src="img/purple.jpg">

              </div>

              <div class="face four">

                  <img class="img_slider" src="img/red.jpg">

              </div>

          </div>

              <div class="nav">

                  <div class="left arrow"></div>

                  <div class="right arrow"></div>

              </div>

      </div>

       

      <script src="../jquery-1.8.2.min.js"></script>

      <script src="../jquery.impulse.slider-0.3.js"></script>

      <script type="text/javascript">

          $(window).load(function(){

            $('#cubeSpinner').impulseslider({

                  height: 400,

                  width: 400,

                depth:200,

                perspective:800

            });

          });

        </script>

       

      </body>

      </html>

       

      -----------------------------------------

       

      Very much appriciate if I could have your advice. Best regards,

      Bengt Melin

        • 2. Re: How to include an external jQuery together with the HTML code in my Edge composition?
          wertyuifg Level 1

          Thank you so much for the fast reply Preran. But for me the tricky part is to implement the html code from the sample page into actions within Edge and to those images I want to be affected.

           

          The html-code on the sample file is;

           

          <div id="cubeCarousel">

              <div id="cubeSpinner">

                  <div class="face one">

                       <img class="img_slider active" src="img/black.jpg">

                  </div>

                  <div class="face two">

                      <img class="img_slider" src="img/blue.jpg">

                  </div>

                  <div class="face three">

                      <img class="img_slider" src="img/purple.jpg">

                  </div>

                  <div class="face four">

                      <img class="img_slider" src="img/red.jpg">

                  </div>

              </div>

                  <div class="nav">

                      <div class="left arrow"></div>

                      <div class="right arrow"></div>

                  </div>

          </div>

           

          What I don't understand is how write this code in Adobe Edge so the jQuery scripts connect to images in my Edge composition.

           

          Is there any guidelines for the syntax and how I should write these lines in Edge, or any tutorial that show this? Or do you have anu code example that I can use as "dummy"?

          BR

          /Bengt