Loading a dinamic image from a scroolview of thumbnails, on click

How-to Discussions
1

Hello, I have one dynamic scroolview with image thumbs, and I want to switch to a new page to preview the full image when clicking the desired thumbnail.

How can I do this. Tks

2

Hello again.

Solved.

on the .UX,

<Page ux:Name="View">
  <DockPanel Background="#022328">
    <StatusBarBackground Dock="Top" />
    <BottomBarBackground Dock="Bottom" />
    <Grid Rows="1*,9*,1*">
      <Text Value="{loggedUserName}" FontSize="20" Alignment="Center" Color="#fff" />
      <ScrollView ClipToBounds="true">
        <StackPanel>
          <Each Items="{pictures}">
            <DockPanel Margin="0,0,0,10">
              <Image Url="{thumburl}" Dock="Top" Width="150" Clicked="{showImageDetail}" />
              <Text Value="{title}" Alignment="BottomCenter" Margin="10" />
            </DockPanel>
          </Each>
        </StackPanel>
      </ScrollView>
    </Grid>
  </DockPanel>
</Page>
<Page ux:Name="Detail">
  <DockPanel Background="#022328">
    <StatusBarBackground Dock="Top" />
    <BottomBarBackground Dock="Bottom" />
    <Grid Rows="9*,1*">
      <StackPanel Alignment="VerticalCenter">
        <Image Url="{detailImageUrl}" Dock="Top" StretchSizing="Natural"/>
      </StackPanel>
      <Button Text="back" Clicked="{backToViewPage}" />
    </Grid>
  </DockPanel>
</Page>

and on the .JS,

var Observable = require('FuseJS/Observable');
var detailImageUrl = Observable("");

function showImageDetail(arg) {
    detailImageUrl.value = arg.data.imageurl;
      currentPage.value = "Detail";
}
function backToViewPage() {
    currentPage.value = "View";
}

module.exports = {
    detailImageUrl: detailImageUrl,
    showImageDetail: showImageDetail,
    backToViewPage: backToViewPage
}

:wink: