67 lines
2.0 KiB
PHP
67 lines
2.0 KiB
PHP
<div id="galeria">
|
|
<div class="ui image" data-id="0">
|
|
<img src="{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$proyecto->imagen}}" />
|
|
</div>
|
|
<div class="ui grid" id="thumbnails">
|
|
@foreach ($proyecto->images as $i => $image)
|
|
@if ($i == 0)
|
|
@continue
|
|
@endif
|
|
<div class="three wide column">
|
|
<div class="ui image" data-id="{{$i}}">
|
|
<img src="{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$image}}" />
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var images = [
|
|
@foreach ($proyecto->images as $image)
|
|
'{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$image}}',
|
|
@endforeach
|
|
]
|
|
function populateThumbs(current) {
|
|
var thumbs = $('#thumbnails')
|
|
thumbs.html('')
|
|
$.each(images, (i, el) => {
|
|
if (i == current) {
|
|
return
|
|
}
|
|
thumbs.append(
|
|
$('<div></div>').attr('class', 'three wide column').append(
|
|
$('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
|
|
$('<img />').attr('src', el)
|
|
)
|
|
)
|
|
)
|
|
})
|
|
$('#galeria').find('.grid .image').click(function(e) {
|
|
var id = $(this).attr('data-id')
|
|
changeImage(id)
|
|
})
|
|
}
|
|
function changeImage(id) {
|
|
var big = $('#galeria>.image')
|
|
big.find('img').attr('src', images[id])
|
|
big.attr('data-id', id)
|
|
populateThumbs(id)
|
|
}
|
|
$(document).ready(() => {
|
|
$('#galeria').find('.grid .image').click(function(e) {
|
|
var id = $(this).attr('data-id')
|
|
changeImage(id)
|
|
/*var big = $('#galeria>.image')
|
|
var big_id = big.attr('data-id')
|
|
big.find('img').attr('src', images[id])
|
|
big.attr('data-id', id)
|
|
$(this).find('img').attr('src', images[big_id])
|
|
$(this).attr('data-id', big_id)
|
|
populateThumbs(id)*/
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|