@extends('cusapp_custom')

@section('content')

  <div class="panel panel-main">
    <div class="panel-heading">
      <h3 class="panel-title"><img src="{{url('/image/bc2.png')}}" style="width:50px;"  > CRAFTED CANDLES</h3>
    </div>
  </div>


<hr>
<div class="mini-title"> CRAFTED CANDLES   AROMA CANDLES, CANDLES, FLOWER CANDLES, THAILAND<br>
</div>
 
 
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a>
  <ol class="indicator">
  </ol>
</div>

<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-carousel">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a> <a class="next">›</a> <a class="play-pause"></a>
  <ol class="indicator">
  </ol>
</div>


<div style="padding:2%; clear:both"></div>
<section id="images" class="links">
  <div class="row">
  <div class="grid" align="center" id="thegrid">
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        <div class="col-sm-4 col-xs-6 div-img"> <a href="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" title="CRAFTED CANDLES"> <img src="{{url('/image/portfolio/crafted-candle/'.$r)}}.jpg" alt="CRAFTED CANDLES" class="img-art img-rounded"> </a> </div>
        </div>
  </div>
</section>


@endsection






@section('script') 
<script>
$('.links').click(function(e) {
    
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
}) 
</script> 
<script src="{{url('vendor/gallery-master/js/blueimp-gallery.min.js')}}"></script> 
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>

<script>
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {itemSelector: '.grid-item'});
 var width = elem.offsetWidth;
$(window).resize(function(){
	 width = elem.offsetWidth;
  resizeIt(width);
}); 

function  resizeIt(width){
	if (width < 300){
	 $('.grid-item').css('width','100%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
	 }		
 else if (width < 450){
	 $('.grid-item').css('width','50%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
	 }	
 else if (width < 530){
	 $('.grid-item').css('width','50%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
	 }
else if (width < 695){
	 $('.grid-item').css('width','33.33%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
	 }	 
 else if (width < 845){
	 $('.grid-item').css('width','25%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
	 }	
else{
	 $('.grid-item').css('width','25%');
	 msnry = new Masonry( elem,{temSelector: '.grid-item'});
		 }
	}	
setTimeout(function(){ resizeIt(width);},1000);
setTimeout(function(){ resizeIt(width);},5000);
setTimeout(function(){ resizeIt(width);},11000);
</script>
@endsection








@section('style')
<link rel="stylesheet" href="{{url('vendor/gallery-master/css/blueimp-gallery.min.css')}}">
<style>
.img-art{ width:100%} 
.blueimp-gallery>.indicator>li {
    display: inline-block;
    width: 20px  ;
    height: 20px  ;
   
}
.div-img{ margin-bottom:2%}
</style>
@endsection