Я создал страницу, показывающую галерею изображений (imagenes.html):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="gallery"></div>
<div id="image"></div>
</body>
</html>
И javascript-код (slider.js):
$(function() {
function loadSliderImage() {
var i, f, n;
for (i = 1; i < 49; ++i) {
n = ((i < 10) ? "0" : "") + i
f = n + "-120.JPG";
$("#gallery").append("<img src='images/cocinas/thumbs/" + f + "' rel=" + n + "></img>");
}
}
$("#gallery").on('click', 'img', function() {
$("#image").html("<img src='images/cocinas/small/" + $(this).attr("rel") + "-600.JPG' rel=" + $(this).attr("rel") + "></img>");
});
$("#image").on('click', 'img', function(e) {
var url = "images/cocinas/large/" + $(this).attr("rel") + "-980.JPG";
window.open(url, 'KitchenMaster', "width = 980, height = 670, scrollbars = no");
e.preventDefault();
});
loadSliderImage();
});
Если я выполняю imagenes.html, отлично работает, но если я запустил page index.html, загрузив imagenes.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/km.js"></script>
<title>Gallery</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
с кодом javascript (km.js):
$(function() {
$("#content").load("imagenes.html");
});
страница imagenes.html не работает нормально (код javascript slider.js не запускается)
Вы можете мне помочь?
Заранее спасибо.
Вы добавляете HTML внутри HTML, это не сработает, вы не можете иметь две части головы и тела в одном HTML. вместо этого в imagenes.html хранятся только те две галереи div ',' image 'и javascript, а затем загружают их в index.html