Hi,

Voor een website van een kennis wil ik graag een aantal albums laten zien.

Nu is het zo dat het mogelijk is om op een foto te klikken. Vervolgens wordt het element id van de div waarin deze foto staat, meegegeven aan loadPopup in javascript. Deze moet vervolgens een popupscherm tonen met daarin het juiste album. Dit popup scherm is geschreven in jquery. Nu heb ik dat zelf nooit geleerd, dus heb een script aangepast.

Helaas bevat niet elk album evenveel foto's, dus ik moet aan de hand van de naam van de meegegeven div id weten welk album er getoond moet worden om vervolgens te bepalen hoeveel er getoond worden. Echter, zodra ik probeer om albumname te vergelijken met een string, doet ie helemaal niks meer.

Zelf denk ik dat het komt omdat de variabele albumname niet een string is en dus ook niet gebruikt kan worden in vergelijking met een string, maar zeker ben ik hier niet van.

Als er iemand is die de fout ziet, hoor ik het graag.

Alvast bedankt.

In HTML:

Code:

<div id="Kids Bikes" class="album" onclick="javascript:loadPopupContent((this.id).outerHTML)">	
			<img src="images/kidsbikes/1.jpg" class="uitgelicht" >
			<div style="background-color:rgba(240, 124, 0, 0.6)" class="overlay"><p class="overlayx">Kids Bikes</p></div> 
		</div>
		<div id="City Bikes" class="album" onclick="javascript:loadPopupContent(this.id)">	
			<img src="images/citybikes/1.jpg" class="uitgelicht" >
			<div style="background-color:rgba(240, 124, 0, 0.6)" class="overlay"><p class="overlayx">City Bikes</p></div> 
		</div>

In javascript/jquery:

Code:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

function loadContent(eleId){
	if (eleId != 0){
	
		var albumnaam = eleId.replace("-","");
		var albumname = albumnaam.replace(" ","");
		
		alert(albumname);
		alert(eleId);
		
		if (albumname == 'AllroundBikes'){ // 5 foto's
			$("#popupContent").html("<h1>" + eleId + "</h1>" +
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/1.jpg height='415' width='750'/></a>" + 
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/2.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/3.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/4.jpg height='415' width='750'/></a>" +
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/5.jpg height='415' width='750'/></a>");
		} 
		else {		
			$("#popupContent").html("<h1>" + eleId + "</h1>" +
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/1.jpg height='415' width='750'/></a>" + 
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/2.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/3.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/4.jpg height='415' width='750'/></a>" +
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/5.jpg height='415' width='750'/></a>" +
			"<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/6.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/6.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/7.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/7.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/8.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/8.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailo' href='#thumb'><img src=images/" + albumname + "/9.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/9.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailo' href='#thumb'><img src=images/" + albumname + "/10.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/10.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailro' href='#thumb'><img src=images/" + albumname + "/11.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/11.jpg height='415' width='750'/></a>" +
			"<a class='thumbnailro' href='#thumb'><img src=images/" + albumname + "/12.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/12.jpg height='415' width='750'/></a>");
		
	} 
	else {
		$("#popupContent").html("<h1>Empty</h1>");
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": "20px",
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}

function loadPopupContent(id){
	//centering with css
	centerPopup();
	//load popup
	loadPopup();
	// load content
	loadContent(id);
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});