Hi Dean. The problem is because your toolbar is not related to any View. So you need to do it manually: 1) Add "hiding-toolbar" class to your div class="views" element. 2) Now to hide/show toolbar/tab bar just add/remove additional "hidden-toolbar" class on the same div class="views" element
By the way, the native like photo viewer with swiper-like slider and multitouch zoom gestures will be natively released in Framework7 on a weekend ;)
It will also have expose mode, when clicking on it hides its Navbar and toolbar for full screen view
... and double tap to toggle image zoom
... and ability to open such viewer in three ways - in popup, as a page, or as standalone element with custom animation. And all this will work from the box with almost one line of JS! :)
Vladimir! Thank you so much. I eagerly await this update! I've been working with one feature that you may or may not have thought of... which is the ability to swipe-down/up to go back to the gallery thumbnail index. (this is actually a feature of Facebook's photo viewing interface). To do this, I'm using iScroll's onScrollMove() event to variably change the opacity of the .page background depending on the distance of the move: --- onScrollMove: function() { if (parseInt(this.scale) == 1) { var opacity = 1 - (Math.abs(parseInt(this.y)) * 0.005); $$(this.wrapper).parents('.page').css('opacity', opacity); if (Math.abs(parseInt(this.distY)) >= 150) { $$(this.wrapper).parents('.page').css('opacity', 0.2); viewPhotos.goBack(); } } }, onScrollEnd: function(e) { if (parseInt(this.scale) == 1 && Math.abs(this.distY) < 150) { $$(this.wrapper).parents('.page').css('opacity','1') } }, --- My test code is crude, and maybe you've already thought of the distance-related opacity, but just thought I would m ention it to you just in case you haven't considered it. I assume we could use css transitions for my 2nd and 3rd opacity calls, but I hadn't gotten that far yet. I can't wait for next Monday. Last Monday felt like a birthday party with the newly-released documentation. I've been checking your site multiple times a day. Thank you, again, for the fantastic work! Dean
Yes, I know about this feature, it is used in many native apps. But I will not have time to implement it to this update, so probably with next iteration. By the way it is bit more complicated than just changing opacity of page, because as you may see there opacity of image is not changing (which is inside of page, right?), only opacity of background, which could be achieved by animating rgba background color. But this approach is not pretty good from performance side. So I need to invent bicycle here, again :)
In my case, by changing the opacity of the .page, it also affects the child image here. --- <div class="pages"> <div data-page="fullphotos" class="page no-navbar" style="background-color:#000;"> <div class="page-content"> <div id="idPhotoSwiper" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide vertcenter"> <img class="fullphoto" src="abc" /> </div> </div> </div> </div> </div> </div> --- With all the updates you are planning, I think I will go ahead and move on to another section of the site and await your "camera roll" features. Amazing framework!!! [Fade](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s1/v1400193186/:framework7:hhoW:fade.png.jpg)
By the way, add/removing the "hidden-toolbar" class on my class="views" did the trick. Thank you.
Photo Browser is now released in 0.8.4, but still no docs to it. So you can rely to kitchen sink examples, feel free to ask questions about it