Question

I have a webpage with 16 images on it. Each image takes up 49.7% of the container width. So essentially I have 2 columns and 8 rows. I wrote some jQuery code that expands the image you click on to 99.5% width as to take up 2 columns.

This works great, but when I click an image on the second column, It is placed below the image on the first column. I don't want that to happen, I want the image to be on top of the image on the first column. Hopefully that makes sense. I will provide my code below.

$(document).ready(function() {
  $('img').on('click', function() {
    $(this).toggleClass('imgwidth');
  });
});

img {
  width: 49.7%;
  display: inline;
  vertical-align: top;
  margin-top: 3px;
  top: 100px;
}
.imgwidth {
  width: 100%;
}

Fiddle demo

Answer 1

Well. This is not complete but it's gonna give you a starting point and show that this actually ain't easy.

First check the FIDDLE please.

In JS code i used a # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress RewriteEngine On RewriteBase / RewriteCond %{HTTPS} off [OR] RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://arfcc.com/$1 [R=301,L] data attr to define whether it's a moved item or not. For your desire, we're gonna move the items on 2nd column before the previous item. Further explanations are gonna be inside the code as comments.

moved

It may have some fails but like I said it's a starting point.

How to make previous image go below an expanded image

1 个答案: