Ordering in 2 column gallery

Hi,

I'm using the swipe gallery and the code in the custom module looks like this:

Code: Select all

<div>
   <p><strong>SS13 Lola's Dream</strong></p>
</div>
<div class="gkPage">
   <div class="gk-cols gk-gallery" data-cols="2">
      <div>
         <a href="images/gallery/ss_2016/SS_2013_01.jpg" data-order="1" data-size="1920x1446" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_01_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_03.jpg" data-order="3" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_03_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_05.jpg" data-order="5" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_05_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_07.jpg" data-order="7" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_07_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_09.jpg" data-order="9" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_09_thumb.jpg" alt="Test" width="510" height="384" /></a>
      </div>
      <div>
         <a href="images/gallery/ss_2016/SS_2013_02.jpg" data-order="2" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_02_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_04.jpg" data-order="4" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_04_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_06.jpg" data-order="6" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_06_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_08.jpg" data-order="8" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_08_thumb.jpg" alt="Test" width="510" height="384" /></a>
         <a href="images/gallery/ss_2016/SS_2013_10.jpg" data-order="10" data-size="1280x964" data-title="Test" data-desc="Test"><img src="images/gallery/ss_2016/SS_2013_10_thumb.jpg" alt="Test" width="510" height="384" /></a>
      </div>
   </div>
</div>

So I decided to use 2 columns.
The problem is that on a PC all looks great but on a mobile (becomes 1 column) I get the wrong order of images, 1,3,5,7,9,2,4,6,8,10... How can I have the right order on Mobile phones... ???

Thanks in advance !!

Hi

I'm afraid the code does not make it possible to show it in a different order, but please tell me the url to this page so maybe forcing it to show in 2columns for mobile will be a solution.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:640px) {
.gk-gallery.gk-cols > div {
    width: 50% !important;
}
}


Thats a great code and makes the gallery 50% smaller fitting the images side by side but when I enlarge (swipe gallery) I still get the images in the earlier uneven order, can this be fixed also ?

Hi

Unfortunately as I said before, there is no way to change the order, so You will have to redistribute images to right place by Yourself, but that it will show different order in slide than on page since it's showing it by column.