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

**URL:** <https://forums.fusetools.com/t/loading-a-dinamic-image-from-a-scroolview-of-thumbnails-on-click/6036>\
**Category:** How-to Discussions\
**Created:** [July 25, 2016, 10:15pm UTC](https://forums.fusetools.com/t/loading-a-dinamic-image-from-a-scroolview-of-thumbnails-on-click/6036 "2016-07-25T22:15:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lpedrop](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/lpedrop/32/357_2.png) [@lpedrop](https://forums.fusetools.com/u/lpedrop)\
**Post date:** [July 25, 2016, 10:15pm UTC](https://forums.fusetools.com/t/loading-a-dinamic-image-from-a-scroolview-of-thumbnails-on-click/6036/1 "2016-07-25T22:15:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lpedrop](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/lpedrop/32/357_2.png) [@lpedrop](https://forums.fusetools.com/u/lpedrop)\
**Post date:** [July 26, 2016, 8:53am UTC](https://forums.fusetools.com/t/loading-a-dinamic-image-from-a-scroolview-of-thumbnails-on-click/6036/2 "2016-07-26T08:53:49Z")

</div>

Hello again.

Solved.

on the .UX,

```auto
<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,

```auto
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
}

```

😉