I am developing a project for e-commerce, and in product-detail page,i have one slider with product images. in that user can zoom that image.
my html code
<ion-slides pager="true" style="height:45%" zoom> <ion-slide *ngFor="let slide of selProd.productImages"> <img src="{{slide.image}}"> </ion-slide> </ion-slides>
but when i try to zoom image by pinch or double tap. it gives me error:
swiper-zoom.js:364 Uncaught TypeError: Cannot read property 'getAttribute' of null
at toggleZoom (swiper-zoom.js:364)
Thank you.
UPDATE
Adding class swiper-zoom-container with div tag in between img tag and ion-slide tag solved the issue.
Ex.:
<ion-slides pager="true" style="height:45%" zoom>
<ion-slide *ngFor="let slide of selProd.productImages">
<div class="swiper-zoom-container">
<img src="{{slide.image}}">
</div>
</ion-slide>
Related
I’m trying to build a slider with ion-slides where I want the user to be able to pinch to zoom.
I have tried hard coding it but zooming isn’t smooth and I feel like there is much better ways to do it natively.
any Ideas?
Did you try adding div with swiper-zoom-container class?
<ion-slides pager="true" style="height:45%" zoom>
<ion-slide *ngFor="let slide of selProd.productImages">
<div class="swiper-zoom-container">
<img src="{{slide.image}}">
</div>
</ion-slide>
I am trying to do an intro for an app with < ion-slides page>, my problem comes to set an image as background, I am trying to do this on my HTML:
<ion-header>
<ion-navbar>
<ion-title>Intro</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-slides pager>
<ion-slide style="background-image: url(/../../www/img/fondo.png)">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
As it can be seen, the first slide should show the image, but what I get is this:
Thanks for helping!
Your background image path is incorrect.
The image should be saved in /src/assets/img/fondo.png.
This is copied to /www/assets/img/fondo.png during the build process.
Your html code will have :
<ion-slide style="background-image: url(../assets/img/fondo.png)">
For those using Ionic 2+ I think this syntax is what you're looking for:
<ion-slide *ngFor="let imgFile of imgList" [style.backgroundImage]="'url(../assets/image/' + imgFile)">
In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, many times the click event gets fired and the contact detail page gets displayed.
<ion-content class="contacts-page-content">
<ion-list>
<button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
<ion-avatar item-left>
<img[src]="contact.picture">
</ion-avatar>
<h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
<h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
<h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
</button>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more contacts...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.
Thanks.
Check here for ionic 2 gestures.
Try
(tap)=showContactDetails(contact)
instead of click.
I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
How do I go about configuring orbit so that the images fill out the whole viewing area?
At the moment i have a gallery with two images. These images are not as wide as the viewing area of the orbit slider and it looks kind of dull presenting them like this.
Is there a way to configure orbit so the whole viewing area is filled?
Look at this picture. In the top is how the orbit image is being rendered and in the botton is how i would like it to be rendered instead. Is there any way to do this or do i need to crop and resize all images myself?
Can you show the code you are using? Also, what size are the images that you are using? When I've done this, I typically have cropped the images larger than the area I want them to cover. On one site that I'm working on, I have them cropped at 1600x500.
Here is what that site is using right now:
<div class="row">
<div class="large-12 large-centered columns">
<div class="slideshow-wrapper">
<span class="preloader"></span>
<ul id="featured1" data-orbit data-options="pause_on_hover:false; timer_speed:5500;">
<li><img src="/assets/sliders/slider01.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider02.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider03.jpg" /> <div class="orbit-caption">...</div></li>
</ul>
</div>
</div>
</div>
The additional class="slideshow-wrapper" is in there so I can further customize the text, etc.