На этот раз это немного отличается от моих предыдущих постов. Поэтому я решил сделать новый.
К вашему сведению, я использую плагин Lightbox из этого:
http://leandrovieira.com/projects/jquery/lightbox/
ePC.html = содержит изображение с эффектом лайтбокса (работа с IE, Chrome, Firefox).
reviews.html = Домашняя страница. подключиться к scripts / script.js. (Содержит функцию .load (), загружая ePhone.html или ePC.html, нажав на одну из этих 3 ссылок). Пожалуйста, игнорируйте "ePhone.html".
Ниже приведен файл scripts / script.js:
$(document).ready(function() {
//ePhone link is clicked. Open ePhone.html PLEASE IGNORE THIS LINK.
$('#linkEPhone').click(function() {
$('#apDiv2').load('ePhone.html');
});
//ePC link is clicked. Open ePC.html
$('#linkEPC').click(function() {
$('#apDiv2').load('ePC.html', function () {
$('a[@rel*=lightbox]').lightBox();
});
});
//ePC2 link is clicked. Open the <div> section of ePC.html. The image is located inside the <div> section.
$('#linkEPC2').click(function() {
$('#apDiv2').load('ePC.html #content', function () {
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[@rel*=lightbox]').lightBox();
});
});
});
});
});
Проблема с третьим выше:
$ ('# apDiv2'). load ('ePC.html #content', function () {...
'# содержание является id. И изображение находится внутри тега в «ePC.html»
<div id=content>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
Это работает 100% на Chorme и Firefox, но НЕ Internet Explorer 8 !!!!. (Я понимаю, почему люди ненавидят IE сейчас ..)
IE разбился! Позже я исправил эту проблему, удалив! DOCTYPE..winin "reviews.html"
Хорошо, с! DOCTYPE удалено, IE больше не падает. ОДНАКО, CSS-код лайтбокса НЕ ПРИМЕНЯЕТСЯ к изображению!
Другие методы, которые я пробовал, но не работал:
* 1. «live» вместо «load»: *
$('#linkEPC2').click(function() {
$('#apDiv2').live('load', 'ePC.html, #content', function(){
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[@rel*=lightbox]').lightBox();
});
});
});
});
Этот не работает вообще. Даже изображения там нет вообще.
Поэтому я думаю, что вместо этого я могу придерживаться функции «load ()».
2. Я также попытался поместить эти 3 строки в раздел div:
<div id=content>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
но это не работает ни ..