Auto Scrolling image Gallery

Whilst you couldn't have an auto-scrolling gallery, you could use the interface refresh capability to cycle through a set number of images.

I am unable to iterate the array . can you please explain a bit more?

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"
            )
          }
        )
      }
    )
  }
)

@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?

The cache can store 10 000 items per environment and there is no app isolation. As items alway expire, this is not much of an issue. But you cannot fully rely on an item to exist in the cache.

Keys must be as unique as needed for the specific use case. Here I would use the username + static key string.

This happens if you don't take your time reading the plug-in docu.

Thank you by the way for sharing this one.

I didn't know it until now. Helps a lot for such cases

Has anyone figured out a way to have it rotate < the minimum refresh interval?

Wonder if a partner could create something to do it.

Very Helpful Richard. Thank you!