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>
Related
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>
Is it possible to use a slider with Django Forms with Crispy Forms?
I am using Foundation and the example code is below.
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" name="amount">
</div>
After burning a couple days playing with this, I am convinced that the jquery approach is not the best way to tackle this.
I would recommend just going with the Crispy-form template approach
Field('slider', template="custom-slider.html")
good luck.
I'm using Zurb Foundation 5.5.3 in an Angular JS project, and trying to execute a reveal modal. I look for this problem on community, but no solution has been successful, as I don't forget data-reveal property or I don't want to invoke JS via.
This is my code:
<div class="small-1 columns">
Click Me For A Modal
</div>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
It's the same as code example in Foundation docs. When I click on link, modal does not appear, and page is redirect to home.
Any idea?
Thanks in advance!
You reference a similar question here:
Foundation and AngularJS
There are conflicts in the JavaScript digest cycle when using Foundation 5 and AngularJS, so they won't work together by default.
I've used two different solutions successfully:
Foundation for Apps
Angular Foundation
I prefer using the latter.
I'm setting up a new project with Zurb foundation. I have a problem in that I want a couple of css classes to have different font-sizes to the rest of the site but doing that makes the row reduce it's width.
So
.boxed {
font-size:0.8em; // or font-size:12px causes the same issue
}
<div class='row'>
<div class='large-12 columns'>
stuff goes here
</div>
</div>
<div class='row'>
<div class='row boxed'>
More stuff here, smaller font-size
</div>
</div>
The second row is a lot narrower than the first just because I've applied the .boxed class to it.
Any ideas on best practice for this in zurb foundation?
Many thanks
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.