Fotoalbum wil niet laden in een divje

Status
Niet open voor verdere reacties.
T

TheoDijkstra

Nieuwe gebruiker
Lid geworden
20 jun 2011
Berichten
4
--------------------------------------------------------------------------------

Hallo,

Ik ben nieuw op dit forum en hoop dat iemand kan helpen met het volgende probleem.

Ik heb een website gemaakt met een horizontaal dropdownmenu, waarmee ik de content middels javascript in een div op de indexpagina laad.
Dankzij de heldere uitleg op sceneone.nl en verder zoeken in google werkt dit voor htm pagina's prima.
Nu heb ik het probleem dat als ik een fotoalbum, gemaakt met lightroom oid. wil vertonen in de div, dat deze niet wordt geladen.
Als ik de target "blank" meegeef krijg ik de foutmelding dat de pagina niet kan worden gevonden.
Dit zijn de linken onder "portfolio" zie code hieronder
In het album op zich wordt ook javascript gebruikt, zit hier het probleem of is hier een truc voor???

Er zullen waarschijnlijk wel dubbele dingen in de Css staan, maar dat komt mede door het experimenteren en omdat ik een newbie ben in deze materie.

Ik heb de album "baby" bijgevoegd.

Wie kan mij helpen???

Inmiddels heb ik het voor elkaar om het album in een nieuw tabblad weer te geven. Maar het liefst zou ik het album openen in de startpagina.

Wie o wie helpt mij?

HTML + javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PBfoto uw fotograaf in zuidoost Drenthe</title>
<link href="pbfoto.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var defaultDiv = "content";
function changeLinks()
{
var dyn = document.getElementsByTagName("a");
for (var i = 0; i < dyn.length; i++)
{
if (dyn.getAttribute("title") == 'Dynamic Content')
{
var fileName = dyn.getAttribute("href",2); // Use this syntax to get the relative link (IE uses absolute links by default)
if (fileName.indexOf("?") == -1) {
var target = defaultDiv; // If no parameters found, use default div ID
var location = fileName; // The fileName should also be the location
} else {
var param = fileName.lastIndexOf("?");
var target = fileName.substr(param + 1,fileName.length - param); // Return the parameter
var location = fileName.substr(0,param); // extract the location URL
}
dyn.removeAttribute("href"); // remove the href attribute to prevent the page to refresh
dyn.setAttribute("href", "javascript:loadContent('"+location+"','"+target+" ');"); // add the onclick handler
}
}
}
function loadContent(location,target)
{
// Include the file
if (!location || location == '') {
return false;
} else {
include(location,target);
}
}

