JSFiddle - React, Tailwind, and code Playground

by mortenhauberg

HTML

<div id="Gallery">
<img data-text="1" src="http://2.bp.blogspot.com/-CXFfl9luHPM/TV-Os6opQfI/AAAAAAAAA2E/oCgrgvWqzrY/s1600/cow.jpg" data-group="111" class="thumb"/>
<img data-text="2" src="http://www.thelibertyvoice.com/wp-content/uploads/2011/06/52cow.jpg"  class="thumb" data-group="111"  /><br/><br/>
<img data-text="1"src="http://filuren.dk/wp-content/uploads/cow-1.jpg" class="thumb"  data-group="QQQ"/>
<img data-text="2" src="http://slothsandmovies.com/images/cow_large.jpg" class="thumb"  data-group="QQQ"/>
<img data-text="3"src="http://madmikesamerica.com/wp-content/uploads/2010/11/wisconsin-milk-cow.jpg" class="thumb"  data-group="QQQ"/>
    <img data-text="4" src="http://www.thetwentyfirstfloor.com/main/wp-content/uploads/2011/02/cow3.jpg" class="thumb"  data-group="QQQ"/>

    <img data-text="5" src="http://1.bp.blogspot.com/-3QSgXPbk1f4/Td1RiyrkyaI/AAAAAAAAD3k/tamo23XG_VA/s1600/cow1.jpg" class="thumb"  data-group="QQQ"/>

    <img data-text="6" src="http://nextnature.net/wp-content/uploads/2008/07/world_cow_530.jpg" class="thumb"  data-group="QQQ"/>
<br /><br />
<img data-text="1" src="http://img.dailymail.co.uk/i/pix/2008/05_03/bigcowBNS_468x334.jpg" rel="1" class="thumb"/>
</div>



<div id="img_bg" class="hide" style="display: none">
 <div id="middle" class="hide" style="display: none">
   <div id="img_box" class="hide" style="display: none">
       <img src="" class="show_img" id="close_img" title="Klik for at lukke" />
    <div id="Pagination" class="hide">
    
    <p id="Prev">« Forrige</p>
    <span id="Page"></span> / <span id="total"></span>
    <p id="Next">Næste »</p>
    <p class="close_img">X</p>
    <br />
</div>
<p class="alt-text"></p>
    </div>
 </div>
</div>

CSS

.close_img {
     float: right;
     position: relative;
     top: -20px;
     right: 5px;
     font-size: 20px;
     cursor: pointer;
 }
 .alt-text {
     background-color: #FFF;
     padding: 0;
     margin: 0;
     font-style:italic;
 }
 #Pagination {
     background-color: #FFF;
 }
    #Pagination p {
    display: inline;
    cursor: pointer;
}
.show_img {
    width: auto;
    cursor: pointer;
}
#Gallery
{
    position: relative;
}

#Gallery > img
{
    
    max-height: 150px;
     cursor: pointer;
}

#img_box {
    vertical-align:middle; 
    display:table-cell;
}

#img_bg { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.7);
    z-index:10;
}
 
#middle { 
    height:100%; 
    display:table; 
    margin:0 auto; 
}

.hide {
    display: none;
}

JavaScript

$(function(){
  
$('.thumb').click(function (){
            var $this = $(this);
            
            $('#img_bg').fadeIn(); 
            $('#middle').fadeIn(); 
            $('#img_box').fadeIn();
            
            img_path = $this.attr('src'); 
            
    winH = $(window).height();
    winW = $(window).width();
    border = 100;
    winHeight = Math.round(winH-border);
    winWidth = Math.round(winW-border);
    

     group = $this.attr('data-group');
        
    text = $this.attr('data-text');
    
    $('.alt-text').html(text);

    $gallery = $("#Gallery");
    $images = $gallery.find('img[data-group='+group+']');
    numberImg = $('img[data-group='+group+']').index(this);
    showImg = $('img[data-group='+group+']').index(this);
    thisImg = $images.eq(numberImg).attr('src');
    $('.show_img').attr('src', thisImg);
    start = numberImg;
    
    orgImgHeight = $('.show_img').height();

    orgImgWidth = $('.show_img').width();

    if(orgImgHeight >= winHeight || orgImgWidth >= winWidth){

    $('.show_img').animate({  
    height: winHeight,
     }, 1000 );
}
    

    total = $images.length;

    if(total >= 2){
    $('#Pagination').show();
    $('#Page').html(showImg + 1);
     $('#total').html(total);
    }
    
    
    
$('#Next, #Prev').click(function (e) {
       
    $this = $(this);
    $nav = $(this).attr('id');
   
   $page = $('#Page').html();
   number = Math.round($page - 1);
   maxNumber = Math.round(total - 1);
 
  if($nav == "Nex"){
        if(number >= maxNumber){
          current = 0;
       $('#Page').html(1);
       }
       else {
       current = Math.round(number + 1);
       $('#Page').html(current +1);
      }
  }
  else {
         if(0 >= number){
    current = maxNumber;
           $('#Page').html(total);
       }
       else{
              current = Math.round(number - 1);
               $('#Page').html(current + 1);
      }
  }

    text = $images.eq(current).attr('data-text');
   ...