html - Have images in 3 wrapper divs but need to view only one div at a time. too slow loading -
i have 3 sets of images in 3 separate divs hard coded webpage. 1 set viewed @ time user choice button. ok when there 5 images in each set added more, page loading slowly. pictures 1200 900 px because using nivo-slider allows sizing.
there way load picture set clicked?
<div class="slider-wrapper theme-default" id="wrapper1" > <div class="nivoslider" id="c1" > <img src="images/germany2008/germanytrip01.jpg" alt="" /> <img src="images/germany2008/germanytrip02.jpg" alt="" /> <!--etc. --> </div> </div> <div class="slider-wrapper theme-default" id="wrapper2" > <div class="nivoslider" id="c2"> <img src="images/germany2008/germanytrip01.jpg" alt="" /> <img src="images/germany2008/germanytrip02.jpg" alt="" /> <!--etc. --> </div> </div>
thank you.
i'm not clear on want i'll try.
add following javascript @ bottom of body:
var wrapperoneimages = ["path/to/image","path/to/image","path/to/image"]; var wrappertwoimages = ["path/to/image","path/to/image","path/to/image"]; var amountofwrappers = 2; (i=0; < amountofwrappers; i++) { var nivoslider = document.createelement("div"); nivoslider.setattribute("class", "nivoslider"); nivoslider.setattribute("id", "c" + tostring(i+1)); var wrapper = document.getelementbyid("wrapper" + tostring(i+1)); if (i == 0) { var whatwrapper = wrapperoneimages; } else if (i == 1) { var whatwrapper = wrappertwoimages; } (j=0; j < whatwrapper.length; j++) { var img = document.createelement("img"); var img.setattribute("src", whatwrapper[j]); nivoslider.appendchild(img); } wrapper.appendchild(nivoslider); }
and replace of html provided following:
<div class="slider-wrapper theme-default" id="wrapper1" ></div> <div class="slider-wrapper theme-default" id="wrapper2" ></div>
i haven't tested should work.
Comments
Post a Comment