Ciao!
Prendo la palla al balzo ringraziando per la possibilità e l'aiuto che ci stai dando!
Mi permetto di fare il copia incolla del codice che ci crea diversi problemi.
In sostanza, come spiegava Chandler abbiamo questo problema di visualizzazione nello scorrimento delle foto nelle gallery.
Parliamo di bootstrap "base" senza nessun tipo di implementazione. All'interno trovi anche gli script per il testo rollover con l'effettino di uno "sfondo" opaco per fare leggere meglio il testo. Ti giro direttamente l'output del codice; il contenuto delle gallery lo genero attraverso php e mysql. Sopra il "div" di ogni gallery troverai un "<a href="...">" che mi serve per altri motivi; puoi anche ignorarlo!
Capisco perfettamente che non è facile leggendo il codice "al volo" capire come potere risolvere il problema; ti ringrazio!!!
A seguire il codice.
Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>titolo pagina</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
<link href="carousel.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document" style="font-family: Gotham; letter-spacing: -1px;">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #FFFFFF;">
<div class="blog-masthead">
<div class="container" >
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php?pagina=home">Logo</a>
</div>
<li><a href="index.php?pagina=home">HOME</a></li><li class="active"><a href="in_progress.php?pagina=in_progress">IN PROGRESS</a></li><li><a href="best_works.php?pagina=best_works">BEST WORKS</a></li><li><a href="team.php?pagina=team">TEAM</a></li><li><a href="services.php?pagina=services">SERVICES</a></li><li><a href="contacts.php?pagina=contacts">CONTACTS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container"><div class="row" style="max-width: 990px; border: 0px solid red;">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position:absolute;
top:0;
right:0;
/*background:rgba(66, 139, 202, 0.75);*/
background: #14272b;
width:316px;
height:312px;
display: none;
text-align:justify;
color:#fff !important;
z-index:2;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'http://bootsnipp.com');
});
</script>
<a href="in_progress.php?pagina=in_progress&id_gallery_freccine=8">
<div class="col-md-4">
<div align="center">
<div class="thumbnail" style="width: 312px; height: 312px; border: 0px solid #FFFFFF;">
<div id="carousel-example-generic_8" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption" style="padding: 10px 20px 10px 40px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </div>
<img src="backoffice/gallery/8/thumb/IMG_3979.jpg">
</div>
<div class="item" >
<div class="caption" style="padding: 10px 20px 10px 40px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </div>
<img src="backoffice/gallery/8/thumb/IMG_3884.jpg">
</div>
<div class="item" >
<div class="caption" style="padding: 10px 20px 10px 40px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<img src="backoffice/gallery/8/thumb/IMG_3885.jpg">
</div>
<div class="item" >
<div class="caption" style="padding: 10px 20px 10px 40px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
<img src="backoffice/gallery/8/thumb/IMG_3995.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
<!-- FOOTER -->
<div class="container">
<hr>
<div class="row">
<div class="col-md-8" style="color: #939494; font-size: 12px;">
<b>scattaro architetti milano</b> | via benvenuto cellini 3 - 20129 milano - italia
</div>
<div class="col-md-4" style="color: #939494; font-size: 12px; text-align: right;">
2015 - scattaro architetti milano
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="assets/js/docs.min.js"></script>
</body>
</html>
Poi abbiamo un altro problema di conflitto di script tra lo script che genera il testo rollover e la classica gallery con "lightbox".
Se utilizzo gli script insieme si annullano a vicenda; usati singolarmente ovviamente funzionano.
Magari affrontiamo un problema per volta!
Grazie ancora!!!
