PhotoSwipe with Simple Image Gallery Pro

I was looking for a solution how to put PhotoSwipe working on Gavick Quark. Finally I managed to get it working. And it should works with all the templates, I think.

You have to buy 2 extensions. First is Simple Image Gallery Pro. SIG Pro is the main extension and you'll build galleries with that.

You'll need also Photoswipe template for Simple Image Gallery. That makes Simple Image Gallery Pro opens images in PhotoSwipe.

Quark makes problem is this phase because of there are now 2 PhotoSwipes. Photos has very big margins and photos on phones and tablets are showing in a thumbnail size. You have to switch off template PhotoSwipe. That helps only viewing problem on the phones and tablets.

Because of I don't know CSS and other things so well I asked tips from Styleware and then I got great tips. You must edit templates/gk_quark/css/template.restaurant.test.css file. Remove everything from:

Code: Select all

.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  outline: none;
}



until

Code: Select all

@media (max-width: 1100px) {

  .pswp__caption__center {
    padding: 10px;
  }
  .pswp__caption__center > h3 {
    font-size: 16px;
    margin: 0 0 10px 0;
    max-width: 100%;
    width: 100%;
  }
  .pswp__caption__center > span {
    font-size: 13px;
    max-width: 100%;
    width: 100%;
  }
}

Then you'll see great PhotoSwipe in action. But titles are black in black background so it's needed to modify still the previous CSS file. Also I wanted to see titles without description on thumbnails. Styleware friendly told be to add following lines to style sheet.

Code: Select all

body .my-gallery figcaption {
   display: block;
 }

.my-gallery .captionDescription {
    display: none;
}

.pswp__caption h3.captionTitle {
    color: #fff;
}


Now I have almost perfect gallery that I can manage with Simple Image Gallery Pro easily. And I this works also in multi language sites.

But this isn't enough and I have to ask it from Gavick. Quark template have still some PhotoSwipe code somewhere what makes image resize impossible in mobile phones and tables (at least iPhone and iPad). And many pages has six empty squares (PhotoSwipe buttons) at the left bottom position below footer.

What should I do to remove the empty buttons and makes resize to work on mobile phones and tablets?

My test site where you can see PhotoSwipe in action.

Hi

I've made a similar thing for the free version of Simple Image Gallery. It lacks css style, but if it's used with Quark template, than style is already provided.

Here is a SIG template file:

Hi and thanks. Unfortunately I didn't found help about the zip package.

I haven't had time yet but I think I must search and remove all the PhotoSwipe code from the template. I don't know whether it is easy or not. Hopefully Gavick can help in this case what to remove. I think I'll need remove PhotoSwipe code again when template is updated.

Best solution would be that Gavick will make change to template. When I choose not to use PhotoSwipe in the additional effects in the template settings PhotoSwipe wouldn't be available at all anywhere causing interference to external PhotoSwipe plugin.

Hi

Using my file, which is a template for Simple Image Gallery will still need PhotoSwipe code included with tempalte. It only helps to manage the images, use SIG upload system instead of complicated pure HTML code.

Your idea sounds very good. I tried it yesterday but didn't manage to get work. I'll try again tomorrow.

Hi

It only works with Quark template. Here is more detailed instruction how to use it: https://www.gavick.com/forums/quark/gal ... 99#p244899