framework7

Open full view…

photo browser should close when clicked on a button.

sandy
Tue, 23 Feb 2016 07:53:14 GMT

i am using a photo browser where their are 3 button when i click on a particular button the link opens in the background of the photo browser..i want that when i click on the button it should close photobrowser and then navigate to other page..help me

Vladimir Kharlampidi
Wed, 24 Feb 2016 11:42:40 GMT

Would be good to see live example to understand what you mean

sandy
Wed, 24 Feb 2016 11:48:00 GMT

var myPhotoBrowserPopupDark = myApp.photoBrowser({ photos: photosBrowser, theme: 'dark', toolbarTemplate: '<div class="toolbar tabbar" id="divPhoto"><div class="toolbar-inner"><a href="#" style="color:#ffffff" id="photoLikes" value="2" class="link" onclick="photoLike();">Like</a><a href="sw_photoComments.html" onclick="getPhotoComment()" style="color:#ffffff" class="link" >Comment</a><a href="#" onclick="sharePhoto()" style="color:#ffffff" class="link">Share</a></div></div>', navbarTemplate:'<div class="navbar"><div class="navbar-inner"><div class="left sliding"><a href="#" class="link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type === \'page\' ? \'back\' : \'\'"}}"><i id="photoclick" class="icon icon-back {{iconsColorClass}}"></i>{{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}</a></div><div class="center sliding"><span class="photo-browser-current"></span><span class="photo-browser-of">{{ofText}}</span><span class="photo-browser-total"></span></div><div class="right" id="likescomments" style="padding-right: 5px;display:none"><h4><span id="likeNo">Likes: </span><span id="photoNoOfLikes"></span> | <span id="commentNo">Comments: </span><span id="photoNoOfComments"></span></h4></div></div></div>', type: 'popup', lazyLoading: 'true', lazyLoadingInPrevNext: 'true', zoom: 'false', //maxZoom:'3', initialSlide: initialSlideNo, toolbar: true, navbar:true, zoom: true, onSlideChangeStart(myPhotoBrowserPopupDark) { var indexNo = $(".photo-browser-current").text(); var id = document.getElementById(indexNo).getAttribute('value'); if(visitorId) { getLikeStat(id); } getLikeComments(id); }, onOpen(myPhotoBrowserPopupDark) { var target = myPhotoBrowserPopupDark.params.loop ? myPhotoBrowserPopupDark.swiper.slides : myPhotoBrowserPopupDark.slides; target.each(function( index ) { var hammertime = new Hammer(this); hammertime.get('pinch').set({ enable: true }); hammertime.on( 'pinchstart', myPhotoBrowserPopupDark.onSlideGestureStart ); hammertime.on( 'pinchmove', myPhotoBrowserPopupDark.onSlideGestureChange ); hammertime.on( 'pinchend', myPhotoBrowserPopupDark.onSlideGestureEnd ); }); }); myPhotoBrowserPopupDark.open(); } when i click on the comment button, the comment page appear's on the back of the photo browser and the photo browser does not vanish..

Vladimir Kharlampidi
Wed, 24 Feb 2016 11:54:53 GMT

Just add `myPhotoBrowserPopupDark.close()` to your onClick handler function for this button

Vladimir Kharlampidi
Wed, 24 Feb 2016 11:55:13 GMT

I guess you should put it inside `getPhotoComment` function

sandy
Wed, 24 Feb 2016 11:59:42 GMT

i just now wrote myPhotobrowserPopupDark.close() in the getPhotoComment function.it shows the error like ReferenceError: myPhotoBrowserPopupDark is not defined..please help

Vladimir Kharlampidi
Wed, 24 Feb 2016 12:01:04 GMT

Then make sure you call and define them in same scope

sandy
Wed, 24 Feb 2016 12:02:04 GMT

can u suggest me how to do so.. I am new to photo browser..

sandy
Wed, 24 Feb 2016 12:03:06 GMT

function getPhotoComment() { myPhotoBrowserPopupDark.close(); }

Vladimir Kharlampidi
Wed, 24 Feb 2016 12:03:43 GMT

It is JS basics )) If you defined some variable in one function it won't be accessible within another function. You can try to use `window.myPhotoBrowserPopupDark =` instead of `var myPhotoBrowserPopupDark =`

sandy
Wed, 24 Feb 2016 12:07:26 GMT

I did what u said now,it is not showing any error but the photobrowser is not closing..help me

Vladimir Kharlampidi
Wed, 24 Feb 2016 12:16:27 GMT

Do you have live link to your app?

sandy
Wed, 24 Feb 2016 12:22:38 GMT

yes..

sandy
Wed, 24 Feb 2016 12:27:15 GMT

give me ur email id i vil send u the link..

Vladimir Kharlampidi
Wed, 24 Feb 2016 12:40:27 GMT

[email protected]

sandy
Wed, 24 Feb 2016 12:44:20 GMT

i have just mailed you the link.check it

Vladimir Kharlampidi
Wed, 24 Feb 2016 13:11:08 GMT

Ok, you use it as a popup, then just call `myApp.closeModal('.photo-browser-popup');` to close it instead of `myPhotoBrowserPopupDark.close();`

sandy
Fri, 26 Feb 2016 05:46:42 GMT

ty vladimir.It helped me alot..

sandy
Fri, 26 Feb 2016 06:28:04 GMT

how can i use popup on comment button of photo browser. when i click on the comment button of photo browser a popup modal should open on the photobrowser,but when i try to do so the popup is opening behind the photo browser..suggest me what to do..

Vladimir Kharlampidi
Fri, 26 Feb 2016 14:03:16 GMT

Try to increase `z-index` for that popup

nextdev
Wed, 20 Sep 2017 13:35:35 GMT

myApp.closeModal('.photo-browser-in') not working [Capture111](//muut.com/u/framework7/s1/:framework7:J67N:capture111.png.jpg)