i want able load number of thumbnail images on page depending on width of page. number of images loaded depend on width of page.
the images (100 x 100) load such they're side side , take entire width of screen.
what best way achieve this?
thanks in advance
this have come far: -
<script src="scripts/jquery-1.9.0.min.js" type="text/javascript"></script> <style type="text/css"> #dv_frame { width: 100%; /*border: 1px solid #cccccc;*/ text-align: center; height: 110px; position: relative; } #dv_images { /*border: solid 1px blue;*/ height: 100px; margin: auto; } .myimage{ width: 100px; height: 100px; border: solid 1px red; float: left; margin-right: 5px; margin-left: 5px; } </style> <script type="text/javascript"> $(document).ready(function () { var container = $("#dv_frame") var twidth = 0 var width = container.width() (c = 0; c < 100; c++) { twidth = twidth + 110 if (twidth > (width - 10)) { $("#dv_images").css("width", (twidth - 80)) break; } addsquare() } function addsquare() { $("#dv_images").append("<div class='myimage'></div>") } }); </script> </head> <body> <div id="dv_frame"><div id="dv_images"></div></div> </body> </html>
instead of adding images, , checking width each time, calculate number of images need start. add them dummy div isn't in dom, append container (for speed & efficiency).
var $container = $("#dv_frame"), imagewidth = 110, // including margin & padding imagesneeded = math.floor($container.width() / imagewidth), // rounded down, width/imagewidth i, // iterator $foo = $('<div></div>'); // empty container div for(i = 0; < imagesneeded; i++) { // appending our empty container div $foo.append("<div class='myimage'></div>"); } // appending contents of our container div dom. // quicker , more efficient doing lots of appends dom in loop. $("#dv_images").append($foo.contents()); 
Comments
Post a Comment