3 Replies Latest reply on Jul 4, 2014 12:16 AM by hemanthR

    Dynamic image swap, possible to have multiple URLs

    somnamblst Level 1

      I have a slideshow that swaps images by adding and subtracting by image name on the previous and next click events. Is there anyway to assign 6 different URLS based on the image names to the object mainImage?

       

      var numOfPhotos = 6;

      var pic = sym.$("mainImage");

      var textCount = sym.$("tbCount");

       

       

      var imageSource = pic.attr('src');

      var imageCount = +(imageSource.slice(13,15));

      imageCount = imageCount+1;

      if (imageCount>numOfPhotos) {imageCount = 1};

      var newCount = imageCount + ' of '+numOfPhotos;

      if (imageCount<10) {imageCount = '0'+imageCount};

      imageSource = 'images/photo-'+imageCount + '.jpg';

      pic.attr('src',imageSource);

      textCount.html(newCount);

      window.trackEvent('prev');

       

      This image swap is from Edge Animate the Missing Manual Chaper 9

       

      http://dl.e-book-free.com/2013/07/adobe_edge_animate_preview_7_the_missing_manual.pdf

       

      how does Photo Show keep track of the currently displayed photo? It steals that bit of information from the JPEG filename. Remember each photo is named something like photo-03.jpg or photo-05.jpg. The first task is to get the entire photo name:

      var imageSource = pic.attr('src');

       

      The new pic variable is used to identify the mainImage. Then, its src attribute is stored in another new variable imageSource. That stores an entire path and filename like images/photo-03.jpg in imageSource as a string. The next line of code slices the number out of the filename.

       

      var imageCount = +(imageSource.slice(13,15));

       

      The value is stored in yet another variable, imageCount

        • 1. Re: Dynamic image swap, possible to have multiple URLs
          hemanthR Adobe Employee

          From what i have understood from your comment above ,

          If the image URL's are completely different you can store them in a array and assign them as image source based on the user action.Store the index of the currently displayed image url index in a variable.

          1 person found this helpful
          • 2. Re: Dynamic image swap, possible to have multiple URLs
            somnamblst Level 1

            Thanks Hermanth!

             

            The image names are all different, image-1.jpg, image-2.jpg, etc.

             

            I'm not sure how to find the index of the currently displayed image

             

            There is both previous and next functions associated with the arrows

             

            Previous subtracts one

             

            var numOfPhotos = 6;

            var pic = sym.$("mainImage");

            var textCount = sym.$("tbCount");

             

             

            var imageSource = pic.attr('src');

            var imageCount = +(imageSource.slice(13,15));

            imageCount = imageCount-1;

            if (imageCount==0) {imageCount = numOfPhotos}

            var newCount = imageCount + ' of '+ numOfPhotos;

            if (imageCount<10) {imageCount = '0'+imageCount}

            imageSource = 'images/photo-'+imageCount + '.jpg';

            pic.attr('src',imageSource);

            textCount.html(newCount);

            window.trackEvent('prev');

            • 3. Re: Dynamic image swap, possible to have multiple URLs
              hemanthR Adobe Employee

              Is the above code not working you?

              In the example the currently displayed image index is not tracked,when the next or the previous buttons are clicked the currently displayed  image source path is read .Since all the image names are in a sequence ,the src attribute of the image tag is reset after changing the last two characters of the source path.

              If code is not working,can you share the composition you are working on ?