// HIERONDER NIET AANPASSEN
function include(url,dbox)
{
var pageRequest = false
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end
@*/

if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest();

if(pageRequest) {
pageRequest.open('GET', url, false);
pageRequest.send(null);
embedpage(pageRequest,dbox);
}
}
function embedpage(request,dbox) {
if (window.location.href.indexOf("http")==-1 || request.status==200) {
html = request.responseText;
//document.forms['debug'].elements['before'].value = html;
var match = /<body\s*[^>]*>([\S\s]*?)<\/body>/i.exec(html);
document.getElementById(dbox).innerHTML=match[1];
//document.forms['debug'].elements['after'].value = html;
} else if(!document.getElementById(dbox)) {
alert('Target div error: \nID "' + dbox + '" niet gevonden...');
} else {
alert('Include file error: \nKan de content file niet laden...');
}
}
function clearForm(){
document.forms['debug'].elements['before'].value = '';
document.forms['debug'].elements['after'].value = '';
}
window.onload=function() {
window.focus();
//checkParam(); // zie eerst o er opgestart wordt MET parameters
changeLinks(); // zet de HTML om in JS..
}
</script>
</head>
<body>
<div id="main_container">
<div id="menu">
<div id="innerwrap">
<ul id="nav">
<li><a href="pages/home.htm" title="Dynamic Content">Home</a></li>
<li><a href="#" >Portfolio</a>
<ul>
<li><a href="portret.html" title="Dynamic Content" target="_blank">Portret</a></li>
<li><a href="pages/glamour/index.html" title="Dynamic Content">Glamour</a></li>
<li><a href="pages/trouwen/index.html" title="Dynamic Content">Trouwen</a></li>
<li><a href="zwanger/index.html" title="Dynamic Content" target="_blank">Zwangerschap</a></li>
<li><a href="pages/baby/index.html" title="Dynamic Content">Baby</a></li>
<li><a href="pages/familie/index.html" title="Dynamic Content">Familiefoto's</a></li>
<li><a href="pages/dieren/index.html" title="Dynamic Content">Huisdieren</a></li>
</ul>
<li><a href="#">Foto's</a>
<ul>
<li><a href="pages/login.htm" title="Dynamic Content">Foto's bekijken</a></li>
<li><a href="http://www.picturelabs.nl/order_page.php?action=new" target="_blank">Bestelformulier</a><li>
<li><a href="#">Bewerken</a>
<ul>
<li><a href="pages/scannen.htm"title="Dynamic Content">Scannen</a><li>
<li><a href="pages/retoucheren.htm"title="Dynamic Content">Retoucheren</a></li>
</ul>
<li><a href="#">Schoolfoto's</a>
<ul>
<li><a href="pages/schoolfotos.htm"title="Dynamic Content">Voorbeeld</a></li>
<li><a href="pages/login.htm"title="Dynamic Content">Bekijken</a></li>
</ul>
</li>
<li><a href="pages/pasfotos.htm" title="Dynamic Content">Pasfoto's</a></li>
<li><a href="pages/prijzen.htm"title="Dynamic Content">Prijzen</a></li>
</ul>
<li><a href="pages/trouwen.htm" title="Dynamic Content">Huwelijk</a></li>
<li><a href="pages/login.htm" title="Dynamic Content">Login</a></li>
<li><a href="pages/linken.htm" title="Dynamic Content">Linken</a></li>
<li><a href="pages/Contact.htm" title="Dynamic Content">Contact</a></li>
</li>
</ul>

</div><!--innerwrap-->
</div><!--menu-wrap-->
<div id="content">

<img src = "pictures/Petralogonegatiefkopie.jpg" alt="Logo PBfoto" width="500" height="501" align="absmiddle">
</div>
<br />
<div id="b"></div>
<br />
<!--div id="formdata"><hr />
<form name="debug" action="" method="post"><br />
Hieronder de debugging code om de dynamisch geladen bestanden te bekijken.<br />
Voor regex conversie:<br />
<textarea name="before" rows="10"></textarea><br />
<br />
Na regex conversie:<br />
<textarea name="after" rows="10"></textarea>
</form>
</div-->
</div>
</li>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body{
background-color000;
padding:0;


}
#main_container{
margin: 0 auto 0 auto;
width: 1000px;

}
#content {
Margin-top:100px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
text-align:center;
}
#inhoud, #inhoud a:link, #inhoud a:visited{
text-align:left;
margin-left:45%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
background-color000;
}
#linken, #linken a:link, #linken a:visited{
text-align:left;
margin-left:20%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color000;
}
#schoolfotos{
text-align:left;
}
#menu {
background-color000;
width: 100%;
height:50px;
text-align:center;
}
#innerwrap {
background-color000;
width:850px;
position:absolute;
left:50%;
margin-left:-425px;
}
h2{
text-align:center;
}
h3{
font-size:90%;
}

