QRouland/ModuleWeb
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Intégration images dans Mémory

Browse Source
This commit is contained in:
alexandre-pereira
2015-03-15 19:38:11 +01:00
parent 0cfce7d1f9
commit 4ef3e7e8b3
8 changed files with 74 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
SRC/resources/views/backend/ref_home.blade.php
View File

@ -105,50 +105,50 @@
<div class="form-group">
<label for="p1" class="col-sm-4 control-label">Dimensions 1 étoile</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="p1" id="p1" placeholder="2">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->p1}}" name="p1" id="p1" placeholder="2">
</div>
</div>
<div class="form-group">
<label for="p2" class="col-sm-4 control-label">Dimensions 2 étoiles</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="p2" id="p2" placeholder="3">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->p2}}" name="p2" id="p2" placeholder="3">
</div>
</div>
<div class="form-group">
<label for="p3" class="col-sm-4 control-label">Dimensions 3 étoiles</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="p3" id="p3" placeholder="4">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->p3}}" name="p3" id="p3" placeholder="4">
</div>
</div>
<div class="form-group">
<label for="pt" class="col-sm-4 control-label">Tableaux par partie</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="pt" id="pt" placeholder="3">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->pt}}" name="pt" id="pt" placeholder="3">
</div>
</div>
<legend>Mémo</legend>
<div class="form-group">
<label for="m1" class="col-sm-4 control-label">Nb. de tableaux 1 étoile</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="m1" id="m1" placeholder="2">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->m1}}" name="m1" id="m1" placeholder="2">
</div>
</div>
<div class="form-group">
<label for="m2" class="col-sm-4 control-label">Nb. de tableaux 2 étoiles</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="m2" id="m2" placeholder="3">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->m2}}" name="m2" id="m2" placeholder="3">
</div>
</div>
<div class="form-group">
<label for="m3" class="col-sm-4 control-label">Nb. de tableaux 3 étoiles</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="m3" id="m3" placeholder="4">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->m3}}" name="m3" id="m3" placeholder="4">
</div>
</div>
<div class="form-group">
<label for="mt" class="col-sm-4 control-label">Tableaux par partie</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="mt" id="mt" placeholder="3">
<input type="number" min="1" max="10" class="form-control" value="{{$paramjeu->mt}}" name="mt" id="mt" placeholder="3">
</div>
</div>
<div class="form-group">
@ -237,9 +237,18 @@
@section('page-css')
<link rel="stylesheet" href="{{ URL::to('css/image-picker.css') }}">
<link rel="stylesheet" href="{{ URL::to('css/bootstrap-multiselect.css') }}">
<style>
.thumbnails .thumbnail {
margin-bottom: 0;
}
.thumbnails .li {
margin: 0;
}
</style>
@endsection
@section('page-scripts')
<script src="{{ URL::to('js/image-picker.min.js') }}"></script>
<script src="{{ URL::to('js/masonry.min.js') }}"></script>
<script src="{{ URL::to('js/image-picker.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap-multiselect.js') }}"></script>
<script>
@ -248,6 +257,14 @@ $("select.multiple").imagepicker();
$('#imagesSearched').load('{{ URL::to('api/searchOeuvres') }}', function(){$("select.multiple").imagepicker();});
function fitGrid(){
/*$('.thumbnails').masonry({
itemSelector: 'li',
gutterWidth: 10
}).masonry('reload');*/
};
$('#imagesSearched').on('click', '.pager a', function (event) {
event.preventDefault();
if ( $(this).attr('href') != '#' ) {
@ -278,9 +295,11 @@ $("#recherche").on('submit', function(event){
$('#imagesSearched').empty();
$('#imagesSearched').append(data);
$("select.multiple").imagepicker();
fitGrid();
});
});
/*

101
SRC/resources/views/frontend/memo.blade.php
View File

@ -2,6 +2,15 @@
@section('page-css')
<link rel="stylesheet" href="/css/memory.css">
<style>
.mg__tile--inside {
overflow: hidden;
}
.mg__tile--inside img {
max-width: 100%;
}
</style>
@endsection
@section('content')
@ -12,85 +21,25 @@
@endsection
@section('page-scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/classList.min.js"></script>
<script src="/js/memory.js"></script>
<script>
(function(){
var myMem = new Memory({
wrapperID : "my-memory-game",
cards : [
{
id : 1,
img: "/pictures/default/monsters-01.png"
},
{
id : 2,
img: "/pictures/default/monsters-02.png"
},
{
id : 3,
img: "/pictures/default/monsters-03.png"
},
{
id : 4,
img: "/pictures/default/monsters-04.png"
},
{
id : 5,
img: "/pictures/default/monsters-05.png"
},
{
id : 6,
img: "/pictures/default/monsters-06.png"
},
{
id : 7,
img: "/pictures/default/monsters-07.png"
},
{
id : 8,
img: "/pictures/default/monsters-08.png"
},
{
id : 9,
img: "/pictures/default/monsters-09.png"
},
{
id : 10,
img: "/pictures/default/monsters-10.png"
},
{
id : 11,
img: "/pictures/default/monsters-11.png"
},
{
id : 12,
img: "/pictures/default/monsters-12.png"
},
{
id : 13,
img: "/pictures/default/monsters-13.png"
},
{
id : 14,
img: "/pictures/default/monsters-14.png"
},
{
id : 15,
img: "/pictures/default/monsters-15.png"
},
{
id : 16,
img: "/pictures/default/monsters-16.png"
}
],
onGameStart : function() { return false; },
onGameEnd : function() { return false; }
});
})();
var cards2 = [];
@foreach($oeuvres as $o)
cards2.push(
{
id : '{{$o->id}}',
img : 'http://www.augustins.org/documents/10180/156407/{{ $o->image}}'}
);
@endforeach
var myMem = new Memory({
wrapperID : "my-memory-game",
cards : cards2,
onGameStart : function() { return false; },
onGameEnd : function() { return false; }
});
</script>
@endsection