Skip to content

Commit

Permalink
completed first step, doing subcategories
Browse files Browse the repository at this point in the history
  • Loading branch information
Alessandro Catania committed Jan 24, 2018
1 parent cf9c94a commit f94be4a
Show file tree
Hide file tree
Showing 6 changed files with 1,150 additions and 8 deletions.
94 changes: 86 additions & 8 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,17 @@ function getRandomFromArray($ar) {
return $ar[$num];
}

//CATEGORIE
$path2 = 'images/' . $name[0];
$results = scandir($path2);

foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;

if (is_dir($path2 . '/' . $result)) {
//code to use if directory
}
}

// Obtain list of images from directory
$imgList = getImagesFromDir($root . $path);
Expand Down Expand Up @@ -123,7 +133,7 @@ function getRandomFromArray($ar) {
}
#container2{
background-repeat:no-repeat;
background-size:contain;
/*background-size:contain;*/
position: relative;
max-width: 70%;
max-height: 70%;
Expand All @@ -147,6 +157,7 @@ function getRandomFromArray($ar) {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
body{
margin: 0px;
Expand All @@ -157,6 +168,9 @@ function getRandomFromArray($ar) {
#menu span:hover, a.list:hover {
opacity: 0.5;
}
#menu span.active{
text-decoration: underline;
}
@media screen and (max-width: 2560px){
#portfolioBox{
margin-top:3px;
Expand All @@ -170,8 +184,42 @@ function getRandomFromArray($ar) {
var img = JSON.parse('<?php echo JSON_encode($imgList);?>');

//On click change img

function changeImg(number){
if (!number){var number = Math.floor(Math.random()*img.length);
}
var imgURL = img[number];
var path = "<?php echo $path ?>";
//var imgURL = img[Math.floor(Math.random()*img.length)];
var hidden = '<img style="display:none" id="imagetogetsize" src="'+path+imgURL+'">';
$('#hidden').html(hidden);
image = document.getElementById('imagetogetsize');
//$('#imagetogetsize').load(function(){console.log('cia')});
$('#imagetogetsize').on('load',function(){
var width = image.naturalWidth;
var height = image.naturalHeight;

var box = $('#container2');
var boxwidth = box.width();
var boxheight = box.height();
console.log(width,height,boxwidth,boxheight);
if (width < boxwidth && height < boxheight){
box.css('background-size','auto');
} else {
box.css('background-size','contain');
}
box.css('background-image','url('+ path +imgURL+')');
});

return number;
}
changeImg();
$('#container2').on('click',function(){
$(this).css('background-image','url(<?php echo $path ?>'+img[Math.floor(Math.random()*img.length)]+')');
//$(this).css('background-image','url(<?php echo $path ?>'+img[Math.floor(Math.random()*img.length)]+')');
var listNum = changeImg();
$('a.list').css('text-decoration','none');
$('a.list').eq(listNum).css('text-decoration','underline');

});

//Make image List
Expand All @@ -180,30 +228,39 @@ function pad(n) {
}

for (var num in img){
var x = '<a href="#" class="list" link="images/'+ img[num] +'">'+ pad(parseInt(num)+1) +'</a><br>'
var x = '<a href="#" class="list" number="'+(num) +'" link="images/'+ img[num] +'">'+ pad(parseInt(num)+1) +'</a><br>'
//$(x).append('#categories');
$('#portfolioBox').append(x);
}

$('.list').on('click',function(){
$('#container2').css('background-image','url('+ $(this).attr('link') +')');
$('.list').css('text-decoration','none');

changeImg($(this).attr('number'));
//$('#container2').css('background-image','url('+ $(this).attr('link') +')');
$(this).css('text-decoration','underline');
});

//Menu
$('#portfolio').on('click',function(){
$('#portfolioBox').show();
if ($(this).hasClass('active')){$('#portfolioBox').hide(); $(this).removeClass('active')}
else {$('#portfolioBox').show()};
$('#contactBox').hide();
$('#infoBox').hide();
$('#container2').removeClass('white');
$('#container2').addClass('click');
$('#menu span.active').removeClass('active');
$('#portfolio').addClass('active');
});

$('#info').on('click',function(){
$('#portfolioBox').hide();
$('#contactBox').hide();
$('#infoBox').show();
$('#container2').addClass('white');
$('#container2').removeClass('click');
$('#container2').removeClass('click');
$('#menu span.active').removeClass('active');
$('#info').addClass('active');
});

$('#contact').on('click',function(){
Expand All @@ -212,6 +269,8 @@ function pad(n) {
$('#infoBox').hide();
$('#container2').addClass('white');
$('#container2').removeClass('click');
$('#menu span.active').removeClass('active');
$('#contact').addClass('active');
});

$('#logo').on('click',function(){
Expand All @@ -220,6 +279,9 @@ function pad(n) {
$('#infoBox').hide();
$('#container2').removeClass('white');
$('#container2').addClass('click');
$('#menu span.active').removeClass('active');
//$('#container2').css('background-image','url(<?php echo $path ?>'+img[Math.floor(Math.random()*img.length)]+')');
changeImg();
});


Expand All @@ -243,7 +305,6 @@ function pad(n) {
});
</script>
</head>

<body>
<!--iframe src="https://open.spotify.com/embed/user/21pizt3vxnh7w5hylsktuaawi/playlist/0tWi3asASL07tAM57JP6jc&theme=white&" width="300" height="80" frameborder="0" allowtransparency="true" id="spotify"></iframe-->
<!--iframe src="https://open.spotify.com/embed?uri=spotify%3Auser%3A21pizt3vxnh7w5hylsktuaawi%3APlaylist%3A0tWi3asASL07tAM57JP6jc&theme=white" width="300" height="80" frameborder="0" allowtransparency="true"></iframe-->
Expand All @@ -260,7 +321,24 @@ function pad(n) {
<!--a href="#">information</a><br-->
</div>
</div>
<div id="flex"><div id="container2" class="click" style="background-image: url(<?php echo $path . $img ?>);"><div id="contactBox" style="display:none"><a href="mailto:[email protected]">[email protected]</a></div><div id="infoBox" style="display: none"></div></div>
<div id="flex"><div id="container2" class="click"><div id="contactBox" style="display:none"><a href="mailto:[email protected]">[email protected]</a></div><div id="infoBox" style="display: none"><!--I’m Pier.<br>
I live in London.<br>
I love Violence.<br>
Normal Life exite me.<br>
Nothing is more Vicious<br>
than Reality-->
1994 Born.<br>
2013 IUAV university of Design.<br>
2016 Internship at Pitis (Paris) Erasmus+ Winner.<br>
2016 BA Degree in Graphic and Industrial Design.<br>
2016 Moved to London.<br>
2016 Internship at Guru Graphics Limited (London) Erasmus+ Winner.<br>
2017 Graphic Designer at Guru Graphics Limited (Full Time).<br>
2017 Visual Designer at GVC Holding (London).
</div></div>
</div>
<div style="display:none; opacity: 0; width: 0px; height: 0px" id="hidden"></div>

</body>

</html>
Loading

0 comments on commit f94be4a

Please sign in to comment.