#nav, #nav ul {
padding:3px 0 0 0;
margin:auto;
list-style: none;

}
#nav li {
float:left;
width: 120px;
}
#nav li ul {
position:absolute;
width:120px;
left:-1000px;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 120px;
}
#nav li:hover ul{
left:auto;
background-position:0;
}
#nav a {
display:block;
margin:2px 5px 3px 5px;
text-decoration:none;
font-family:Veranda, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:left;
}
ul a {
font-weight: bold;
colorFFF;
cursor: default;
}
ul ul a:link, ul ul a:visited {
font-weight:normal;
colorFFF;
cursorointer;
}
ul ul a:hover, ul ul a:active{
font-weight: bold;
color: #FFF;
cursor: pointer;
}
ul ul li{
background-color666;
border-top: 1px solid #fff;
border-left: 0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul { /* lists nested under hovered list items */
left: auto;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
 

Bijlagen

Dit is het probleem: je probeert dynamische content dynamisch te laden. Via een AJAX-request wordt de HTML van een andere pagina opgehaald. Uit die HTML neem je de elementen uit de body en dumpt ze in een div op de main pagina. De content die niet in de body staat van de geladen pagina (in het bijzonder de CSS <link/>'s en JavaScript <script>'s in de header), doen hun werking niet.

Een aantal mogelijke oplossingen:
- Je zou kunnen proberen dat met JavaScript te fixen. Geen aanrader: je moet met enorm veel dingen rekening houden, en daarbij is zo'n beetje iedere andere oplossing die ik kan bedenken een stuk netter :P
- Gooi het laden van andere pagina's met AJAX eruit. Zet ze gewoon in een <iframe>. Ook geen nette oplossing wat mij betreft, maar waarschijnlijk op dit moment wel de gemakkelijkste.
- Gooi in het geheel het dynamisch laden van content eruit :P Ik zie het nut er niet zo van in, maar dat kan natuurlijk aan mij liggen. Aan je menu te zien heb je voor iedere pagina toch al een HTML-bestand. Maak er ook één voor je menu, en zorg met iets als PHP dat het op iedere pagina te zien is. De overhead die je dan hebt is het voor iedere pagina opnieuw laden van je menu en de changeLinks in je JavaScript, maar ik denk dat dat te verwaarlozen is.
PHP: 
<php include("menu.htm"); ?>
 
Hallo Robin,

Dank je voor je reactie, ik snap nu waarom het niet werkt.
Ik heb een manier gevonden om de albums in een nieuwe pagina te laden, waar men bij het verlaten van de albumpagina teruggaat naar de homepage van mijn site.
De reden dat ik mijn site op de huidige manier heb gemaakt: a ik wilde een horizontaal uitklap menu. B overal op het net wordt het gebruik van frames ontraden omdat deze zoekmachine onvriendelijk zouden zijn.

Ik heb geen verstand van php, vandaar dat ik html pagina's maak die ik in de div op de index laadt. Waarschijnlijk niet zoals het hoort, maar het werkt wel :-)
Ik laat het probleem even rusten en ga de site on line brengen.
Daarna kan ik in alle rust de juiste manier uitvogelen om een of andere vorm van een fotoalbum in de div te laden.

Vr. Gr.

Theo Dijkstra
 
Hoi Theo,
Ik sluit me aan bij de derde optie van Robin S: de hele AJAX-toestand er uit gooien :) en er een mooi php-menuutje van maken, dan zijn er geen frames nodig.

Met php is het wat ik het "omgekeerd denken" noem:
  • Er is niet één dezelfde hoofdpagina met het menu, waarin dan telkens een verschillende <div id="content"> wordt geladen,
  • maar er zijn verschillende pagina's, waarin op de server telkens dezelfde <div id="menu"> wordt geladen (via een php-include).

Daarvoor is alleen nodig:
  • De server moet php ondersteunen (is meestal het geval bij een eigen hosting-pakket).
  • De pagina's moeten de uitgang .php krijgen ipv .html, dan kan het include-regeltje er in komen ipv de <div id="menu">.
  • Het menu wordt een los html-fragment met alleen de <div id="menu"> (zonder <head>, <body> enz.).
Meer hoef je niet te weten/doen. :)

Het uitklap-menu kan dan als css-uitklapmenu draaien, daar is geen javascript meer voor nodig.
Op deze manier kunnen ook de album-pagina's bovenaan het volledige menu krijgen, als wat aanpassingen in de album-css worden gemaakt.

Met vriendelijk groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan