Ciao a tutti
sto creando una galleria dinamica (o portfolio) con ajaxify.
Praticamente ho una lista di box quadrati o meglio una griglia di box tutti uguali, quando clicco su uno di questi all'interno viene caricato dinamicamente i contunuti di un'altra pagina rendendo il box di dimensioni pari a 2 box.
Il codice che uso è il seguente:
carico questa libreria
http://maxblog.me/ajaxify/js/jquery.ajaxify.js
che sfrutta jquery
poi:
JS
codice:
$(document).ready(function() {
$('#sidebar a').ajaxify({
tagToload: '#prova',
animateOut:{opacity:'1', width:'150px', height:'100px'},
animateOutSpeed:500,
animateIn:{opacity:'1', width:'320px', height:'235px'},
animateInSpeed:500,
onStart:function(){
$('#prova').remove();
$('#sidebar .content').animate({
width: "150px",
height: "100px"
}, 500 );
}
});
});
HTML
codice:
<ul>
<li class="eachpost">
Lavoro 1
<div class="content" id="div1"></div>
<li class="eachpost">
Lavoro 2
<div class="content" id="div2"></div>
[...] [/list]
e CSS
codice:
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }
#sidebar {
float:left;
}
#loading {
display:none;
height:100%;
position:relative;
top:0;
left:0;
z-index:999;
width:100%;
color:red;
text-align:center;
}
a {
color:#666;
font-size:16px;
overflow:hidden;
}
#sidebar li {
display:block;
float:left;
margin:10px;
background:#ccc;
position:relative;
overflow:hidden;
}
.content {
height:100px;
width:150px;
overflow:hidden;
}
Fin qui tutto bene... funziona tutto correttamente...
il problema è che quando clicco su un box e questo si ingrandisce gli altri box lasciano uno spazio bianco come da allegato...
So che è normale che faccia così ma qualcuno sa come poter risolvere?
Grazie