+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: AJAX i LIGHTBOX jak to połączyć ? (/thread-ajax-i-lightbox-jak-to-polaczyc)
AJAX i LIGHTBOX jak to połączyć ? - przemok90 - 04-12-2010
Mój problem jest następujący. Przez skrypt AJAX'a wczytuję treść jaka ma się znajdować w div'ie frame1. Wszystko ładnie śmiga, natomiast mam problem z ostatnia zakładką Galeria. Zdjęcia tam powinny być wyświetlane przez LightBox'a jednak otwierają się w nowej zakładce. Domyślam się, że gdzieś muszę dodać jakąś linijkę aby ładowało się razem z LightBoxem jednak nie mam pojęcia gdzie.
Zawartość pliku index.html
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<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>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<script type="text/javascript">
var ObiektXMLHttp = false;
if (window.XMLHttpRequest) {
ObiektXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(zrodlo) {
if (ObiektXMLHttp) {
ObiektXMLHttp.open("GET", zrodlo);
ObiektXMLHttp.onreadystatechange = function() {
if (ObiektXMLHttp.readyState == 4) {
document.getElementById('frame1').innerHTML = ObiektXMLHttp.responseText;
}
}
ObiektXMLHttp.send(null);
}
}
</script>
</head>
<body>
<div id="top">
<!-- NAGLOWEK -->
<div id="header">
<ul>
<li><a href="" onclick="getData('galeria.html'); return false">Galeria</a></li>
<li><a href="" onclick="getData('kontakt.html'); return false">Kontakt</a></li>
<li><a href="" onclick="getData('cennik.html'); return false">Cennik</a></li>
<li><a href="" onclick="getData('oferta.html'); return false">Oferta</a></li>
<li><a href="" onclick="getData('glowna.html'); return false">Strona główna</a></li>
</ul>
</div>
<div id="header1"></div>
<!-- NAGLOWEK KONIEC -->
<!-- SRODEK START -->
<div id="frame1">
<h1>.: Witam :.</h1><br><br>
</div>
<!-- SRODEK KONIEC -->
<!-- STOPKA START -->
<div id="footer">
<p>© 2010</p>
</div>
<!-- STOPKA KONIEC -->
</div>
</body>
</html>Zawartość pliku galeria.html
Kod:
<div id="gallery">
<h1>.: Galeria :.</h1><br>
<a href="photos/image1.jpg" title="Utilize"><img src="photos/thumb_image1.jpg" width="72" height="72" alt=""></a>
<a href="photos/image1.jpg" title="Utilize"><img src="photos/thumb_image1.jpg" width="72" height="72" alt=""></a>
</div>