レスポンシブ　ギャラリー　強引なまとめ

<script type="text/javascript" src="/js/jquery.imageNavigation.js"></script>
<script type="text/javascript">
      $(function(){
        $("#img_box,#img_box2").imageNavigation({
          time:2000,
          animationTime:500,
          rolloverTime: 0,
          rolloutTime: 500,
		  autoPlay: false,
        });
      });
</script>


<script type="text/javascript">
$(window).on('load resize', function(){
var $w = ($('#img_box2 img.d-garabox').height());
$('.navi-image .d_respo_hight img').css("max-height", $w);
$('#img_box2 .navi-image a').css("max-height", $w);
//$('.viewer').height(w);
});
</script>

/*---------------------------------ギャラリー-------------------------------------------------*/
#img_box2 {
	width: 640px;
/*	margin-top: 20px;*/
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	overflow: hidden;
}
#img_box2 .navi-image {
	position: relative;
	height: 480px;
	width: 640px;
	overflow: hidden;
}
#img_box2 .navi-image a {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #FFF;
	height: 480px;
	width: 640px;
	text-align: center;
	overflow: hidden;
	
	
	/*
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #FFF;
	height: 478px;
	width: 638px;
	text-align: center;
	overflow: hidden;
	border: 1px solid #FFF;*/
}
#img_box2 .navi-image a.last-active {
	z-index: 9;
}

#img_box2 .navi {
	overflow: hidden;
	padding-left:1%;
	padding-right:1%;
	-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
}



#img_box2 .navi-image a.active {
	z-index: 10;
}
#img_box2 .navi ul{
	margin: 0px;
	padding: 0px;
/*	width: 650px;*/
}
#img_box2 .navi ul li {
	float: left;
	list-style-type: none;
	padding: 0px;
	overflow: hidden;
	/*height:52px;*/
	width: 19%;
	position: relative;
	margin-top: 0px;
	margin-right: 2px;
	margin-bottom: 2px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}

#img_box2 .navi ul li:after{
padding-top: 61.8%;
display: block;
content: "";
}
#img_box2 .navi ul li .img_navi{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}


#img_box2 .navi ul li img{ width:100%; height:auto}
#img_box2 .navi-image a img{position: absolute;
    top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;}

#img_box2 .navi ul li a {
	margin: 0px;
	padding: 0px;
	display: block;
}


#img_box2, #img_box2 .navi-image, #img_box2 .navi-image a, #img_box2 .navi {
    width: 100%;
}

.d-garabox{ width: 100%;height: auto; }

#img_box2 .navi-image a img{ width:auto; max-width:100%; height:auto;}

/*ギャラリーメニュー　アクティブとホバーくっきり*/	
#img_box2 .navi img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  zoom: 1;
}

.navi .active > img
{
	opacity: 1!important;
	filter: alpha(opacity=100)!important;
	-ms-filter: "alpha(opacity=100)"!important;
	-moz-opacity: 1!important;
	-khtml-opacity: 1!important;
	zoom: 1!important;
	
	}


/*ディバイススマフォ*/
@media screen and (max-width: 490px){

/*--------------------------------------カーシングルスマフォ*/
#img_box2{ width:100%; height:auto;}

#img_box2 .navi-image{ width:100%; height:auto;/*max-height:300px; min-height:200px;*/}

#img_box2 .navi-image a{ width:100%; /*height:auto;*/}

#img_box2 .navi-image a img{ width:auto; height:auto;}

#img_box2 .navi{ width:100%; height:auto;}

#img_box2 .navi ul{ width:100%; height:auto;}





#img_box2 .navi ul li	{ width:24%}
/*初期のスマホギャラリーの高さ*/
.navi-image .d_respo_hight img,
#img_box2 .navi-image a{ max-height:251px;}


	
}

<div id="img_box2">
  

  <div class="navi-image">



 
   <?php
$fields = $cfs->get('shop_gallery');
foreach ($fields as $field) :
?>
<?php
$title= get_the_title();
 $attachment_id = $field['gallery_photo'];
?>


<a href="#" onClick="return false;" class="d_respo_hight">
<?php 
$car_photo = wp_get_attachment_image($attachment_id,'640_480',0,array('alt'=>$title,'title'=>$title));
echo $car_photo;
?>
</a>
<?php
endforeach;
?>
 
  <?php $hoge = get_field('car_label'); 
if($hoge == '店長おすすめ'): ?>
<div class="rabel_rabel">
<img src="/img/rable1_page.png" width="193" height="28" alt="店長おすすめ中古車">
</div>

<?php elseif($hoge == 'その他'): ?>


<?php endif; ?>


<?php //new
$days=30;
$today=date('U'); $entry=get_the_time('U');
$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1) {
echo '
    <div class="rabel_new">
    <img src="/img/rable_new.png" width="54" height="54" alt="新着中古車">
    </div>
	';
}
?>

  <?php //公開状態
   $hoge = get_field('car_open'); 
if($hoge == '10'): 
 //商談中
?>   
    <div class="rabel_status">
    <img src="/img/rabel_shoudan_page.png" width="198" height="41" alt="この中古車は商談中です。">
    </div>
 <?php elseif($hoge == '1'): 
  //売り切れ?>   
    <div class="rabel_status">
    <img src="/img/rabel_sold_out_page.png" width="640" height="480" alt="この中古車は完売しました。" class="d-garabox">
    </div>
<?php endif; ?> 

<img src="/img/d-garabox_back.png" class="d-garabox">



  </div>
  
  <div class="navi">
<ul>


   <?php
$fields = $cfs->get('shop_gallery');
foreach ($fields as $field) :
?>
<?php
$title= get_the_title();
 $attachment_id = $field['gallery_photo'];
?>


<li><p class="img_navi"><a href="#" onClick="return false;">
<?php 
$car_photo = wp_get_attachment_image($attachment_id,'140_93',0,array('alt'=>$title,'title'=>$title));
echo $car_photo;
?>
</a></p></li>
<?php
endforeach;
?>


    </ul>
  </div>
  <div style="clear:both;"></div>
  
  


  </div id="img_box2">