Layout photoswipe weird

Hi,

I think the photowsipe layout is weird.
The first photo is number 1 and the second is the 6 and the third is 11

So when you click on the third photo (actually 11) and you click next you go to photo 12.

How can i make a logically counting in the photoswipe gallery.

So it would be

| 1| 2| 3|
| 4| 5| 6|
| 7| 8| 9|
etc. etc.

see also photo

Hello,

It is caused by fact that the images are displayed in columns and currently there is no way to change its ordering - I will consider to add some special option which will change the images ordering in the v.1.1.1

Hi dziudek,

Thanks for considering it would be awesome.

Check attachment for the idea of layout of photo swipe. I tried to use bigger images. But only this was possible .

update 1.1 is out for restaurant but will 1.1 and 1.1.1 will be out for the default style Quark?

I am looking forward to it !

Keep up the good work!

All updates are common for all versions of Quark. In the next version I will add probably support for the data-order attribute which will be responsible for the images ordering.

Hi,

There seems a problem in the photo swipe of v1.1 of quark style default.

The fullscreen button is now q.

Look at the attachment.

And here is the code from google inspector.

Code: Select all

}
.pswp__button--fs {
  display: none;
}
.pswp__button--fs:before {
  color: #26292b;
  content: "q";
  font-family: "quark-pixellove";
  font-size: 16px;
  text-transform: none !important;

We will fix this issue in the next update in the next week.

Thanks Dziudek for the update! The new update is great!!

I have changed the code with the order. So if some one want this you can copy this.

Code: Select all

<div class="gkPage">
<div class="gk-cols gk-gallery" data-cols="3">
<div><a href="images/demo/gallery/image1.jpg" data-size="850x1280" data-order="1" data-title="" data-desc=""><img src="images/demo/gallery/thumb1.jpg" alt="Thumbnail I" width="334" height="334" /></a> <a href="images/demo/gallery/image2.jpg" data-size="850x1280" data-order="4" data-title="" data-desc=""><img src="images/demo/gallery/thumb2.jpg" alt="Thumbnail II" width="335" height="224" /></a> <a href="images/demo/gallery/image3.jpg" data-size="850x1280" data-order="7" data-title="" data-desc=""><img src="images/demo/gallery/thumb3.jpg" alt="Thumbnail III" width="335" height="251" /></a> <a href="images/demo/gallery/image4.jpg" data-size="850x1280" data-order="10" data-title="" data-desc=""><img src="images/demo/gallery/thumb4.jpg" alt="Thumbnail IV" width="335" height="224" /></a> <a href="images/demo/gallery/image5.jpg" data-size="1280x853" data-order="13" data-title="" data-desc=""><img src="images/demo/gallery/thumb5.jpg" alt="Thumbnail V" width="335" height="504" /></a></div>
<div><a href="images/demo/gallery/image6.jpg" data-size="1280x853" data-order="2" data-title=""  data-desc=""><img src="images/demo/gallery/thumb6.jpg" alt="Thumbnail VI" width="305" height="457" /></a> <a href="images/demo/gallery/image7.jpg" data-size="1280x853" data-order="5" data-title="" data-desc=""><img src="images/demo/gallery/thumb7.jpg" alt="Thumbnail VII" width="305" height="203" /></a> <a href="images/demo/gallery/image8.jpg" data-size="850x1280" data-order="8" data-title="" data-desc=""><img src="images/demo/gallery/thumb8.jpg" alt="Thumbnail VIII" width="305" height="204" /></a> <a href="images/demo/gallery/image9.jpg" data-size="850x1280" data-order="11" data-title="" data-desc=""><img src="images/demo/gallery/thumb9.jpg" alt="Thumbnail IX" width="305" height="406" /></a> <a href="images/demo/gallery/image10.jpg" data-size="1280x853" data-order="14" data-title="" data-desc=""><img src="images/demo/gallery/thumb10.jpg" alt="Thumbnail X" width="305" height="203" /></a></div>
<div><a href="images/demo/gallery/image11.jpg" data-size="1280x853" data-order="3" data-title="" data-desc=""><img src="images/demo/gallery/thumb11.jpg" alt="Thumbnail XI" width="297" height="198" /></a> <a href="images/demo/gallery/image12.jpg" data-size="1280x853" data-order="6" data-title="" data-desc=""><img src="images/demo/gallery/thumb12.jpg" alt="Thumbnail XII" width="297" height="329" /></a> <a href="images/demo/gallery/image13.jpg" data-size="1280x853" data-order="9" data-title="" data-desc=""><img src="images/demo/gallery/thumb13.jpg" alt="Thumbnail XIII" width="297" height="436" /></a> <a href="images/demo/gallery/image14.jpg" data-size="1280x853" data-order="12" data-title="" data-desc=""><img src="images/demo/gallery/thumb14.jpg" alt="Thumbnail XIV" width="297" height="199" /></a> <a href="images/demo/gallery/image15.jpg" data-size="850x1280" data-order="15" data-title="" data-desc=""><img src="images/demo/gallery/thumb15.jpg" alt="Thumbnail XV" width="297" height="196" /></a> </div>
</div>
</div>

I didn't changed the alt thumbnail because that is unnecessary i think hihi

He???

This is weird.

When changing order to :

| 1| 2| 3|
| 4| 5| 6|
| 7| 8| 9|
etc. etc.

The mobile version shows:
1
4
7
2
5
8
3
6
9

Instead of
1
2
3
4
5
6
7
8
9

How can this be changed?

Another problem i have found is when the mouse is over the photo, the roll over image is weird. See attachment. In the demo version it is different.

Regarding the mobile issue - it is caused by fact that columns content is displayed one by one - I will note to fix this issue in the next release (disable use of the data-order attribute on mobile). Regarding the hover effect issue - could you better explain? Because for me it looks normal.

Hi Dziudek,

Thanks! It would be great! I am looking forward to use a different order for all devices!

See attachment this is how it looks on the demo. And my previous comment you can see how it looks on my website.

It seems that there is some inconsistence in the less files. The v.1.1.2 update will solve this issue.

Thanks i am looking forward to v1.1.2!

Hi Dziudek,

The order of the image is still not the way i want in the update of today. I tried to recompile, but same problems.

When changing order to :

| 1| 2| 3|
| 4| 5| 6|
| 7| 8| 9|
etc. etc.

The mobile version shows:
1
4
7
2
5
8
3
6
9

Instead of
1
2
3
4
5
6
7
8
9

How can this be changed?

And it shows that it is update 1.2.0 instead of 1.1.2 Haha something went wrong?

Thanks in advance,

Did you cleared your browser cache? Did you tested it when your browser had a "mobile" size from the beginning (it won't work if you resize a browser after opening the website)?

We have detected the version issue and it is fixed in the packages now.

Yes i tried in small size and on mobile phone. And cleared my cache in side admin en on browser cache.

I now remember i had JCH optimze on when updating the template. Could that be the problem.

I still have backup just before the update so i could restore it.

Do you have this issue visible somewhere online?

I have sent you a pm with my url

I'm sorry but I don't see any data-order attribute on your Portretten gallery.

Sorry try at my blog there are 2 gallery with order

Please make sure that you have properly cleared your browser cache or please try to use a different browser, because for me gallery works properly as I expected - the order is proper.

Hmm i tried it in my mobile device that had not been to that URL before and Just in case is cleared cache also. And stil wont work.

The first articele of blog the order is on pc :

1 2
3 4
5 6
7 8


But on Phone
1
3
5
7
2
4
etc.

for example

I do not why it wont appear The right order as dekstop pc does

The order is 1,2,3,4 etc. But it has a different order in pictures!! The counting works but the pictures are interchanged.

Hi sorry for double post,

I restored to the last backup before the update. Turn JCH optimize off and downloaded again the quark 1.1.2 and updated.

Then i recompiled because the blog layout was weird. Then cleaned my cache (a few times) and tried it again. But it has still the same problem.

To summary the problem, mabye i was unclear. The counting works 1 till 13 in the first article of my blog also on mobile phone. But the pictures are interchanged. So it still shows the first COLUM and then the SECOND column on mobile phone.

Now I'm confused - it shows first image on the first column and then first image on the second column on mobile OR all images from first column and then images from the second column?

Now I'm confused - it shows first image on the first column and then first image on the second column on mobile OR all images from first column and then images from the second column?

It shows NOW : all images from first column and then images from the second column

I want to make it : it shows first image on the first column and then first image on the second column on mobile

But you know that it was work that way in v.1.1.1 and then you say that it is wrong?

If you will display first image from the columns on mobile then you will get i.e. first image visible, then i.e. third image and then seventh image.

Hmm I also tried with v1.1.1 with no luck.

It would make a lot sense to me if the order would be the same on mobile and dekstop.

It is hard for me to explain But like I posted before this is what to achieve:

When changing order to :

| 1| 2| 3|
| 4| 5| 6|
| 7| 8| 9|
etc. etc.

The mobile version shows NOW:
1
4
7
2
5
8
3
6
9

Instead of
1
2
3
4
5
6
7
8
9


It make more sense if it woud be the order that I show I above

Hi Just tried on the v1.1.1. And same result...

I changed to this:
| 1| 2| 3|
| 4| 5| 6|
| 7| 8| 9|

On mobile still:
1
4
7
etc etc etc

So i can not see any difference between 1.1.1 and 1.1.2 on my website
I am sorry for being unclear and a bit annoying, but i have really struggles with the gallery now.

You can see it live her my url /test

Hi dziudek,

I don't like to bump my question, but it has been a while.

Can you give me a update on what you thinking and if it will be in the next update?

I don't see this as feature that is missing but more likely to bug in the ordering system.

Sorry for bumping my question..

Thanks in advance!