Как исправить мою проблему с отображением: моя страница gallery01.html изображения не отображаются в DIV на моем index.html - PullRequest
Новая
       24

Как исправить мою проблему с отображением: моя страница gallery01.html изображения не отображаются в DIV на моем index.html

0 голосов
/ 11 января 2019

Мне нужна ваша помощь, у меня проблема с моей страницей gallery01.html, изображения не отображаются в DIV в моем index.html. Я использую сервер EasyPHP-5.3.8.1

мой gallery01.html отлично работает, когда я отображаю его только один.

my index.html, который содержит мой div 

<html lang="fr" class="no-js"> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="./css/myStyle.css" media="all"/>
    <title>Title</title>
    <script src="js/jQuery.js"></script>
    <script src="js/js_.js"></script>
    </head>
    <body>
    <div class="topnav" id="myTopnav"> <a href="#" id="lien_1">gallery01</a> </div>
    <div class="content-menu-loaded" id="content-menu-loaded" style="display:none"></div>
    </body>
    </html>

my gallery.html 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/myStyle.css" media="all"/>
<script src="js/jQuery.js"></script>
<script src="js/jquery.lazy.min.js"></script>
</head>
<body>
<div class="nav-sub-0" id="nav-sub-0">
<div id="listing">
<div class="item">

<img src="images/lazy-loader-86x83.gif" class="lazy" data-src="images/img_1.jpg"/>
<noscript>
<img src="images/img_1.jpg"/>
</noscript>
Garde-Corps 01

</div>
<div class="item">

<img src="images/lazy-loader-86x83.gif" class="lazy" data-src="images/img_2.jpg"/>
<noscript>
<img src="images/img_2.jpg"/>
</noscript>
Garde-Corps 01
</div>
</div>
</div>
<script>
$(function() {
$('.lazy').lazy();
});
</script>
</body>
</html>

JavaScript для загрузки моей галереи js_.js 

$(document).ready(function() {
/**********gallery01.html********************************/
$( "#lien_1" ).mouseover(function(event) {
document.getElementById("content-menu-loaded").innerHTML = "";
$("#content-menu-loaded").empty();
$("#content-menu-loaded").load('gallery01.html');
$("#content-menu-loaded").fadeOut(0);
$("#content-menu-loaded").fadeIn(500); 
});
$( "#lien_1" ).mouseout(function() {
document.getElementById("content-menu-loaded").innerHTML = "";
document.getElementById('content-menu-loaded').style.display = 'none';
$("#content-menu-loaded").empty();
});
});

myStyle.css 

.topnav {
height:36px;
background-color: #0b7dda;
overflow: hidden;
position: absolute;
width: 100%;
left: 0;
right: 0;
margin: 0 auto;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16.5px;
font-family: verdana;
text-decoration: none;
text-align: center;
font-size: 12px;
text-indent: 0;
border-left: thin silver solid;
}

.topnav a:hover {
background-color: #064579;
}
.content-menu-loaded{
z-index: -1;
height:auto;
background: #F4F4F4;
overflow: hidden;
position: absolute;
width: 60%;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 36px;
border: 6px solid #fff;
-moz-box-shadow: 0px 3px 18px rgb(100, 100, 100);
-webkit-box-shadow: 0px 3px 18px rgb(100, 100, 100);
box-shadow: 0px 3px 18px rgb(100, 100, 100);
}
...