javascript - jQuery extending image portfolio under image -

i trying make extending thumbnails portfolio working same google images. using jquery

$('.thumbs a').click(function(e) { hidenotinuse(); var tmp_div = $(this).parent().index(); $('.about div').eq(tmp_div).show(); });  function hidenotinuse() {     $('.about div').each(function() {         $(this).hide();     });     } hidenotinuse(); 

i started http://jsfiddle.net/hq7y5/ , added pictures mix (later i'll add video's , style everything) > http://jsfiddle.net/rvmouche/ruj3358s/

it works fine if you're using fullscreen desktop windows, have 4 images next each other , if click on 1 assigned div shows. if you're using smaller window 1 or more of pictures move down (expected) , assigned div shows under last images while should show under image itself.

also, if picture clicked second time, should hide div

any idea on how this?

the way google images sets far more complicated have going on here. if poke around bit dev tools you'll see why.

all image containers in list given width dynamically window resizes, , based on kind of break point ends being n pictures per 'row' @ different window sizes. knowing there n pictures in each row, when click on image find nth picture in row (aka last one) , place large block level element after it, disrupting inline-block level elements' flow. creates space information fill. when window resizes, , 'row' size changes, shift panel around end of new 'row'.

the problem code .content elements always positioned after entire list, instead of placed @ right parts inside list.

i'm going ignore dynamically sized rows now, on complicates example, , focus on html structure, , finding , appending aspects.

demo

we start clicking .item. index of our .item in 'list' of .item elements, , remove existing display panels. if our index same our clicked index set recorded index null , nothing else. otherwise, take our index , recursively find end of 'row' our modulo-remainder operator. new index can target last .item in 'row' , place block level panel after it.

this basic example in comparison google images, fundamentally same logic.

var displayelement = $('<div />', {        class: 'display'      });    var findend = (function () {    var rowsize = 4;        return (function (idx) {      if (idx <= rowsize) return rowsize;             if (idx % rowsize !== 0) {         return findend(idx + 1);       } else {         return idx;       }    });  }());    var itemclick = (function () {    var currentitem;        return (function (e) {      var self = $(this),          index = self.index('.item'),          end, target;            $('.display').remove();      $('.item.active').removeclass('active');            if (currentitem !== index) {        end = findend(index + 1);        target = $('.item').eq(end - 1);                self.addclass('active');        target.after(displayelement.text(index));              currentitem = index;      } else {        currentitem = null;      }    });  }());      $('.item').on('click', itemclick);

.wrap {    position: relative;    width: 100%;  }    .item {      display: inline-block;    box-sizing: border-box;    width: calc(100% / 4 - 3px);    height: 80px;        background-color: #aaa;  }    .item.active {    border: 2px solid #333;  }    .display {    margin-bottom: 4px;    display: block;    width: 100%;    height: 120px;        background-color: #333;    font-family: sans-serif;    font-size: 3em;    line-height: 120px;    text-align: center;    color: #eee;  }

<div class="wrap">    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>  </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

note: above use terms list , row loosely, indicated quotes. not confused actual <ol>, <ul>, <li>, , <tr> elements. example doesn't contain true list or table elements.