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:
In javascript/jquery: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>
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(); } }); });
- Div ID vergelijken met string javascript/jquery
-
18-10-2012, 19:46 #1Particulier
- Berichten
- 177
- Lid sinds
- 16 Jaar
Div ID vergelijken met string javascript/jquery
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic