4

I am working on a basic app that has a list of items and when an item is selected its corresponding image is show in an image tag.Issue is, the images are very "wide" and hence appear very small. I am trying to somehow enable the zoom functionality on the image for the user. I checked all "stretch" options but "pinch" and "zoom" are not working. According to official documentation, i looked at decodeHeight and decodeWidth but they do not appear to be working as well. I appreciate any help i can get, Following is the code:

 <template> <Page class="page"> <ActionBar title="Home" class="action-bar" /> <ScrollView>`enter code here` <StackLayout class="home-panel"> <Image :src="img_src" strech="AspectFill"/> <ListView for="images in img_data" @itemTap="onButtonTap" style="height:200vh"> <v-template> <Label :text="images.name" /> </v-template> </ListView> <!-- <Button text="Button" @tap="onButtonTap" /> --> </StackLayout> </ScrollView> </Page> </template> <script> export default { methods: { onButtonTap(event) { console.log(event.index); this.img_src = "~/components/" + this.img_data[event.index].image; } }, data() { return { img_src: "", img_data: [ { name: "Iron Man", image: "iron_man.png" }, { name: "super man", image: "super_man.png" }, { name: "Batman", image: "batman.png" }, { name: "Flash", image: "flash.png" }, ] }; } }; </script> <style scoped> .home-panel { vertical-align: top; padding-top: 20; font-size: 20; margin: 15; } .description-label { margin-bottom: 15; } </style>
Improve this question
2
  • 3
    The default image component doesn't have the zoom feature you will need a plugin for that check out github.com/triniwiz/nativescript-image-zoom Commented Oct 14, 2018 at 21:21
  • Thanks, i am still learning NS so if you could help me demonstrate on how to use this in my script, it would be great! Commented Oct 14, 2018 at 21:27

2 Answers 2

Reset to default
1

First, install nativescript-image-zoom plugin:

tns plugin add nativescript-image-zoom

Then globally register the ImageZoom element in your main.js:

Vue.registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);

Now you can use it as a global component anywhere in your app you want.

<ImageZoom v-if="ifStatement" :src="imageSrc" class="main-image" />

Keep in mind that while global registration of the component doesn't hurt the performance, it prevents you from lazy loading the element.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Install the plugin by running the following command

tns plugin add nativescript-image-zoom

Replace your Image tag with this custom component

<StackLayout class="home-panel"> <ui:ImageZoom :src="img_src" strech="AspectFill"/> <ListView for="images in img_data" @itemTap="onButtonTap" style="height:200vh"> <v-template> <Label :text="images.name" /> </v-template> </ListView> <!-- <Button text="Button" @tap="onButtonTap" /> --> </StackLayout>

Don't forget to add xmlns to your Page element.

xmlns:ui="nativescript-image-zoom"

In case you have any another question, please don't hesitate to ask.

Improve this answer

5 Comments

thanks, where do i add this in the code?"xmlns:ui="nativescript-image-zoom"
Here is the example <Page xmlns="schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="onLoaded" xmlns:ui="nativescript-image-zoom xmlns:accept="views/accept" xmlns:messages="views/messages" xmlns:favourite="views/favourite">
Thanks again, but which file do i edit in order to add this. sorry for such noob questions.
in the same file where you are planning to add that component. <template> <Page class="page" xmlns:ui="nativescript-image-zoom" > <ActionBar title="Home" class="action-bar" /> <ScrollView>enter code here
what is xmlns:ui _?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.