some bugs with Photo Swipe gallery

Hello!
I have some problems with icons in PhotoSwipe component in this template(see att. file)

Next problem with images order in gallery. It' correct on desktop and tablet and wrong on mobile. It's not good (see att. files)
Here is the link:
http://karkas.info/proecty-i-chertezhy/ ... ozhar.html
Help me pls, gallery is very important for me!

Order on mobile is correct if you consider how rwd works. You have images in 3 columns, and ordering goes down in each column (first are all images in left column, then center, lastly right). On mobile all columns are set to display one under another, so again all images from first, then second, then third column.
If it goes to arrows, it looks you have a lot of javascript and access errors in javascript console. One of them tells that your site is configured to load files from http://www.karkas.info/ not http://karkas.info/ so first thing to do would be to set some kind of redirection so site loads always from same address (which is same as one set in configuration).

Hi!
I understand the order of the columns, but I was talking about order of images specifically in the PS gallery.
Thanks for redirect! I set it to karkas.info
What about the icons in the gallery? They're so strange...

Ok, they display wrongly in the "fullscreen" because of data-order parameter that is attached to each anchor. It sets the order of display when you watch PhotoSwipe in fullscreen.

And missing icons seems to be caused by outdated template. Please update it first.

And missing icons seems to be caused by outdated template. Please update it first.

I've updated the template to 1.0.1 version. There are still no icons...

Did you start with quickstart or standalone Joomla template?

Did you start with quickstart or standalone Joomla template?

Standalone Joomla template

Ok, seems like a bug in our template. I'll ask our devteam to fix that and will write back as soon as I'll get an answer.

Ok, seems like a bug in our template. I'll ask our devteam to fix that and will write back as soon as I'll get an answer.

Thank you Cyberek.
Well I didn't understand about order in mobile view(fullscreen mode)... Why didn't work "data-order" parametr? It works in desktop, tablet but don't work correctly in mobile view(fullscreen mode) What's wrong with it? Or is that my fault? May be I do something wrong?

If it goes to data order... it looks like some standard PhotoSwipe plugin behave :/.

Hi Ceberyk!
Is there any solution from your devteam about icon?

No, sorry, I have asked again.

I don't know it you are familiar with less files, if so please edit this file:
gk_technews/less/photoswipe-skin.less (and regenerate css files at the end)
if not, then please edit this file:
gk_technews/css/template.css

Now please use this code instead of old one (from .less file):

Code: Select all

.pswp__button--close:before {
   color: @dark;
   content: "close";
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 2rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
 }

.pswp__button--share:before {
   color: @dark;
   content: "share";
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 2rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
}
.pswp__button--fs:before {
   color: @dark;
   content: "fullscreen";
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 2rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
}
.pswp__button--zoom:before {
   color: @dark;
   content: "zoom_in";
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 1.8rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
}
.pswp__button--arrow--left:before {
   color: @dark;
   content: "keyboard_arrow_left";
   left: 30px;
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 4rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
}
.pswp__button--arrow--right:before {
   color: @dark;
   content: "keyboard_arrow_right";
   right: 30px;
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 4rem;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'liga';
}


Now if you want to only edit css files, replace "@dark" with "#424242".

Thanks, Cyberek! It works...

Ok. If you have any additional questions regarding this topic, please let me know.