Phoca Gallery - Shadowbox doesn't work in WebApp

kwindo
12 years, 7 months ago

Using:
Joomla 2.5.3
Mobile Joomla 1.0.2
Elegance template 1.0.7

I've been working on integrating Phoca Gallery in my mobile site. I'm using Shadowbox to show my pictures. I've managed to create a nice css layout pushing the shadowbox full screen and everything works very nicely in my iPhones Safari.

However Shadowbox doesn't seem to work when using the WebApp function. When opening a picture by clicking on a thumbnail in de WebApp function the pictures shows but not in Shadowbox so with a white background and no controls.

I'm hoping someone (probably the developers) could provide me with a solution.

To give something back this is my CSS in the custom.css file to push Phoca Gallerie's shadowbox full screen. I only need to find a way to prevent the webpage in the background from scrolling but that's a different issue

 
#shadowbox_overlay {
width: 100%!important;
height: 100%!important;
opacity: 0!important;
}
#shadowbox {
background-color: transparent;
border-radius: 0;
padding: 0;
height: 100%!important;
width: 100%!important;
top:0!important;
left: 0!important;
}
#shadowbox_body {
width: 100%!important;
height: 100%!important;
}
#shadowbox img {
height: auto!important;
width: auto!important;
max-height: 100%!important;
max-width: 100%!important; 
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#shadowbox_loading {
width: 32px;
height: 32px;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#shadowbox_info {
position: absolute;
top: 0;
width: 100%;
}
#shadowbox_title {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#shadowbox_info_inner, #shadowbox_title_inner {
opacity: 0.7!important;
background:#333;
background-image:-webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
background-image:-webkit-linear-gradient(#555, #333);
background-image:-moz-linear-gradient(#555, #333);
background-image:-ms-linear-gradient(#555, #333);
background-image:-o-linear-gradient(#555, #333);
background-image:linear-gradient(#555, #333);
font-size: 12px;
}
#shadowbox_counter {
padding: 2px 4px;
}
#shadowbox_nav a {
width: 20%;
}

Update: I have updated the Elegance template to 1.0.8. And started playing with preloading the Shadowbox Javascripts but that didn't help for this issue.

Update2: Appart from the Jomsocial part (waiting and hoping for a Elegance template overwrite) the mobile version of my site is ready to be published. I integraded Eventlist and Phocagallery (even found a way to stop the page from scrolling when a Shadowbox is open, jus ask if you want to know how). Sadly I have to put my project on hold because of this issue. Please someone give me a hint how to solve this. Aparently I should have placed this post in "Premium Support".

kwindo
12 years, 7 months ago

In my quest to solve this issue I stumbled on a script called PhotoSwipe. It took some trial and error to implement it in the Elegance template but eventually it turned out not so hard to do. This is a cool script because it has swipe, zooming, slideshow and fits nicely into the Elegance design.

I was hoping that this issue would be solved with using another image viewer script assuming it was caused by Shadowbox use of the "rel" attribute but, aparently, the same still happens.

This rules out Phocagallery's Shadowbox as possible cause. I made a template overwrite of the Phocagallery Category view hoping to find a cause in Phocagallery but I was unsuccessfull. I don't think Phocagallery is to blame.

whatsupmag
12 years, 1 month ago

Hi, could I ask you how you integrated photoswipe to phocagallery?

mdesmit
11 years, 8 months ago

hi,

Yes, I would like to know that also! Please !!

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.
I accept cookies from this site. Agree