Auto Scrolling image Gallery

a!localVariables(
  local!index:1,
  local!pictures:{
    cons!SR_CARD3_223425722,
    cons!SR_FREE_BLEEDING_CC0_PIXABAY_MYRIAMS_FOTOS_191216
  },
  local!seletedPicture:index(local!pictures,local!index,cons!SR_CARD3_223425722),
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!documentImage(
                  document:cons!SR_LEFT,
                  link: a!dynamicLink(
                    saveinto: {
                      a!save(
                        target: local!index,
                        value: local!index-1,
                      )
                    },
                    showWhen: local!index>1
                  )
                ),
              },
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: a!documentImage(
                document: local!seletedPicture
              ),
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: a!documentImage(
                document:cons!SR_RIGHT,
                link: a!dynamicLink(
                  saveinto: {
                    a!save(
                      target: local!index,
                      value: local!index+1,
                    )
                  },
                  showWhen: local!index<count(local!pictures)
                )
              ),
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        )
      }
    )
  }
)

So that's the solution to a static gallery (i.e. based on a user clicking the forward/backwards buttons)...what did you have in mind for the auto cycling of the images?

funfact the refresh interval is not exactly 30 seconds....

@stewart:took some brain cells but is working more or less.

a!localVariables(
  local!timestamp:now(),
  local!timedifferenceInSecond: a!refreshVariable(
    value: sum(second(now()-local!timestamp),minute(now()-local!timestamp)*60),
    refreshInterval: 0.5
  ),
  local!timedifferenceFactor:a!refreshVariable(
    value: round(local!timedifferenceInSecond/30,0),
    refreshInterval: 0.5
  ),
 
  local!pictures:{
    cons!SR_CARD3_223425722,
    cons!SR_FREE_BLEEDING_CC0_PIXABAY_MYRIAMS_FOTOS_191216
  },
  local!indexInterval:a!refreshVariable(
    value: mod(local!timedifferenceFactor,count(local!pictures)),
    refreshInterval: 0.5
  ),
  local!index: 1+local!indexInterval,
  local!seletedPicture:index(local!pictures,local!index,cons!SR_CARD3_223425722),
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!documentImage(
                  document:cons!SR_LEFT,
                  link: a!dynamicLink(
                    saveinto: {
                      a!save(
                        target: local!index,
                        value: local!index-1,
                      )
                    },
                    showWhen: local!index>1
                  )
                ),
              },
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: a!documentImage(
                document: local!seletedPicture
              ),
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!imageField(
              labelPosition: "COLLAPSED",
              images: a!documentImage(
                document:cons!SR_RIGHT,
                link: a!dynamicLink(
                  saveinto: {
                    a!save(
                      target: local!index,
                      value: local!index+1,
                    )
                  },
                  showWhen: local!index<count(local!pictures)
                )
              ),
              size: "LARGE",
              isThumbnail: false,
              style: "STANDARD"
            )
          }
        )
      }
    )
  }
)

Wow! Hats off to you! I took the "Call a Stored Proc" approach that would read/write an integer value in a database table, starting at 1 and incrementing up to a max value (i.e. the number of images) and then reset to 1 after the max was reached. 

yeah the two challenges were:

• how to restart at the first image, if you have no saving action.  -> I took mod() to have a restart when all pictures were shown.
• to get some kind of counter to go from one image to the next one. I took time difference passed since initial load.

I would use a textcache like this:

a!localVariables(
  local!index: a!refreshVariable(
    value: textcacheset(
      "asgdhjasfg",
      if(
        a!isNullOrEmpty(textcacheget("asgdhjasfg")),
        1,
        textcacheget("asgdhjasfg") + 1
      ),
      1
    ),
    refreshInterval: 0.5
  ),
  a!textField(
    value: local!index
  )
)

hi stefan,
not sure about  that solution as i am not sure what kind of issue its solving. Can you elaborate a bit?

What do you mean? It creates an index which is incremented every 30 seconds. Then use this to display an image.

Ok that's pretty cool...what are the implications of multiple projects./applications in the same environment using this? Are there potential clashes if two implementations use the same cache key or are they isolated within the instances of the plug-in?